"use client" import * as React from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { ChevronDown } from "lucide-react" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" import { cn } from "@/lib/utils" export interface RootSelectOption { url: string icon?: React.ReactNode title: React.ReactNode description?: React.ReactNode urls?: string[] className?: string } interface RootSelectProps extends React.HTMLAttributes { options: RootSelectOption[] placeholder?: React.ReactNode onSelect?: () => void } export function RootSelect({ options, placeholder, onSelect, className, ...props }: RootSelectProps) { const [open, setOpen] = React.useState(false) const pathname = usePathname() const selected = React.useMemo(() => { return options.findLast((item) => item.urls ? item.urls.includes(pathname) : pathname.startsWith(item.url) ) }, [options, pathname]) const handleSelect = () => { setOpen(false) onSelect?.() } return ( {(selected || placeholder) && ( )}

{options.map((option) => ( ))}

) } function SelectItem({ icon, title, description }: Partial) { return ( <> {icon}

{title}

{description && (

{description}

)}

) }