82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import { Tags } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { SORT_OPTIONS, type SortValue } from "@/features/notes/sortOptions";
|
|
|
|
type Props = {
|
|
query: string;
|
|
onQueryChange: (v: string) => void;
|
|
sort: SortValue;
|
|
onSortChange: (v: SortValue) => void;
|
|
tagTreeCount: number;
|
|
onOpenTagTree: () => void;
|
|
onCreateNew: () => void;
|
|
};
|
|
|
|
export function NotesToolbar({
|
|
query,
|
|
onQueryChange,
|
|
sort,
|
|
onSortChange,
|
|
tagTreeCount,
|
|
onOpenTagTree,
|
|
onCreateNew,
|
|
}: Props) {
|
|
return (
|
|
<header className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end sm:gap-3">
|
|
<div className="min-w-0 flex-1 space-y-1.5">
|
|
<Label htmlFor="search" className="text-xs text-muted-foreground">
|
|
Suche
|
|
</Label>
|
|
<Input
|
|
id="search"
|
|
value={query}
|
|
onChange={e => onQueryChange(e.target.value)}
|
|
placeholder="Freitext: Inhalt & Tags · tag:x · title:y · content:z"
|
|
autoComplete="off"
|
|
className="h-9"
|
|
/>
|
|
</div>
|
|
<div className="w-full min-w-[min(100%,220px)] space-y-1.5 sm:w-72">
|
|
<Label htmlFor="sort" className="text-xs text-muted-foreground">
|
|
Sortierung
|
|
</Label>
|
|
<Select value={sort} onValueChange={v => onSortChange(v as SortValue)}>
|
|
<SelectTrigger id="sort" className="h-9 w-full">
|
|
<SelectValue placeholder="Sortierung" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{SORT_OPTIONS.map(o => (
|
|
<SelectItem key={o.value} value={o.value}>
|
|
{o.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2 sm:shrink-0">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
className="h-9 w-full gap-2 sm:w-auto"
|
|
onClick={onOpenTagTree}
|
|
title="Tag-Hierarchie und Anzeige-Prefixe verwalten"
|
|
>
|
|
<Tags className="size-4 shrink-0 opacity-70" aria-hidden />
|
|
<span>Tag-Baum</span>
|
|
{tagTreeCount > 0 ? (
|
|
<span className="rounded-full bg-muted px-1.5 py-0 text-[10px] font-medium tabular-nums text-muted-foreground">
|
|
{tagTreeCount}
|
|
</span>
|
|
) : null}
|
|
</Button>
|
|
<Button type="button" className="h-9 w-full sm:w-auto" onClick={onCreateNew}>
|
|
Neu
|
|
</Button>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|