"use client"; import { AnimatePresence, motion } from "framer-motion"; import { BanIcon, MoreHorizontalIcon } from "lucide-react"; import { Button } from "@/registry/ui/button"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/registry/ui/tabs"; const followers = [ { username: "jane_doe", fullName: "Jane Doe" }, { username: "tech_guru", fullName: "Alex Thompson" }, { username: "nature_lover", fullName: "Emma Green" }, { username: "photogirl", fullName: "Sophia Martinez" }, { username: "code_master", fullName: "Liam Patel" }, ]; const following = [ { username: "startup_guy", fullName: "James Lee" }, { username: "design_dreamer", fullName: "Mia Wilson" }, { username: "art_addict", fullName: "Benjamin White" }, { username: "web_wizard", fullName: "Lucas Nguyen" }, { username: "health_nut", fullName: "Ella Singh" }, ]; const listVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.15, }, }, }; const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 }, }; const UserList = ({ users }: { users: typeof following }) => ( {users.map(({ username, fullName }) => (

{fullName} @{username}

))} ); export default function AnimatedTabsDemo() { return ( Followers Following

); }