Stacked List

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { motion, AnimatePresence } from "motion/react";
5import { useState, useMemo } from "react";
6import { Input } from "@/components/ui/input";
7import { Button } from "@/components/ui/button";
8import { HugeiconsIcon } from "@hugeicons/react";
9import {
10  ProfileIcon,
11  Search01Icon,
12  Cancel01Icon,
13  Add01Icon,
14  Briefcase01Icon,
15  PaintBoardIcon,
16  Database01Icon,
17  QuillWrite01Icon,
18} from "@hugeicons/core-free-icons";
19 
20interface Member {
21  id: string;
22  name: string;
23  status: string;
24  online: boolean;
25  role: string;
26  roleType: "pm" | "designer" | "data" | "creator";
27  avatar: string;
28}
29 
30const ALL_MEMBERS: Member[] = [
31  {
32    id: "01",
33    name: "Oliver Smith",
34    status: "Online",
35    online: true,
36    role: "Project Manager",
37    roleType: "pm",
38    avatar: "https://tapback.co/api/avatar/Oliver.webp",
39  },
40  {
41    id: "02",
42    name: "Sophie Chen",
43    status: "17m ago",
44    online: false,
45    role: "Designer",
46    roleType: "designer",
47    avatar: "https://tapback.co/api/avatar/Sophie.webp",
48  },
49  {
50    id: "03",
51    name: "Noah Wilson",
52    status: "29m ago",
53    online: false,
54    role: "Data Specialist",
55    roleType: "data",
56    avatar: "https://tapback.co/api/avatar/Noah.webp",
57  },
58  {
59    id: "04",
60    name: "Emma Davis",
61    status: "48m ago",
62    online: false,
63    role: "Creator",
64    roleType: "creator",
65    avatar: "https://tapback.co/api/avatar/Emma.webp",
66  },
67  {
68    id: "05",
69    name: "Leo Garcia",
70    status: "Online",
71    online: true,
72    role: "Designer",
73    roleType: "designer",
74    avatar: "https://tapback.co/api/avatar/Leo.webp",
75  },
76  {
77    id: "06",
78    name: "Mia Thompson",
79    status: "Online",
80    online: true,
81    role: "Project Manager",
82    roleType: "pm",
83    avatar: "https://tapback.co/api/avatar/Mia.webp",
84  },
85  {
86    id: "07",
87    name: "Ethan Wright",
88    status: "5h ago",
89    online: false,
90    role: "Data Specialist",
91    roleType: "data",
92    avatar: "https://tapback.co/api/avatar/Ethan.webp",
93  },
94];
95 
96const ACTIVE_MEMBERS = ALL_MEMBERS.filter((m) => m.online);
97 
98const sweepSpring = {
99  type: "spring" as const,
100  stiffness: 400,
101  damping: 35,
102  mass: 0.5,
103};
104 
105const RoleBadge = ({
106  type,
107  label,
108}: {
109  type: Member["roleType"];
110  label: string;
111}) => {
112  const styles = {
113    pm: {
114      bg: "bg-[#FFFCEB]",
115      text: "text-[#856404]",
116      border: "border-[#FFEBA5]",
117      icon: Briefcase01Icon,
118    },
119    designer: {
120      bg: "bg-[#F0F7FF]",
121// … truncated