Components
Loading preview...
UserProfileDropdown Component This component displays a user's avatar and details, along with a dropdown menu containing customizable actions.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/user-profile-dropdownimport {
MessageSquare,
Phone,
ExternalLink,
Edit,
Share2,
Trash2,
Move,
CheckSquare,
} from 'lucide-react';
import { UserProfileDropdown } from '@/components/ui/user-profile-dropdown'; // Adjust the import path
// Dummy functions for demo purposes
const handleAction = (action: string) => alert(`Action: ${action}`);
const Demo = () => {
// Define sample data using the types from the component
const user = {
name: 'xcse',
handle: '@xcse98',
avatarUrl: 'https://i.pravatar.cc/150?u=a042581f4e29026704d', // Replace with a real image link
};
const actions = [
{ icon: MessageSquare, label: 'Message', onClick: () => handleAction('Message') },
{ icon: Phone, label: 'Call', onClick: () => handleAction('Call') },
{ icon: ExternalLink, label: 'Open', onClick: () => handleAction('Open') },
];
const menuItems = [
{ icon: CheckSquare, label: 'Set status', onClick: () => handleAction('Set status'), hasArrow: true },
{ icon: Move, label: 'Move', onClick: () => handleAction('Move') },
{ icon: Edit, label: 'Edit', onClick: () => handleAction('Edit') },
{ icon: Share2, label: 'Share', onClick: () => handleAction('Share') },
{ icon: Trash2, label: 'Delete', onClick: () => handleAction('Delete'), isDestructive: true },
];
return (
<div className="flex h-[450px] w-full items-start justify-center bg-background p-10">
<UserProfileDropdown
user={user}
actions={actions}
menuItems={menuItems}
/>
</div>
);
};
export default Demo;