"use client"; import React, { useState, useMemo } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { cn } from "@/src/lib/utils"; import { ArrowUpDown, ArrowUp, ArrowDown, MoreHorizontal, Edit3, Trash2, Eye, Check, ChevronDown, ChevronRight, ChevronLeft, Search, Download, Filter } from "lucide-react"; // --- Mock Data --- interface DataItem { id: string; name: string; email: string; role: string; status: "active" | "pending" | "offline" | "error"; amount: string; date: string; avatar: string; } const DATA: DataItem[] = [ { id: "USR-001", name: "Elena Roderick", email: "elena@corp.ai", role: "Admin", status: "active", amount: "$12,500.00", date: "Oct 24, 2024", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=100&h=100" }, { id: "USR-002", name: "Marcus Kane", email: "m.kane@tech.io", role: "Developer", status: "pending", amount: "$8,450.00", date: "Oct 22, 2024", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=100&h=100" }, { id: "USR-003", name: "Sarah Lin", email: "sarah.l@design.co", role: "Designer", status: "active", amount: "$9,200.00", date: "Oct 21, 2024", avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=100&h=100" }, { id: "USR-004", name: "David Black", email: "d.black@security.net", role: "Manager", status: "offline", amount: "$15,000.00", date: "Oct 20, 2024", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=100&h=100" }, { id: "USR-005", name: "Priya Mehta", email: "p.mehta@analytics.io", role: "Analyst", status: "error", amount: "$7,800.00", date: "Oct 19, 2024", avatar: "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?auto=format&fit=crop&w=100&h=100" }, { id: "USR-006", name: "James Thorne", email: "j.thorne@sys.com", role: "Engineer", status: "active", amount: "$11,100.00", date: "Oct 18, 2024", avatar: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=100&h=100" }, ]; // --- Shared Components --- const StatusBadge = ({ status }: { status: string }) => { const styles: Record = { active: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20", pending: "bg-amber-500/10 text-amber-400 border-amber-500/20", offline: "bg-zinc-500/10 text-zinc-400 border-zinc-500/20", error: "bg-rose-500/10 text-rose-400 border-rose-500/20", }; return ( {status} ); }; const AvatarCell = ({ url, name, email }: { url: string; name: string; email: string }) => (

{name} {email}

); // --- 1. Simple Minimal Table --- export default function MinimalTable() { return (

{DATA.map((item) => ( ))}

User	Role	Date
{item.name}	{item.role}	{item.date}

); }