Timelines

1'use client';
2import { type ReactNode } from 'react';
3import Link from 'next/link';
4import { Bell, Star, Users, DollarSign, ShoppingCart, Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function TimelineSection() {
29  const events = [
30    { icon: ShoppingCart, color: 'bg-brand-50 text-brand-500 dark:bg-brand-500/15', title: 'New order placed', desc: 'Order #7892 by Sarah Johnson', time: '2 min ago' },
31    { icon: Users, color: 'bg-success-50 text-success-500 dark:bg-success-500/15', title: 'New user registered', desc: 'mike.peters@example.com', time: '15 min ago' },
32    { icon: DollarSign, color: 'bg-warning-50 text-warning-500 dark:bg-warning-500/15', title: 'Payment received', desc: '$12,500 from Acme Corp', time: '1 hr ago' },
33    { icon: Bell, color: 'bg-error-50 text-error-500 dark:bg-error-500/15', title: 'Server alert', desc: 'CPU usage above 85%', time: '2 hrs ago' },
34    { icon: Star, color: 'bg-blue-light-50 text-blue-light-500 dark:bg-blue-light-500/15', title: 'New review', desc: '5-star review from Emily Chen', time: '3 hrs ago' },
35  ];
36
37  return (
38    <SectionCard title="Timeline" sourceSlug="/ui/source/ui-elements/timelines">
39      <div className="relative pl-8">
40        {/* Connecting line */}
41        <div className="absolute left-[15px] top-2 bottom-2 w-px bg-gray-200 dark:bg-white/10" />
42
43        <div className="space-y-6">
44          {events.map((e, i) => {
45            const Icon = e.icon;
46            return (
47              <div key={i} className="relative flex gap-4">
48                <div className={`absolute -left-8 flex size-7 items-center justify-center rounded-full ${e.color}`}>
49                  <Icon className="size-3.5" />
50                </div>
51                <div className="flex-1 min-w-0 pb-1">
52                  <p className="text-sm font-semibold text-gray-800 dark:text-white/90">{e.title}</p>
53                  <p className="mt-0.5 text-sm text-gray-500 dark:text-gray-400">{e.desc}</p>
54                  <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">{e.time}</p>
55                </div>
56              </div>
57            );
58          })}
59        </div>
60      </div>
61    </SectionCard>
62  );
63}