"use client"; import { Archive, Calendar, MoreVertical, Plus, Search, Trash2, User, X, } from "lucide-react"; import Image from "next/image"; import { useMemo, useState } from "react"; import { cn } from "@/lib/utils"; import { Avatar, AvatarFallback, AvatarImage, } from "@/registry/new-york/ui/avatar"; import { Badge } from "@/registry/new-york/ui/badge"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/registry/new-york/ui/dropdown-menu"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/registry/new-york/ui/input-group"; import { Progress } from "@/registry/new-york/ui/progress"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/registry/new-york/ui/select"; export type ProjectStatus = "active" | "archived" | "completed"; export interface ProjectMember { id: string; name: string; avatar?: string; } export interface Project { id: string; name: string; description?: string; status: ProjectStatus; progress: number; thumbnail?: string; color?: string; members: ProjectMember[]; taskCount?: number; completedTaskCount?: number; createdAt: Date; updatedAt: Date; } export interface ProjectListProps { projects?: Project[]; onProjectSelect?: (projectId: string) => void; onProjectCreate?: () => void; onProjectArchive?: (projectId: string) => Promise; onProjectDelete?: (projectId: string) => Promise; className?: string; showSearch?: boolean; showFilters?: boolean; layout?: "grid" | "list"; } function formatDate(date: Date): string { const now = new Date(); const month = date.toLocaleString("en-US", { month: "short" }); const day = date.getDate(); const year = date.getFullYear(); const currentYear = now.getFullYear(); if (year === currentYear) { return `${month} ${day}`; } return `${month} ${day}, ${year}`; } function getStatusBadgeVariant(status: ProjectStatus) { switch (status) { case "active": return "default"; case "completed": return "secondary"; case "archived": return "outline"; } } function getStatusLabel(status: ProjectStatus): string { switch (status) { case "active": return "Active"; case "completed": return "Completed"; case "archived": return "Archived"; } } interface ProjectCardProps { project: Project; layout: "grid" | "list"; onProjectClick: (projectId: string) => void; onArchive: (projectId: string) => void; onDelete: (projectId: string) => void; } function ProjectCard({ project, layout, onProjectClick, onArchive, onDelete, }: ProjectCardProps) { if (layout === "list") { return (

onProjectClick(project.id)} role="button" tabIndex={0} > {project.thumbnail ? (

) : (

{project.name.charAt(0).toUpperCase()}

)}

{project.name}

{getStatusLabel(project.status)}

{project.description && (

{project.description}

)}

{project.members.length} member {project.members.length !== 1 ? "s" : ""}

{project.taskCount !== undefined && ( {project.completedTaskCount || 0} / {project.taskCount} tasks )} Updated {formatDate(project.updatedAt)}

onArchive(project.id)}> Archive onDelete(project.id)} variant="destructive" > Delete

); } return (

onProjectClick(project.id)} role="button" tabIndex={0} > {project.thumbnail ? (

) : (

{project.name.charAt(0).toUpperCase()}

)}

{project.name}

{getStatusLabel(project.status)}

{project.description && (

{project.description}

)}

{project.members.slice(0, 4).map((member) => ( {member.name.charAt(0).toUpperCase()} ))} {project.members.length > 4 && (

+{project.members.length - 4}

)}

{project.taskCount !== undefined && ( {project.completedTaskCount || 0} / {project.taskCount} )}

{project.progress}% complete onArchive(project.id)}> Archive onDelete(project.id)} variant="destructive" > Delete

); } export default function ProjectList({ projects = [], onProjectSelect, onProjectCreate, onProjectArchive, onProjectDelete, className, showSearch = true, showFilters = true, layout = "grid", }: ProjectListProps) { const [searchQuery, setSearchQuery] = useState(""); const [statusFilter, setStatusFilter] = useState("all"); const filteredProjects = useMemo(() => { let filtered = [...projects]; if (searchQuery.trim()) { const query = searchQuery.toLowerCase(); filtered = filtered.filter( (project) => project.name.toLowerCase().includes(query) || project.description?.toLowerCase().includes(query) ); } if (statusFilter !== "all") { filtered = filtered.filter((project) => project.status === statusFilter); } return filtered.sort( (a, b) => b.updatedAt.getTime() - a.updatedAt.getTime() ); }, [projects, searchQuery, statusFilter]); const handleArchive = async (projectId: string) => { await onProjectArchive?.(projectId); }; const handleDelete = async (projectId: string) => { await onProjectDelete?.(projectId); }; return (

Projects {filteredProjects.length} project {filteredProjects.length !== 1 ? "s" : ""}

{onProjectCreate && ( )}

{showSearch && ( setSearchQuery(e.target.value)} placeholder="Search projects…" type="search" value={searchQuery} /> {searchQuery && ( )} )} {showFilters && ( )}

{filteredProjects.length === 0 ? (

{searchQuery || statusFilter !== "all" ? "No projects match your filters" : "No projects yet"}

{onProjectCreate ? "Create your first project to get started" : "Projects will appear here"}

{onProjectCreate && ( )}

) : (

{filteredProjects.map((project) => ( {})} project={project} /> ))}

)} ); }

Mobile App v2.0

Q4 Website Redesign

Example Usage

Mobile App v2.0

Q4 Website Redesign