Components
Loading preview...
Trip Details Card A reusable card component to display travel or booking information, featuring a header, details section, and a configurable action toolbar. It's designed with framer-motion for a subtle entry animation.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/trip-details-cardimport {
TripDetailsCard,
type TripAction,
} from "@/components/ui/trip-details-card";
import {
XCircle,
RefreshCcw,
History,
FileText,
Download
} from "lucide-react";
// Demo component to showcase the TripDetailsCard
export default function TripDetailsCardDemo() {
// Define sample actions for the card's toolbar
const tripActions: TripAction[] = [
{
label: "Cancel flights",
icon: XCircle,
variant: "ghost",
onClick: () => alert("Cancel flights clicked!"),
// Custom styling for destructive action
className: "text-red-500 hover:bg-red-500/10 hover:text-red-600 dark:hover:bg-red-500/10 dark:hover:text-red-500"
},
{
label: "Calculate refund",
icon: RefreshCcw,
variant: "ghost",
onClick: () => alert("Calculate refund clicked!"),
},
{
label: "Reschedule flights",
icon: History,
variant: "ghost",
onClick: () => alert("Reschedule flights clicked!"),
},
{
label: "Download invoice",
icon: FileText,
variant: "ghost",
onClick: () => alert("Download invoice clicked!"),
},
{
label: "Download ticket",
icon: Download,
variant: "ghost",
onClick: () => alert("Download ticket clicked!"),
},
];
return (
<div className="w-full min-h-screen bg-background flex items-center justify-center p-4">
<TripDetailsCard
origin="Chandigarh"
destination="Lucknow"
travelerName="Kavi"
status="upcoming"
tripId="250793635642"
travelDate={new Date("2025-10-20T00:00:00Z")}
actions={tripActions}
/>
</div>
);
}