Components
Loading preview...
Weekly Expense Card This component provides a visually engaging summary of expenses. It features an animated bubble chart powered by framer-motion and uses shadcn/ui components and theme variables for a consistent look and feel.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/card-20import {
WeeklyExpenseCard,
ExpenseItem,
} from "@/components/ui/card-20";
// Sample data for the expense card demo
const expenseData: ExpenseItem[] = [
{
category: "Grocery",
percentage: 48,
amount: 758.2,
color: "221.2 83.2% 53.3%", // Blue
},
{
category: "Food & Drink",
percentage: 32,
amount: 512.6,
color: "142.1 76.2% 36.3%", // Green
},
{
category: "Shopping",
percentage: 13,
amount: 205.45,
color: "346.8 77.2% 49.8%", // Pink
},
{
category: "Transportation",
percentage: 7,
amount: 110.8,
color: "35.8 91.7% 54.5%", // Orange
},
];
const WeeklyExpenseCardDemo = () => {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-10">
<WeeklyExpenseCard
title="Weekly Expense"
dateRange="From 1 - 6 Apr, 2024"
data={expenseData}
onButtonClick={() => alert("View Report Clicked!")}
/>
</div>
);
};
export default WeeklyExpenseCardDemo;