Variants, alignment, reactions and a button

// apps/docs/examples/ui/bubble.tsx'use client';
import {useState} from 'react';
import {  Bubble,  BubbleContent,  BubbleGroup,  BubbleReactions,} from '@workspace/active-ui/components/primitives/bubble';
const VARIANTS = [  'default',  'secondary',  'muted',  'tinted',  'outline',  'ghost',  'destructive',] as const;
/** * The shape of a message: seven variants, a bubble aligned to the end, a * bubble with reactions, and a bubble that is a button. */export default function BubbleExample() {  const [liked, setLiked] = useState(false);  return (    <div className="flex w-full max-w-md flex-col gap-6">      <BubbleGroup>        {VARIANTS.map((variant) => (          <Bubble key={variant} variant={variant}>            <BubbleContent>The {variant} variant</BubbleContent>          </Bubble>        ))}      </BubbleGroup>      <BubbleGroup>        <Bubble align="end">          <BubbleContent>Aligned to the end</BubbleContent>        </Bubble>        <Bubble variant="secondary">          <BubbleContent>With a reaction</BubbleContent>          <BubbleReactions aria-label="1 reaction">👍</BubbleReactions>        </Bubble>        <Bubble variant="outline">          <BubbleContent            render={<button type="button" />}            aria-pressed={liked}            onClick={() => setLiked(!liked)}          >            {liked ? 'Liked: press to undo' : 'Press this bubble to like it'}          </BubbleContent>        </Bubble>      </BubbleGroup>    </div>  );}