animated-table-basic-demo

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