Components
Loading preview...
Activity List The ActivityList component is designed to display a feed of recent transactions or activities. It features a clean, card-based layout with animated list items that gracefully fade in. The component is fully responsive and uses shadcn theme variables for seamless integration into light and dark modes.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/list// demo.tsx
import { ActivityList, type ActivityItem } from '@/components/ui/list'; // Adjust path as needed
// --- MOCK DATA ---
const activities: ActivityItem[] = [
{
id: 1,
name: 'Samantha',
description: 'Ngopi Sore',
avatarUrl: 'https://i.pravatar.cc/150?img=1',
amount: 35000,
date: 'Sep 25, 2024',
currency: 'IDR',
},
{
id: 2,
name: 'Karen William',
description: 'Makan Bareng',
avatarUrl: 'https://i.pravatar.cc/150?img=2',
amount: 125800,
date: 'Sep 25, 2024',
currency: 'IDR',
},
{
id: 3,
name: 'Angela Smith',
description: 'Tiket Kereta',
avatarUrl: 'https://i.pravatar.cc/150?img=3',
amount: -67500,
date: 'Sep 25, 2024',
currency: 'IDR',
},
];
// --- DEMO COMPONENT ---
const ActivityListDemo = () => {
return (
<div className="flex h-full w-full items-center justify-center bg-background p-4">
<ActivityList title="Recent Activity" items={activities} />
</div>
);
};
export default ActivityListDemo;