A transaction feed grouped by day with sticky headers and rows that expand in place, so the reader keeps their position.
Loading preview...
import { Gamepad2, Gift, Music, Zap } from "lucide-react";
import { ActivityFeed } from "@/components/ui/klyv-activity-feed";
import { Card } from "@/components/ui/klyv-activity-feed-utils/components-Card-Card";
import { type ActivityEntry } from "@/components/ui/klyv-activity-feed";
const SourceExample = () => (
<Card title="Activity" className="h-[420px] w-full max-w-[520px]">
<div className="no-scrollbar mt-2 min-h-0 flex-1 overflow-y-auto">
<ActivityFeed entries={FEED} label="Recent activity" showDailyTotals />
</div>
</Card>
);
const FEED: ActivityEntry[] = [
{
id: '1',
date: isoDaysAgo(0),
title: 'Sarah Rosewood',
subtitle: 'Incoming transfer',
amount: 125,
details: [
{ term: 'Reference', description: 'Rent share' },
{ term: 'Arrived', description: 'Today, 4:28 PM' },
{ term: 'Account', description: '**** 5199' },
],
},
{ id: '2', date: isoDaysAgo(0), title: 'GumZone', subtitle: 'Monthly plan', amount: -35, icon: Gamepad2 },
{
id: '3',
date: isoDaysAgo(1),
title: 'Apple Music',
subtitle: 'Monthly plan',
amount: -4.99,
icon: Music,
details: [
{ term: 'Next payment', description: '14 November' },
{ term: 'Since', description: 'March 2024' },
],
},
{ id: '4', date: isoDaysAgo(1), title: 'Jack Hammer', subtitle: 'Outgoing transfer', amount: -24.05 },
{ id: '5', date: isoDaysAgo(3), title: 'Electric Co.', subtitle: 'Utility bill', amount: -63.69, icon: Zap },
{
id: '6',
date: isoDaysAgo(3),
title: 'Cashback',
subtitle: 'Partner reward',
amount: 42.1,
icon: Gift,
details: [{ term: 'Partner', description: 'Mcdonalds' }, { term: 'Rate', description: '10%' }],
},
]
function isoDaysAgo(days: number): string {
const date = new Date()
date.setDate(date.getDate() - days)
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}
export default function Demo(){return <div data-component-demo className="flex min-h-screen w-full items-center justify-center bg-canvas p-8 text-ink"><div className="w-full max-w-[620px]"><SourceExample /></div></div>}