"use client"; import React, { useState, useMemo } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Search, X, Box, CheckCircle2, XCircle, Clock } from "lucide-react"; // Mock Data const projectsData = [ { id: "PRJ-001", name: "Nexus Design System", category: "UI/UX", budget: "$12,500", status: "Completed" }, { id: "PRJ-002", name: "Aura Authentication", category: "Backend", budget: "$8,200", status: "In Progress" }, { id: "PRJ-003", name: "Starlight Marketing", category: "Marketing", budget: "$4,100", status: "Pending" }, { id: "PRJ-004", name: "Quantum Analytics", category: "Data", budget: "$24,000", status: "In Progress" }, { id: "PRJ-005", name: "Echo Mobile App", category: "Mobile", budget: "$18,900", status: "Failed" }, { id: "PRJ-006", name: "Vortex Landing Page", category: "Frontend", budget: "$3,500", status: "Completed" }, ]; export default function SearchableGridTable() { const [searchTerm, setSearchTerm] = useState(""); // Real-time filtering logic const filteredData = useMemo(() => { if (!searchTerm) return projectsData; const lowercasedTerm = searchTerm.toLowerCase(); return projectsData.filter( (project) => project.name.toLowerCase().includes(lowercasedTerm) || project.id.toLowerCase().includes(lowercasedTerm) || project.category.toLowerCase().includes(lowercasedTerm) ); }, [searchTerm]); const getStatusConfig = (status: string) => { switch (status) { case "Completed": return { icon: CheckCircle2, color: "text-emerald-600 dark:text-emerald-400", bg: "bg-emerald-100 dark:bg-emerald-500/10" }; case "In Progress": return { icon: Clock, color: "text-blue-600 dark:text-blue-400", bg: "bg-blue-100 dark:bg-blue-500/10" }; case "Failed": return { icon: XCircle, color: "text-red-600 dark:text-red-400", bg: "bg-red-100 dark:bg-red-500/10" }; default: return { icon: Clock, color: "text-neutral-600 dark:text-neutral-400", bg: "bg-neutral-100 dark:bg-neutral-800" }; } }; return (

{/* Header & Search Bar */}

Project Directory

Manage and search active assignments.

setSearchTerm(e.target.value)} className="w-full pl-10 pr-10 py-2.5 bg-neutral-50 dark:bg-neutral-900/50 border border-neutral-200 dark:border-neutral-800 rounded-xl text-sm text-neutral-900 dark:text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/50 transition-all" /> {searchTerm && ( setSearchTerm("")} className="absolute inset-y-0 right-0 pr-3 flex items-center text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200" > )}

{/* Data Grid Table */}

{filteredData.length > 0 ? ( filteredData.map((project) => { const StatusIcon = getStatusConfig(project.status).icon; const statusColor = getStatusConfig(project.status).color; const statusBg = getStatusConfig(project.status).bg; return ( ); }) ) : ( )}

Project ID	Name	Category	Budget	Status
{project.id}	{project.name}	{project.category}	{project.budget}	{project.status}	No projects found We couldn't find anything matching "{searchTerm}"

Showing {filteredData.length} of {projectsData.length} entries

); }

Project Directory

No projects found