// title: File browser toolbar with search, sort and view toggle "use client"; import { LayoutGridIcon, LayoutListIcon, SearchIcon, SlidersHorizontalIcon, SortAscIcon, } from "lucide-react"; import { useState } from "react"; import { Button } from "@/registry/default/ui/button"; import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue, } from "@/registry/default/ui/select"; import { ToggleGroup, ToggleGroupItem, } from "@/registry/default/ui/toggle-group"; import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator, } from "@/registry/default/ui/toolbar"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/registry/default/ui/tooltip"; const sortOptions = [ { label: "Name A–Z", value: "name-asc" }, { label: "Name Z–A", value: "name-desc" }, { label: "Newest first", value: "date-desc" }, { label: "Oldest first", value: "date-asc" }, ]; export function Pattern() { const [view, setView] = useState("grid"); return (

} > } /> Filter v && setView(v)} value={[view]} > } > } /> Grid view } > } /> List view ); }