Components
Loading preview...
Payment Summary Card A visually appealing card to display financial summaries, featuring a main metric, a clickable sub-section, and an avatar stack.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/card-3import React from 'react';
import { PaymentSummaryCard, Avatar } from '@/components/ui/card-3';
// Sample data for the demo
const sampleAvatars: Avatar[] = [
{ src: 'https://i.pravatar.cc/150?img=1', alt: 'User 1' },
{ src: 'https://i.pravatar.cc/150?img=2', alt: 'User 2' },
{ src: 'https://i.pravatar.cc/150?img=3', alt: 'User 3' },
];
/**
* A demo component to showcase the PaymentSummaryCard.
*/
const PaymentSummaryCardDemo = () => {
const handleCardClick = () => {
alert('Mandatory payments card clicked!');
};
return (
<div className="flex h-screen w-full items-center justify-center bg-background p-4">
<PaymentSummaryCard
title="Payment Templates"
amount={486.32}
currency="$"
subCardTitle="Mandatory payments"
subCardSubtitle="Essential dues"
avatars={sampleAvatars}
moreCount={8}
onSubCardClick={handleCardClick}
/>
</div>
);
};
export default PaymentSummaryCardDemo;