Post Engagement

1import * as React from 'react';
2import {
3  Heart,
4  MessageSquare,
5  Repeat2,
6  BarChart2,
7  LucideIcon,
8  Gem,
9} from 'lucide-react';
10import { cn } from '@/lib/utils/deso';
11import NumberFlow, { continuous, type Format } from '@number-flow/react';
12 
13type EngagementVariant =
14  | 'like'
15  | 'repost'
16  | 'comment'
17  | 'diamond'
18  | 'view'
19 
20interface PostEngagementProps {
21  variant: EngagementVariant;
22  count: number;
23  active?: boolean;
24  onClick?: () => void;
25  className?: string;
26  value?: string;
27  abbreviate?: boolean;
28  decimals?: number;
29  size?: 'sm' | 'md' | 'lg';
30  layout?: 'row' | 'column';
31}
32 
33const variantConfig: {
34    [key in EngagementVariant]: {
35    Icon: LucideIcon;
36    activeColor?: string;
37    fillClass?: string;
38    hoverBgClass?: string;
39  };
40} = {
41  comment: {
42    Icon: MessageSquare,
43    activeColor: 'text-blue-500',
44    hoverBgClass: 'hover:before:bg-blue-500/10',
45  },
46  like: {
47    Icon: Heart,
48    activeColor: 'text-pink-500',
49    fillClass: 'fill-pink-500',
50    hoverBgClass: 'hover:before:bg-pink-500/10',
51  },
52  repost: {
53    Icon: Repeat2,
54    activeColor: 'text-green-500',
55    hoverBgClass: 'hover:before:bg-green-500/10',
56  },
57  diamond: {
58    Icon: Gem,
59    activeColor: 'text-blue-400',
60    hoverBgClass: 'hover:before:bg-blue-400/10',
61  },
62  view: { Icon: BarChart2 },
63};
64 
65export function PostEngagement({
66  variant,
67  count,
68  active = false,
69  onClick,
70  className,
71  value,
72  abbreviate = true,
73  decimals = 1,
74  size = 'sm',
75  layout = 'row',
76}: PostEngagementProps) {
77  const config = variantConfig[variant];
78 
79  const numberFormat: Format = {
80    notation: abbreviate ? 'compact' : 'standard',
81    compactDisplay: 'short',
82    maximumFractionDigits: decimals,
83  };
84 
85  return (
86    <button
87      onClick={onClick}
88      disabled={!onClick && variant !== 'view'}
89      className={cn(
90        'group cursor-pointer relative flex items-center text-muted-foreground transition-colors',
91        layout === 'row' ? 'gap-1.5' : 'flex-col gap-1',
92        size === 'sm' && 'text-xs',
93        size === 'md' && 'text-sm',
94        size === 'lg' && 'text-base',
95        'disabled:pointer-events-none disabled:opacity-50',
96        onClick && 'hover:text-foreground',
97        { [config.activeColor!]: active && config.activeColor },
98        className
99      )}
100    >
101      <div
102        className={cn(
103          "relative rounded-full before:content-[''] before:absolute before:-inset-1.5 before:rounded-full before:transition-colors",
104          config.hoverBgClass
105// … truncated