Components
Loading preview...
Quick Links Card A card component that displays a title, subtitle, and a set of actionable icon buttons for quick access to common tasks.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/card-2import {
ArrowDownLeftFromSquare,
ArrowUpRightFromSquare,
ClipboardList,
} from 'lucide-react';
import { QuickLinksCard, ActionItem } from '@/components/ui/card-2';
/**
* A demo component to showcase the QuickLinksCard.
*/
export default function QuickLinksCardDemo() {
// Define the actions to be passed to the card component
const quickLinks: ActionItem[] = [
{
icon: <ClipboardList className="h-full w-full" />,
label: 'Request',
onClick: () => alert('Request action triggered!'),
},
{
icon: <ArrowUpRightFromSquare className="h-full w-full" />,
label: 'Send',
onClick: () => alert('Send action triggered!'),
},
{
icon: <ArrowDownLeftFromSquare className="h-full w-full" />,
label: 'Receive',
onClick: () => alert('Receive action triggered!'),
},
];
return (
<div className="flex h-full w-full items-center justify-center bg-background p-4">
<QuickLinksCard
title="Quick Links"
subtitle="Essential dues"
actions={quickLinks}
/>
</div>
);
}