Onboarding Activity Feed

1import { cn } from '@/lib/utils';
2 
3const steps = [
4  {
5    id: 1,
6    type: 'created',
7    description: 'Created project "Brand Refresh"',
8    user: { name: 'Sarah K.', initial: 'S', bgColor: 'bg-violet-500' },
9    activityTime: '3d ago',
10  },
11  {
12    id: 2,
13    type: 'created',
14    description: 'Uploaded 12 design assets',
15    user: { name: 'Marcus L.', initial: 'M', bgColor: 'bg-orange-500' },
16    activityTime: '2d ago',
17  },
18  {
19    id: 3,
20    type: 'created',
21    description: 'Shared prototype with stakeholders',
22    user: { name: 'Sarah K.', initial: 'S', bgColor: 'bg-emerald-500' },
23    activityTime: '2h ago',
24  },
25  {
26    id: 4,
27    type: 'created',
28    description: 'Left feedback on homepage layout',
29    user: { name: 'Jamie R.', initial: 'J', bgColor: 'bg-fuchsia-500' },
30    activityTime: '5min ago',
31  },
32  {
33    id: 5,
34    type: 'in progress',
35    description: 'Scheduled design review meeting',
36    user: { name: 'Team Ops', initial: 'T', bgColor: 'bg-blue-500' },
37    activityTime: 'today 2:30pm',
38  },
39];
40 
41export function Onboarding05() {
42  return (
43    <div className="flex min-h-dvh items-center justify-center bg-background p-4">
44      <div className="sm:max-w-lg md:mx-auto">
45        <h3 className="font-medium text-foreground">Project activity</h3>
46        <p className="mt-1 text-muted-foreground text-sm leading-6">
47          Recent updates from your team
48        </p>
49        <ul className="mt-6 space-y-6 pb-2">
50          {steps.map((step, stepIdx) => (
51            <li className="relative flex gap-x-3" key={step.id}>
52              <div
53                className={cn(
54                  'absolute top-0 left-0 flex w-6 justify-center',
55                  stepIdx === steps.length - 1 ? 'h-6' : '-bottom-6'
56                )}
57              >
58                <span aria-hidden className="w-px bg-border" />
59              </div>
60              <div className="flex items-start space-x-2">
61                <div className="flex items-center space-x-2">
62                  <div className="relative flex size-6 flex-none items-center justify-center bg-background">
63                    {step.type === 'created' ? (
64                      <div className="size-3 rounded-full border border-gray-300 bg-muted/50 ring-4 ring-background" />
65                    ) : (
66                      <div className="size-3 rounded-full border border-gray-300 bg-background ring-4 ring-background" />
67                    )}
68                  </div>
69                  <span
70// … truncated