Activity Feed

1import { type VariantProps, cva } from 'class-variance-authority'
2import { type ReactNode } from 'react'
3 
4import { cn } from '@/lib/utils'
5 
6const itemVariants = cva('flex items-start gap-4', {
7  variants: {
8    align: {
9      center: 'items-center',
10      start: 'items-start',
11    },
12    size: {
13      default: 'gap-4',
14      sm: 'gap-3',
15    },
16  },
17  defaultVariants: {
18    align: 'start',
19    size: 'default',
20  },
21})
22 
23const contentVariants = cva('flex-1 text-sm', {
24  variants: {
25    layout: {
26      inline: 'space-y-0',
27      stacked: 'space-y-1',
28    },
29  },
30  defaultVariants: {
31    layout: 'stacked',
32  },
33})
34 
35const indicatorVariants = cva('inline-flex items-center justify-center rounded-full', {
36  variants: {
37    status: {
38      error: '',
39      info: '',
40      progress: '',
41      success: '',
42    },
43    variant: {
44      dot: 'size-2',
45      ring: 'size-5 p-1.5',
46    },
47  },
48  compoundVariants: [
49    {
50      status: 'success',
51      variant: 'dot',
52      class: 'bg-green-600',
53    },
54    {
55      status: 'progress',
56      variant: 'dot',
57      class: 'bg-blue-600',
58    },
59    {
60      status: 'error',
61      variant: 'dot',
62      class: 'bg-red-600',
63    },
64    {
65      status: 'info',
66      variant: 'dot',
67      class: 'bg-purple-600',
68    },
69    {
70      status: 'success',
71      variant: 'ring',
72      class: 'bg-green-200 text-green-600',
73    },
74    {
75      status: 'progress',
76      variant: 'ring',
77      class: 'bg-blue-200 text-blue-600',
78    },
79    {
80      status: 'error',
81      variant: 'ring',
82      class: 'bg-red-200 text-red-600',
83    },
84    {
85      status: 'info',
86      variant: 'ring',
87      class: 'bg-purple-200 text-purple-600',
88    },
89  ],
90  defaultVariants: {
91    status: 'info',
92    variant: 'dot',
93  },
94})
95 
96const timelinePositions = {
97  center: 'left-20.5',
98  start: 'left-5',
99} as const
100 
101type ActivityFeedItemProps = {
102  align?: VariantProps<typeof itemVariants>['align']
103  children: ReactNode
104  className?: string
105  size?: VariantProps<typeof itemVariants>['size']
106}
107 
108type ActivityFeedContentProps = {
109  children: ReactNode
110  className?: string
111  layout?: VariantProps<typeof contentVariants>['layout']
112}
113 
114interface ActivityFeedIndicatorProps extends VariantProps<typeof indicatorVariants> {
115  className?: string
116}
117 
118type ActivityFeedTimelineProps = {
119  children: ReactNode
120  className?: string
121  lineClassName?: string
122  linePosition?: keyof typeof timelinePositions
123}
124 
125function ActivityFeedItem({
126  align = 'start',
127  children,
128  className = '',
129// … truncated