A row of toggleable emoji reactions with live counts and a small particle burst animation when one is picked.
"use client";
import ReactionBar from "@/components/ui/reaction-bar";
import Surface from "@/components/ui/reaction-bar-utils/surface";
import Text from "@/components/ui/reaction-bar-utils/text";
import { useState } from "react";
type ReactionItem = {
id: string;
emoji: string;
label: string;
count: number;
};
export default function ReactionBarDemo() {
const [picked, setPicked] = useState<string | null>(null);
const [reactions, setReactions] = useState<ReactionItem[]>([
{ id: "like", emoji: "👍", label: "Helpful", count: 24 },
{ id: "love", emoji: "🎉", label: "Celebrate", count: 9 },
{ id: "think", emoji: "🤔", label: "Not sure", count: 3 },
{ id: "money", emoji: "💸", label: "Costly", count: 1 },
]);
const change = (id: string | null) => {
setReactions((previous) =>
previous.map((reaction) => {
const was = reaction.id === picked;
const now = reaction.id === id;
if (was === now) return reaction;
return { ...reaction, count: reaction.count + (now ? 1 : -1) };
}),
);
setPicked(id);
};
return (
<div className="flex min-h-screen w-full items-center justify-center bg-surface-sunken p-6">
<div className="flex w-full max-w-[460px] flex-col gap-3">
<Surface variant="card" padding="lg" className="gap-2">
<Text size="heading">September in review is ready</Text>
<Text size="body" weight="medium" tone="soft" leading="normal">
Spending is down 8% and your cashback covered two subscriptions
outright.
</Text>
<div className="mt-2">
<ReactionBar
label="React to this update"
reactions={reactions}
value={picked}
onChange={change}
/>
</div>
</Surface>
<Text size="caption" tone="faint" role="status" aria-live="polite">
{picked
? `You picked ${reactions.find((r) => r.id === picked)?.label}. Pick it again to take it back.`
: "Nothing picked."}
</Text>
</div>
</div>
);
}