Project Detail View A comprehensive view component designed to display the details of a project or a complex task. It includes sections for status, assignees, dates, tags, description, attachments, and a detailed task list. The component is built to be highly reusable and is styled using shadcn/ui theme variables for seamless light and dark mode support. It incorporates animations with framer-motion for a more dynamic user experience.
import { ProjectDetailView, ProjectDetailViewProps } from "@/components/ui/project-detail-view";
const Demo = () => {
// Mock data to showcase the component
const projectData: ProjectDetailViewProps = {
breadcrumbs: [
{ label: "Client Projects", href: "#" },
{ label: "Website Redesign for Client X", href: "#" },
],
title: "Website Redesign for Client X",
status: "In Progress",
assignees: [
{ name: "Achmad Hakim", avatarUrl: "https://i.pravatar.cc/150?u=achmad" },
{ name: "Samantha Emanuel", avatarUrl: "https://i.pravatar.cc/150?u=samantha" },
],
dateRange: {
start: "June 3, 2025",
end: "June 28, 2025",
},
tags: [
{ label: "Design", variant: "destructive" },
{ label: "Client Work", variant: "secondary" },
],
description:
"This task focuses on preparing a high-impact visual presentation that showcases the new website design concept for Client X. The goal is to clearly communicate the updated UI direction, design system, and user flow improvements to the client in a concise and engaging format.",
attachments: [
{ name: "ClientX_UI_Redesign.pdf", size: "4.8 Mb", type: "pdf" },
{ name: "Homepage_Mockup.fig", size: "12.4 Mb", type: "figma" },
],
subTasks: [
{
id: 1,
task: "Schedule initial client meeting",
category: "Discovery",
status: "Completed",
dueDate: "June 3, 2025",
},
{
id: 2,
task: "Gather business goals and user needs",
category: "Discovery",
status: "Completed",
dueDate: "June 4, 2025",
},
{
id: 3,
task: "Review current website performance",
category: "Discovery",
status: "In Progress",
dueDate: "June 5, 2025",
},
],
};
return (
<div className="flex items-center justify-center p-4 sm:p-8 bg-background">
<ProjectDetailView {...projectData} />
</div>
);
};
export default Demo;