.tsx

<ContextMenu>
              <ContextMenuTrigger>
                <Card key={discussion.id} className="border-0 sm:border">
                  <CardHeader>
                    {(discussion.author ?? false) && (
                      <Profile
                        username={discussion.author!.username}
                        displayName={discussion.author!.display_name}
                        avatarUrl={discussion.author!.avatar_url ?? undefined}
                        isBanned={false}
                      />
                    )}
                  </CardHeader>
                  <CardContent>
                    <h1 className="mb-2 scroll-m-20 pb-2 text-2xl md:text-3xl font-medium tracking-tight first:mt-0 line-clamp-2">
                      {discussion.title}
                    </h1>
                    <p className="text-md leading-loose text-muted-foreground whitespace-pre-line line-clamp-6 md:line-clamp-4">
                      {discussion.content}
                    </p>
                  </CardContent>
                  <CardFooter>
                    {reactions[discussion.id] &&
                      Object.keys(reactions[discussion.id].countersWithDraft).length > 0 &&
                      Object.entries(reactions[discussion.id].countersWithDraft).map(
                        ([reaction, counter]) => (
                          <Button
                            key={reaction}
                            variant={
                              reactions[discussion.id].draft.includes(reaction)
                                ? 'default'
                                : 'outline'
                            }
                            className={cn('rounded-full pr-4', isEmoji(reaction) && 'pl-2')}
                            onClick={() =>
                              onReactionToggled({
                                discussionId: discussion.id,
                                toggledReaction: reaction,
                              })
                            }
                          >
                            <span className={cn('font-medium', isEmoji(reaction) && 'text-xl')}>
                              {reaction}
                            </span>
                            {counter}
                          </Button>
                        ),
                      )}

                    <Link to={routes.discussion} params={{discussionId: discussion.id}}>
                      <Button variant="outline">Читать продолжение</Button>
                    </Link>
                  </CardFooter>
                </Card>
              </ContextMenuTrigger>
              <ContextMenuContent className="bg-transparent border-none p-0">
                <motion.div>
                  <Card className="rounded-xl bg-background/50 backdrop-blur-md p-1">
                    <motion.div className="flex max-w-[15rem] flex-wrap">
                      {availableReactions
                        .concat('убей себя')
                        .filter((reaction) => !reactions[discussion.id]?.draft.includes(reaction))
                        .map((reaction) => (
                          <Button
                            key={reaction}
                            variant="ghost"
                            size={isEmoji(reaction) ? 'icon' : 'default'}
                            className={cn(
                              'text-xl p-6 hover:bg-primary/10 transition-none [&:active>p]:!scale-50',
                              isEmoji(reaction) &&
                                'hover:bg-transparent  [&:hover>p]:scale-150 transition-transform duration-75',
                            )}
                            onClick={() =>
                              onReactionToggled({
                                discussionId: discussion.id,
                                toggledReaction: reaction,
                              })
                            }
                          >
                            <p className="transition-transform duration-75 ease-out">{reaction}</p>
                          </Button>
                        ))}
                    </motion.div>
                  </Card>
                </motion.div>
              </ContextMenuContent>
            </ContextMenu>