"use client" import { useState } from "react" // shadcn import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" const users = [ { label: "Olivia Martin", name: "Olivia Martin", value: "olivia", role: "Product Designer", initials: "OM", color: "bg-blue-500/15 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300", }, { label: "Jackson Lee", name: "Jackson Lee", value: "jackson", role: "Frontend Lead", initials: "JL", color: "bg-purple-500/15 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300", }, { label: "Isabella Nguyen", name: "Isabella Nguyen", value: "isabella", role: "UX Researcher", initials: "IN", color: "bg-emerald-500/15 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300", }, { label: "William Kim", name: "William Kim", value: "william", role: "DevOps Engineer", initials: "WK", color: "bg-amber-500/15 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300", }, { label: "Sofia Davis", name: "Sofia Davis", value: "sofia", role: "Product Manager", initials: "SD", color: "bg-rose-500/15 text-rose-700 dark:bg-rose-500/20 dark:text-rose-300", }, ] // ------------------------------ | SELECT - WITH USERS | ------------------------------ // export function SelectWithUsers() { const [value, setValue] = useState("olivia") const selectedUser = users.find((u) => u.value === value) return ( ) }