Emoji Picker

"use client";

import { EmojiReactions } from "@/components/premium/emoji-picker";

const PORTRAIT =
  "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&crop=faces&fm=webp&q=80&w=96&h=96";

export function EmojiReactionsPreview() {
  return (
    <div className="flex w-full max-w-md gap-3">
      {/* biome-ignore lint/performance/noImgElement: small remote portrait in a sample message. */}
      <img
        src={PORTRAIT}
        alt=""
        className="size-9 shrink-0 rounded-full object-cover"
      />
      <div className="min-w-0">
        <p className="text-sm">
          <span className="font-medium">Mira Okafor</span>{" "}
          <span className="text-xs text-muted-foreground">10:42</span>
        </p>
        <p className="mt-1 text-sm text-pretty">
          The new onboarding flow is live. Sign-ups are up 18% since this
          morning.
        </p>
        <EmojiReactions
          className="mt-3"
          defaultReactions={[
            { emoji: "🎉", count: 6, mine: false },
            { emoji: "🚀", count: 3, mine: true },
            { emoji: "👀", count: 1, mine: false },
          ]}
        />
      </div>
    </div>
  );
}

"use client";

import { useState } from "react";
import { EmojiPicker } from "@/components/premium/emoji-picker";

export function EmojiPickerPanelPreview() {
  const [picked, setPicked] = useState<string[]>([]);

  return (
    <div className="flex flex-col items-center gap-4">
      <div className="overflow-hidden rounded-3xl border border-border bg-background">
        <EmojiPicker
          autoFocus={false}
          onSelect={(char) =>
            setPicked((current) => [...current, char].slice(-12))
          }
        />
      </div>
      <p aria-live="polite" className="h-7 text-xl tracking-wide">
        {picked.join("") || (
          <span className="text-sm text-muted-foreground">
            Pick a few emoji
          </span>
        )}
      </p>
    </div>
  );
}