feat: search kutusu leptos-shadcn-input ile güncellendi, sağa taşındı
All checks were successful
Build MIPS Binary / build (push) Successful in 5m18s
All checks were successful
Build MIPS Binary / build (push) Successful in 5m18s
- toolbar.rs: search kutusu Input bileşeniyle değiştirildi - Add Torrent butonu Button bileşeniyle güncellendi - Search kutusu ortadan sağa taşındı - Arama ikonu eklendi
This commit is contained in:
@@ -1,4 +1,6 @@
|
||||
use leptos::prelude::*;
|
||||
use leptos_shadcn_input::Input;
|
||||
use leptos_shadcn_button::{Button, ButtonVariant, ButtonSize};
|
||||
use crate::components::torrent::add_torrent::AddTorrentDialog;
|
||||
|
||||
#[component]
|
||||
@@ -9,37 +11,43 @@ pub fn Toolbar() -> impl IntoView {
|
||||
|
||||
view! {
|
||||
<div class="flex min-h-14 h-auto items-center border-b border-border bg-background px-4" style="padding-top: env(safe-area-inset-top);">
|
||||
<div class="flex flex-1 items-center gap-4">
|
||||
// Sol kısım: Menü butonu + Add Torrent
|
||||
<div class="flex items-center gap-3">
|
||||
// Mobile Menu Trigger
|
||||
<button
|
||||
on:click=move |_| is_mobile_menu_open.update(|v| *v = !*v)
|
||||
class="lg:hidden inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
|
||||
<Button
|
||||
variant=ButtonVariant::Ghost
|
||||
size=ButtonSize::Icon
|
||||
class="lg:hidden"
|
||||
on_click=Callback::new(move |()| is_mobile_menu_open.update(|v| *v = !*v))
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 shadow gap-2"
|
||||
on:click=move |_| show_add_modal.1.set(true)
|
||||
<Button
|
||||
class="gap-2 shadow"
|
||||
on_click=Callback::new(move |()| show_add_modal.1.set(true))
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 md:w-5 md:h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
<span class="hidden sm:inline">"Add Torrent"</span>
|
||||
<span class="sm:hidden">"Add"</span>
|
||||
</button>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:flex items-center justify-center flex-1">
|
||||
<div class="relative w-full max-w-sm">
|
||||
<input
|
||||
type="text"
|
||||
// Sağ kısım: Search kutusu
|
||||
<div class="flex flex-1 items-center justify-end gap-2">
|
||||
<div class="hidden md:flex items-center gap-2 w-full max-w-xs">
|
||||
<div class="relative flex-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
||||
</svg>
|
||||
<Input
|
||||
input_type="search"
|
||||
placeholder="Search..."
|
||||
class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
||||
prop:value=move || store.search_query.get()
|
||||
on:input=move |ev| store.search_query.set(event_target_value(&ev))
|
||||
value=MaybeProp::derive(move || Some(store.search_query.get()))
|
||||
on_change=Callback::new(move |val: String| store.search_query.set(val))
|
||||
class="pl-8 h-9"
|
||||
/>
|
||||
<Show when=move || !store.search_query.get().is_empty()>
|
||||
<button
|
||||
@@ -51,12 +59,11 @@ pub fn Toolbar() -> impl IntoView {
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-1 justify-end px-4 gap-2">
|
||||
<Show when=move || show_add_modal.0.get()>
|
||||
<AddTorrentDialog on_close=Callback::new(move |()| show_add_modal.1.set(false)) />
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
BIN
vibetorrent.db
BIN
vibetorrent.db
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user