Post Reactions

1'use client';
2 
3import React from 'react';
4import { Button } from '../ui/button';
5import { cn } from '@/lib/utils/deso';
6import { SmilePlus } from 'lucide-react';
7import {
8  Popover,
9  PopoverContent,
10  PopoverTrigger,
11} from '@/components/ui/popover';
12import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
13 
14export interface Reaction {
15  emoji: string;
16  count: number;
17  userHasReacted: boolean;
18}
19 
20export const EMOJI_MAP: Record<string, string> = {
21  '👍': 'Thumbs Up',
22  '👎': 'Thumbs Down',
23  '😂': 'Tears of Joy',
24  '😢': 'Loudly Crying Face',
25  '🔥': 'Fire',
26  '😈': 'Smiling Face with Horns',
27  '🤯': 'Mind Blown',
28};
29 
30export interface PostReactionsProps {
31  reactions: Reaction[];
32  onReactionClick: (emoji: string) => void;
33  className?: string;
34}
35 
36export function PostReactionList({ reactions, onReactionClick, className }: PostReactionsProps) {
37  return (
38    <div className={cn(
39      className,
40      reactions.length > 0 && 'flex items-center gap-2 flex-wrap'
41    )}>
42      {reactions.map(
43        ({ emoji, count, userHasReacted }) =>
44          count > 0 && (
45            <Button
46              key={emoji}
47              variant={userHasReacted ? 'secondary' : 'outline'}
48              size="sm"
49              onClick={() => onReactionClick(emoji)}
50              className="rounded-full px-3 h-8"
51            >
52              <span className="mr-2 text-md">{emoji}</span>
53              <span className="text-xs font-semibold">{count}</span>
54            </Button>
55          )
56      )}
57    </div>
58  );
59}
60 
61export function PostReactionTrigger({ onReactionClick, className }: { onReactionClick: (emoji: string) => void; className?: string }) {
62  return (
63    <Popover>
64      <Tooltip>
65        <TooltipTrigger asChild>
66          <PopoverTrigger asChild>
67            <Button variant="ghost" size="icon" className={cn('rounded-full h-8 w-8 border border-border', className)}>
68              <SmilePlus className="h-4 w-4 text-muted-foreground" />
69            </Button>
70          </PopoverTrigger>
71        </TooltipTrigger>
72        <TooltipContent>
73          <p>Add a reaction</p>
74        </TooltipContent>
75      </Tooltip>
76      <PopoverContent className="p-2 w-auto border border-border">
77        <div className="flex gap-2">
78          {Object.keys(EMOJI_MAP).map((emoji) => (
79            <Button
80              key={emoji}
81              variant="ghost"
82              size="icon"
83              onClick={() => onReactionClick(emoji)}
84// … truncated