animated-table-select-demo

1import { User } from "lucide-react";
2import { useState } from "react";
3import {
4  AnimatedTable,
5  type ColumnDef,
6} from "@/registry/default/ui/animated-table";
7 
8interface UserData {
9  id: string;
10  name: string;
11  email: string;
12  role: string;
13  status: "active" | "inactive" | "pending";
14}
15 
16const data: UserData[] = [
17  {
18    id: "1",
19    name: "Alice Johnson",
20    email: "alice@example.com",
21    role: "Admin",
22    status: "active",
23  },
24  {
25    id: "2",
26    name: "Bob Smith",
27    email: "bob@example.com",
28    role: "Developer",
29    status: "active",
30  },
31  {
32    id: "3",
33    name: "Carol White",
34    email: "carol@example.com",
35    role: "Designer",
36    status: "pending",
37  },
38  {
39    id: "4",
40    name: "David Brown",
41    email: "david@example.com",
42    role: "Developer",
43    status: "inactive",
44  },
45  {
46    id: "5",
47    name: "Emma Davis",
48    email: "emma@example.com",
49    role: "Manager",
50    status: "active",
51  },
52];
53 
54const StatusBadge = ({ status }: { status: UserData["status"] }) => {
55  const styles = {
56    active: "bg-green-500/20 text-green-400 border-green-500/30",
57    inactive: "bg-red-500/20 text-red-400 border-red-500/30",
58    pending: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
59  };
60 
61  return (
62    <span
63      className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 font-medium text-xs ${styles[status]}`}
64    >
65      <span
66        className={`h-1.5 w-1.5 rounded-full ${status === "active" ? "bg-green-400" : status === "inactive" ? "bg-red-400" : "bg-yellow-400"}`}
67      />
68      {status.charAt(0).toUpperCase() + status.slice(1)}
69    </span>
70  );
71};
72 
73const columns: ColumnDef<UserData>[] = [
74  {
75    id: "name",
76    header: "Name",
77    sortable: true,
78    cell: (row) => (
79      <div className="flex items-center gap-3">
80        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20 text-primary">
81          <User className="h-4 w-4" />
82        </div>
83        <span className="font-medium text-foreground">{row.name}</span>
84      </div>
85    ),
86  },
87  {
88    id: "email",
89    header: "Email",
90    accessorKey: "email",
91    sortable: true,
92  },
93  {
94    id: "role",
95    header: "Role",
96    accessorKey: "role",
97    sortable: true,
98  },
99  {
100    id: "status",
101    header: "Status",
102    sortable: true,
103    align: "center",
104    cell: (row) => <StatusBadge status={row.status} />,
105  },
106];
107 
108export default function AnimatedTableSelectDemo() {
109// … truncated