Components
Loading preview...
Here is user assignation component by indev ui
npx shadcn@latest add https://21st.dev/r/ln-dev7/assignee-user'use client';
import { useState } from 'react';
import AssigneeUser, { users as userList, User } from '@/components/ui/assignee-user';
import { CircleUserRound } from 'lucide-react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
const AssigneeUserDemo = () => {
const [assignee, setAssignee] = useState<User | null>(userList[0]);
const coreTeam = userList.filter((user) => user.teamIds.includes('CORE'));
return (
<div className="flex w-full flex-col items-center justify-center gap-10 p-4">
<div className="flex flex-col items-center gap-2 text-center">
<h2 className="text-lg font-semibold">Assignee User</h2>
<p className="text-sm text-muted-foreground">Select an assignee from the dropdown.</p>
</div>
<AssigneeUser value={assignee} onChange={setAssignee} userList={coreTeam} />
<div className="flex w-full max-w-xs flex-col items-center gap-3 rounded-lg border bg-background p-6 shadow-sm">
<h3 className="text-base font-medium text-muted-foreground">Current Assignee</h3>
{assignee ? (
<div className="flex items-center gap-3">
<Avatar>
<AvatarImage src={assignee.avatarUrl} alt={assignee.name} />
<AvatarFallback>{assignee.name.charAt(0)}</AvatarFallback>
</Avatar>
<div className="flex flex-col items-start">
<span className="text-lg font-semibold">{assignee.name}</span>
<Badge variant={assignee.status === 'online' ? 'default' : 'secondary'}>
{assignee.status}
</Badge>
</div>
</div>
) : (
<div className="flex items-center gap-3 text-muted-foreground">
<CircleUserRound className="size-10" />
<span className="text-lg font-semibold">Unassigned</span>
</div>
)}
</div>
</div>
);
};
export { AssigneeUserDemo as DemoOne };