import { Rocket, CheckCircle2, Clock } from "lucide-react"; import Image from "next/image"; import { cn } from "@/lib/utils"; interface TeamMember { name: string; role: string; avatar: string; status: "online" | "busy" | "offline"; } interface Milestone { title: string; dueDate: string; completed: boolean; } interface TeamProjectCardProps { projectName?: string; description?: string; teamMembers?: TeamMember[]; milestones?: Milestone[]; } export function TeamProjectCard({ projectName = "RUIXEN UI CARD", description = "Modernize and refactor the UI for performance and accessibility.", teamMembers = [ { name: "Alex", role: "Design Lead", avatar: "https://github.com/shadcn.png", status: "online", }, { name: "Sarah", role: "Frontend Dev", avatar: "https://github.com/shadcn.png", status: "busy", }, { name: "Mike", role: "Project Manager", avatar: "https://github.com/shadcn.png", status: "offline", }, ], milestones = [ { title: "UI Audit", dueDate: "Done", completed: true }, { title: "Refactor Components", dueDate: "3d left", completed: false }, { title: "Launch Prep", dueDate: "6d left", completed: false }, ], }: TeamProjectCardProps) { return (

{/* Header */}

{projectName}

{description}

{/* Body: Two-column layout */}

{/* Timeline */}

Timeline

{milestones.map((milestone, index) => (

{milestone.title}

{milestone.dueDate}

))}

{/* Team Section */}

Team Members

{teamMembers.map((member) => (

{member.name}

{member.role}

))}

); }

Prop	Type	Default	Description
`projectName`	`string`	`"RUIXEN UI CARD"`	Name of the project
`description`	`string`	`"Modernize and refactor the UI..."`	Project description
`teamMembers`	`TeamMember[]`	-	Array of team member objects
`milestones`	`Milestone[]`	-	Array of project milestones

Team Project Card

Installation

Props