import {
Select,
SelectIcon,
SelectItem,
SelectItemIndicator,
SelectItemText,
SelectList,
SelectPopup,
SelectTrigger,
SelectValue,
} from "@/registry/pure-ui/ui/select";
export const users = [
{
value: 1,
label: "Tony Reichert",
role: "CEO",
team: "Management",
status: "active",
age: "29",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
email: "tony.reichert@example.com",
},
{
value: 2,
label: "Zoey Lang",
role: "Tech Lead",
team: "Development",
status: "paused",
age: "25",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
email: "zoey.lang@example.com",
},
{
value: 3,
label: "Jane Fisher",
role: "Sr. Dev",
team: "Development",
status: "active",
age: "22",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
email: "jane.fisher@example.com",
},
{
value: 4,
label: "William Howard",
role: "C.M.",
team: "Marketing",
status: "vacation",
age: "28",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
email: "william.howard@example.com",
},
{
value: 5,
label: "Kristen Copper",
role: "S. Manager",
team: "Sales",
status: "active",
age: "24",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
email: "kristen.cooper@example.com",
},
{
value: 6,
label: "Brian Kim",
role: "P. Manager",
team: "Management",
age: "29",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
email: "brian.kim@example.com",
status: "active",
},
{
value: 7,
label: "Michael Hunt",
role: "Designer",
team: "Design",
status: "paused",
age: "27",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
email: "michael.hunt@example.com",
},
{
value: 8,
label: "Samantha Brooks",
role: "HR Manager",
team: "HR",
status: "active",
age: "31",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
email: "samantha.brooks@example.com",
},
{
value: 9,
label: "Frank Harrison",
role: "F. Manager",
team: "Finance",
status: "vacation",
age: "33",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
email: "frank.harrison@example.com",
},
{
value: 10,
label: "Emma Adams",
role: "Ops Manager",
team: "Operations",
status: "active",
age: "35",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
email: "emma.adams@example.com",
},
{
value: 11,
label: "Brandon Stevens",
role: "Jr. Dev",
team: "Development",
status: "active",
age: "22",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
email: "brandon.stevens@example.com",
},
{
value: 12,
label: "Megan Richards",
role: "P. Manager",
team: "Product",
status: "paused",
age: "28",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
email: "megan.richards@example.com",
},
{
value: 13,
label: "Oliver Scott",
role: "S. Manager",
team: "Security",
status: "active",
age: "37",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
email: "oliver.scott@example.com",
},
{
value: 14,
label: "Grace Allen",
role: "M. Specialist",
team: "Marketing",
status: "active",
age: "30",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
email: "grace.allen@example.com",
},
{
value: 15,
label: "Noah Carter",
role: "IT Specialist",
team: "I. Technology",
status: "paused",
age: "31",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
email: "noah.carter@example.com",
},
{
value: 16,
label: "Ava Perez",
role: "Manager",
team: "Sales",
status: "active",
age: "29",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
email: "ava.perez@example.com",
},
{
value: 17,
label: "Liam Johnson",
role: "Data Analyst",
team: "Analysis",
status: "active",
age: "28",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
email: "liam.johnson@example.com",
},
{
value: 18,
label: "Sophia Taylor",
role: "QA Analyst",
team: "Testing",
status: "active",
age: "27",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
email: "sophia.taylor@example.com",
},
{
value: 19,
label: "Lucas Harris",
role: "Administrator",
team: "Information Technology",
status: "paused",
age: "32",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
email: "lucas.harris@example.com",
},
{
value: 20,
label: "Mia Robinson",
role: "Coordinator",
team: "Operations",
status: "active",
age: "26",
avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
email: "mia.robinson@example.com",
},
];
export function SelectScaleDemo() {
return (
<Select items={users}>
<SelectTrigger className="min-w-66">
<SelectValue placeholder="Select a user">
{(value: number) => {
const user = users.find((user) => user.value === value);
if (!user) return null;
return (
<div className="flex items-center gap-2">
<img
src={user?.avatar}
alt={user?.label}
className="size-5.5 rounded-full object-cover"
/>
<span className="flex flex-col">
<span className="text-sm">{user?.label}</span>
<span className="text-xs text-muted-foreground">
{user?.email}
</span>
</span>
</div>
);
}}
</SelectValue>
<SelectIcon>
<ChevronUpDownIcon className="size-3" />
</SelectIcon>
</SelectTrigger>
<SelectPopup>
<SelectList>
{users.map(({ label, value, avatar, email }) => {
return (
<SelectItem key={value} value={value} className="h-fit">
<img
src={avatar}
alt={label}
className="size-5.5 rounded-full object-cover"
/>
<div className="flex flex-col">
<SelectItemText>{label}</SelectItemText>
<SelectItemText className="text-xs text-muted-foreground">
{email}
</SelectItemText>
</div>
<SelectItemIndicator>
<CheckIcon className="size-3" />
</SelectItemIndicator>
</SelectItem>
);
})}
</SelectList>
</SelectPopup>
</Select>
);
}
function ChevronUpDownIcon(props: React.ComponentProps<"svg">) {
return (
<svg
width="8"
height="12"
viewBox="0 0 8 12"
fill="none"
stroke="currentcolor"
strokeWidth="1.5"
{...props}
>
<path d="M0.5 4.5L4 1.5L7.5 4.5" />
<path d="M0.5 7.5L4 10.5L7.5 7.5" />
</svg>
);
}
function CheckIcon(props: React.ComponentProps<"svg">) {
return (
<svg
fill="currentcolor"
width="10"
height="10"
viewBox="0 0 10 10"
{...props}
>
<path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
</svg>
);
}