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.
// 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://cdn.21st.dev/assets/mirror/f0/f02fed36023656a5b5df6f247c83c96c53bfa9db5b98085cdee93ffc938a5f37.jpg',
amount: 35000,
date: 'Sep 25, 2024',
currency: 'IDR',
},
{
id: 2,
name: 'Karen William',
description: 'Makan Bareng',
avatarUrl: 'https://cdn.21st.dev/assets/mirror/5b/5b5b2f3487692d40f629010ea6448d150907f780d8c262c4ca194b7386115c2d.jpg',
amount: 125800,
date: 'Sep 25, 2024',
currency: 'IDR',
},
{
id: 3,
name: 'Angela Smith',
description: 'Tiket Kereta',
avatarUrl: 'https://cdn.21st.dev/assets/mirror/10/10e2bfa5446e5c116e269b649b5f5e0106d96643f0a903048f3a056e40c35cd8.jpg',
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;