Bubble

1import { Bubble } from '@/components/ui/bubble';
2
3export function Default() {
4  return (
5    <div className="flex w-full max-w-sm flex-col gap-3">
6      <Bubble.Group align="start">
7        <Bubble variant="secondary">
8          <Bubble.Content>Hey, did you ship the new docs page?</Bubble.Content>
9        </Bubble>
10        <Bubble variant="secondary">
11          <Bubble.Content>The nav check is failing on my branch.</Bubble.Content>
12        </Bubble>
13      </Bubble.Group>
14      <Bubble.Group align="end">
15        <Bubble align="end">
16          <Bubble.Content>Just pushed the fix, pull and rerun it.</Bubble.Content>
17          <Bubble.Reactions side="bottom" align="start">
18            <span aria-hidden="true">👍</span>
19            <span className="text-muted-foreground px-0.5">2</span>
20          </Bubble.Reactions>
21        </Bubble>
22      </Bubble.Group>
23    </div>
24  );
25}

1import { Bubble } from '@/components/ui/bubble';
2
3const VARIANTS = [
4  { variant: 'default', text: 'Default, for the current user.' },
5  { variant: 'secondary', text: 'Secondary, for the other side.' },
6  { variant: 'muted', text: 'Muted, for supporting content.' },
7  { variant: 'tinted', text: 'Tinted, a subtle primary wash.' },
8  { variant: 'outline', text: 'Outline, framed but quiet.' },
9  { variant: 'ghost', text: 'Ghost, no frame at all.' },
10  { variant: 'destructive', text: 'Destructive, something went wrong.' },
11] as const;
12
13export function Variants() {
14  return (
15    <div className="flex w-full max-w-sm flex-col gap-2">
16      {VARIANTS.map(({ variant, text }) => (
17        <Bubble key={variant} variant={variant}>
18          <Bubble.Content>{text}</Bubble.Content>
19        </Bubble>
20      ))}
21    </div>
22  );
23}