"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface ReactionOption {
  emoji: string;
  label: string;
  count?: number;
}

export interface ReactionPickerProps {
  reactions: ReactionOption[];
  allReactions?: ReactionOption[];
  recentReactions?: ReactionOption[];
  maxRecent?: number;
  showCounts?: boolean;
  onSelect?: (reaction: ReactionOption) => void;
  onRecentChange?: (recent: ReactionOption[]) => void;
  className?: string;
}

export function ReactionPicker({
  reactions,
  allReactions,
  recentReactions,
  maxRecent = 6,
  showCounts = true,
  onSelect,
  onRecentChange,
  className,
}: ReactionPickerProps) {
  const [open, setOpen] = React.useState(false);
  const [recent, setRecent] = React.useState<ReactionOption[]>(
    recentReactions ?? reactions.slice(0, maxRecent)
  );

  React.useEffect(() => {
    if (recentReactions) {
      setRecent(recentReactions);
    }
  }, [recentReactions]);

  const options = allReactions ?? reactions;

  const handleSelect = React.useCallback(
    (reaction: ReactionOption) => {
      onSelect?.(reaction);
      setRecent((prev) => {
        const next = [reaction, ...prev.filter((item) => item.emoji !== reaction.emoji)];
        const trimmed = next.slice(0, maxRecent);
        onRecentChange?.(trimmed);
        return trimmed;
      });
    },
    [maxRecent, onRecentChange, onSelect]
  );

  return (
    <div className={cn("relative w-full max-w-xl", className)}>
      <div className="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-card p-3">
        {reactions.map((reaction) => (
          <button
            key={`${reaction.emoji}-${reaction.label}`}
            type="button"
            onClick={() => handleSelect(reaction)}
            className="flex items-center gap-2 rounded-full border border-border bg-muted px-3 py-1 text-sm text-foreground transition"
          >
            <span className="text-base" aria-hidden="true">
              {reaction.emoji}
            </span>
            <span className="text-xs font-semibold">{reaction.label}</span>
            {showCounts && typeof reaction.count === "number" && (
              <span className="text-xs text-muted-foreground">
                {reaction.count}
              </span>
            )}
          </button>
        ))}
        <button
          type="button"
          onClick={() => setOpen((prev) => !prev)}
          aria-expanded={open}
          className="flex items-center gap-2 rounded-full border border-border bg-muted px-3 py-1 text-xs font-semibold text-muted-foreground transition"
        >
          <ReactionGridIcon className="h-4 w-4" />
          {open ? "Close" : "More"}
        </button>
      </div>

      {open ? (
        <div className="absolute left-0 top-full z-10 mt-3 w-full rounded-xl border border-border bg-card p-4">
          <div className="space-y-4">
            <div>
              <p className="text-xs font-semibold text-muted-foreground">
                Recently used
              </p>
              {recent.length > 0 ? (
                <div className="mt-2 flex flex-wrap gap-2">
                  {recent.map((reaction) => (
                    <button
                      key={`recent-${reaction.emoji}-${reaction.label}`}
                      type="button"
                      onClick={() => handleSelect(reaction)}
                      className="rounded-full border border-border bg-muted px-3 py-1 text-sm text-foreground"
                    >
                      <span className="text-base" aria-hidden="true">
                        {reaction.emoji}
                      </span>
                    </button>
                  ))}
                </div>
              ) : (
                <p className="mt-2 text-xs text-muted-foreground">
                  Choose a reaction to start building your list.
                </p>
              )}
            </div>

            <div>
              <p className="text-xs font-semibold text-muted-foreground">
                All reactions
              </p>
              <div className="mt-2 grid grid-cols-6 gap-2">
                {options.map((reaction) => (
                  <button
                    key={`all-${reaction.emoji}-${reaction.label}`}
                    type="button"
                    onClick={() => handleSelect(reaction)}
                    className="flex items-center justify-center rounded-lg border border-border bg-muted px-2 py-2 text-lg"
                  >
                    <span aria-hidden="true">{reaction.emoji}</span>
                    <span className="sr-only">{reaction.label}</span>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}

function ReactionGridIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 20 20"
      aria-hidden="true"
      className={className}
      fill="currentColor"
    >
      <rect x="3" y="3" width="4" height="4" rx="1" />
      <rect x="13" y="3" width="4" height="4" rx="1" />
      <rect x="3" y="13" width="4" height="4" rx="1" />
      <rect x="13" y="13" width="4" height="4" rx="1" />
    </svg>
  );
}
Reaction Picker

Dependencies

Files

Installation
