Components
Loading preview...
Availability Slot Card This component displays a card with a title and a grid of selectable date slots. It is fully responsive and uses framer-motion for smooth animations.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/card-13import * as React from "react";
import { AvailabilityCard, Slot } from "@/components/ui/card-13";
// Sample data for the demo
const sampleSlots: Slot[] = [
{ id: 1, day: 12, month: "June" },
{ id: 2, day: 18, month: "June" },
{ id: 3, day: 20, month: "June" },
{ id: 4, day: 2, month: "July" },
{ id: 5, day: 10, month: "July" },
{ id: 6, day: 15, month: "July" },
];
/**
* A demo component to showcase the AvailabilityCard.
*/
export default function AvailabilityCardDemo() {
// State to manage the currently selected slot
const [selectedSlot, setSelectedSlot] = React.useState<string | number | null>(sampleSlots[0].id);
return (
<div className="flex h-screen w-full items-center justify-center bg-background p-4">
<AvailabilityCard
slots={sampleSlots}
selectedSlotId={selectedSlot}
onSlotSelect={setSelectedSlot}
/>
</div>
);
}