import * as React from "react"; import { LoaderCircleIcon, SearchIcon } from "lucide-react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; const users = [ { image: "https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png", name: "Howard Lloyd", fallback: "HL", notifications: 3 }, { image: "https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-6.png", name: "Olivia Sparks", fallback: "OS", notifications: 0 }, { image: "https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png", name: "Hallie Richards", fallback: "HR", notifications: 1 }, ]; function useDebounce(value: T, delay = 300) { const [debounced, setDebounced] = React.useState(value); React.useEffect(() => { const id = setTimeout(() => setDebounced(value), delay); return () => clearTimeout(id); }, [value, delay]); return debounced; } export function SearchPopoverDemo() { const [input, setInput] = React.useState(""); const [loading, setLoading] = React.useState(false); const debounced = useDebounce(input); const [filtered, setFiltered] = React.useState(users); React.useEffect(() => { setLoading(Boolean(input)); }, [input]); React.useEffect(() => { if (debounced.trim() === "") setFiltered(users); else { const q = debounced.toLowerCase(); setFiltered(users.filter((u) => u.name.toLowerCase().includes(q))); } setLoading(false); }, [debounced]); return ( } />

{user.fallback}
{user.name}
{user.notifications > 0 && ( {user.notifications} Notification{user.notifications > 1 ? "s" : ""} )}
No users found

); }