"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { cn } from "@/src/lib/utils"; import { Briefcase, Hash } from "lucide-react"; // --- Mock Data --- const USERS = [ { id: 1, name: "Elena R.", role: "Art Director", img: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=200&auto=format&fit=crop" }, { id: 2, name: "Marcus K.", role: "Tech Lead", img: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=200&auto=format&fit=crop" }, { id: 3, name: "Sarah L.", role: "Product Designer", img: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=200&auto=format&fit=crop" }, { id: 4, name: "David B.", role: "Strategist", img: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=200&auto=format&fit=crop" }, { id: 5, name: "Priya M.", role: "Frontend", img: "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?q=80&w=200&auto=format&fit=crop" }, { id: 6, name: "James T.", role: "Backend", img: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=200&auto=format&fit=crop" }, { id: 7, name: "Anna W.", role: "QA Lead", img: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=200&auto=format&fit=crop" }, ]; export const SlideOutStack = () => { const [hoveredId, setHoveredId] = useState(null); return (

{USERS.slice(0, 3).map((user, index) => (

setHoveredId(user.id)} onMouseLeave={() => setHoveredId(null)} > {/* Avatar */}

{/* Sliding Tag */}

{user.name} {user.role}

))}

); };

Slide Out Stack