"use client"; import React from "react"; import { motion, AnimatePresence, Variants } from "framer-motion"; import { Check, Mail, MapPin } from "lucide-react"; // --- TYPES & INTERFACES --- export type UserStatusColor = "emerald" | "amber" | "rose" | "indigo"; export interface MultiSelectUserCardProps { id: string; name: string; role: string; email: string; location: string; avatarUrl: string; statusTag: string; statusColor?: UserStatusColor; isSelected?: boolean; onSelect?: (id: string, selected: boolean) => void; className?: string; } export const MultiSelectUserCard = ({ id, name, role, email, location, avatarUrl, statusTag, statusColor = "indigo", isSelected = false, onSelect, className, }: MultiSelectUserCardProps) => { // --- THEME ENGINE --- const themes: Record = { emerald: "text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/40 border-emerald-100 dark:border-emerald-900", amber: "text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/40 border-amber-100 dark:border-amber-900", rose: "text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-950/40 border-rose-100 dark:border-rose-900", indigo: "text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-950/40 border-indigo-100 dark:border-indigo-900", }; const currentT = themes[statusColor]; // --- ANIMATION VARIANTS (Explicitly Typed) --- const checkVariants: Variants = { hidden: { pathLength: 0, opacity: 0 }, visible: { pathLength: 1, opacity: 1, transition: { duration: 0.3, ease: "easeOut", delay: 0.1 } } }; return ( onSelect?.(id, !isSelected)} className={` relative w-full max-w-[320px] rounded-[2.5rem] p-8 flex flex-col font-sans select-none cursor-pointer bg-white dark:bg-neutral-900 border transition-colors duration-300 ${isSelected ? "border-indigo-500 shadow-2xl shadow-indigo-500/10 bg-indigo-50/50 dark:bg-indigo-950/20" : "border-neutral-100 dark:border-neutral-800 shadow-xl hover:border-neutral-200 dark:hover:border-neutral-700"} ${className || ""} `} > {/* 1. SELECTION INDICATOR */} {isSelected && (

)} {/* 2. USER INFO */}

{statusTag}

{name}

{role}

{/* 3. DETAILS */}

{email}

{location}

); }; // --- DEMO IMPLEMENTATION --- export default function MultiSelectUserDemo() { const [selectedUsers, setSelectedUsers] = React.useState(["user_01"]); const users = [ { id: "user_01", name: "Alisha Chen", role: "Lead Architect", email: "a.chen@quantum.dev", location: "San Francisco, CA", avatarUrl: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400&auto=format&fit=crop", statusTag: "Verified", statusColor: "emerald" as UserStatusColor, }, { id: "user_02", name: "Marcus Bell", role: "Senior UX Researcher", email: "m.bell@quantum.dev", location: "Austin, TX", avatarUrl: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=400&auto=format&fit=crop", statusTag: "Pending", statusColor: "amber" as UserStatusColor, } ]; return (

{users.map(user => ( setSelectedUsers(p => sel ? [...p, id] : p.filter(u => u !== id))} /> ))}

); }