Components
Loading preview...
Proposal Tracker Card This component provides a clear, visual timeline for tracking the status of proposals or applications. It's designed to be flexible, allowing you to pass in step data dynamically. Animations are included using framer-motion to enhance the user experience.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/tracker-card-1import { ProposalTrackerCard } from "@/components/ui/tracker-card-1";
import { CheckCircle2, Circle, FileText, Pencil } from "lucide-react";
const Demo = () => {
// Sample data for the proposal tracker
const proposalData = {
imageUrl: "https://images.unsplash.com/photo-1540518614846-7eded433c457?q=80&w=2057&auto=format&fit=crop", // Replace with your image source
status: "Awaiting Documents",
title: "Greenwich Village",
price: 3200.00,
buttonText: "Manage Proposal",
steps: [
{
title: "Credit Assessment Approved",
description: "View Details",
date: "10th January, 10:40",
status: "completed",
icon: CheckCircle2,
},
{
title: "Proposal Sent",
description: "View proposal",
date: "12th January, 13:24",
status: "completed",
icon: CheckCircle2,
},
{
title: "Manage Documents",
description: "View & Send Documents",
status: "active",
icon: FileText,
},
{
title: "Contracts",
description: "See Contract Template",
status: "pending",
icon: Pencil,
},
],
};
return (
<div className="flex h-full w-full items-center justify-center bg-background p-4">
<ProposalTrackerCard
imageUrl={proposalData.imageUrl}
status={proposalData.status}
title={proposalData.title}
price={proposalData.price}
steps={proposalData.steps}
buttonText={proposalData.buttonText}
/>
</div>
);
};
export default Demo;