Assignee User

Component 105

About

Here is user assignation component by indev ui

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Assignee User to your project and fits it to your theme.

Code

How Assignee User is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'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 };