Project Ticket Card This component displays detailed information about a project task or ticket. It's structured using shadcn's Card and Tabs components and is animated with framer-motion for a polished feel.
import * as React from "react";
import { ProjectTicketCard } from "@/components/ui/project-ticket-card"; // Adjust the import path as needed
// Mock data for the demo
const mockProjectManager = {
name: "Miguel Lorenzo",
avatarUrl: "https://cdn.21st.dev/assets/mirror/ff/ff4b0fe2f7d11aff0d68f760e5fdcfeebf8b884c024ae24c9a6cf1d2edf76f49.jpg",
};
const mockAssignedUsers = [
{
name: "John Doe",
avatarUrl: "https://cdn.21st.dev/assets/mirror/38/388de849a8a0cac613d63c4a11e61f3b2f853997ac9b5d28e4268d41ece147a5.jpg",
},
{
name: "Jane Smith",
avatarUrl: "https://cdn.21st.dev/assets/mirror/22/2227f27555cfdda5ca407e3706a473660e40a64d3e026a961f24197066e55aa2.jpg",
},
{
name: "Sam Wilson",
avatarUrl: "https://cdn.21st.dev/assets/mirror/4f/4fb45af36b546e069b72527fdf4d904855a2b11b301fa738c8bc4d235595c4df.jpg",
},
];
const mockComments = [
{
id: 1,
user: {
name: "Insan Kamil",
role: "Design Lead",
avatarUrl: "https://cdn.21st.dev/assets/mirror/a3/a37358a09c532474e3246a94e5e5104b1b6b6907f83b44259509f8c776506120.jpg",
},
timestamp: "Friday 3:12 PM",
message: "Hey guys, I updated the document ya.",
},
{
id: 2,
user: {
name: "Miguel Lorenzo",
role: "Project Manager",
avatarUrl: "https://cdn.21st.dev/assets/mirror/ff/ff4b0fe2f7d11aff0d68f760e5fdcfeebf8b884c024ae24c9a6cf1d2edf76f49.jpg",
},
timestamp: "Friday 3:15 PM",
message: "Thanks, Insan! Reviewing it now.",
},
];
const ProjectTicketDemo = () => {
return (
<div className="flex min-h-[600px] w-full items-center justify-center bg-background p-4 md:p-10">
<ProjectTicketCard
projectName="Revamp Payment"
status="In Progress"
projectManager={mockProjectManager}
assignedTo={mockAssignedUsers}
timeline={{ startDate: "12/12/2024", endDate: "04/01/2025" }}
comments={mockComments}
isDraft={true}
/>
</div>
);
};
export default ProjectTicketDemo;