Bubble

import { Bubble, BubbleContent } from '@/components/ui/bubble'

export function BubbleDemo() {
  return (
    <div className="flex w-full max-w-md flex-col">
      <Bubble align="start">
        <BubbleContent>Hi! I sent in my building permit application two weeks ago. Is there any news?</BubbleContent>
      </Bubble>
    </div>
  )
}

import { Bubble, BubbleContent } from '@/components/ui/bubble'

const VARIANTS = [
  { variant: 'default', text: 'Can I change my waste collection to every other week?' },
  { variant: 'secondary', text: 'Yes, you can apply for that under Waste and recycling on My pages.' },
  { variant: 'muted', text: 'Your case 2026-04812 has been registered.' },
  { variant: 'tinted', text: 'Tip: you can attach photos straight from your phone.' },
  { variant: 'outline', text: 'Anna Lindqvist joined the conversation.' },
  { variant: 'ghost', text: 'The chat is open weekdays 08:00–16:30.' },
  { variant: 'destructive', text: 'The attachment is larger than 20 MB and was not sent.' },
] as const

export function BubbleVariants() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      {VARIANTS.map(({ variant, text }) => (
        <div key={variant} className="flex flex-col gap-1">
          <span className="text-xs text-muted-foreground">{variant}</span>
          <Bubble variant={variant}>
            <BubbleContent>{text}</BubbleContent>
          </Bubble>
        </div>
      ))}
    </div>
  )
}

import { Bubble, BubbleContent } from '@/components/ui/bubble'

export function BubbleAlignment() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Bubble variant="muted">
        <BubbleContent>Welcome to the resident service chat. How can I help you?</BubbleContent>
      </Bubble>
      <Bubble align="end">
        <BubbleContent>When is the next bulky waste collection on Kungsgatan?</BubbleContent>
      </Bubble>
      <Bubble variant="muted">
        <BubbleContent>
          The next collection in Norrby is on Saturday 13 June between 09:00 and 13:00, at the car park by Norrby school.
        </BubbleContent>
      </Bubble>
      <Bubble align="end">
        <BubbleContent>Perfect, thank you!</BubbleContent>
      </Bubble>
    </div>
  )
}

import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Bubble, BubbleContent, BubbleGroup } from '@/components/ui/bubble'

export function BubbleGroup() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <div className="flex items-end gap-2">
        <Avatar>
          <AvatarFallback>IH</AvatarFallback>
        </Avatar>
        <div className="flex min-w-0 flex-1 flex-col gap-1">
          <span className="px-1 text-xs text-muted-foreground">Ingrid Hansen · Building permits · 09:14</span>
          <BubbleGroup>
            <Bubble variant="muted">
              <BubbleContent>I have gone through your application.</BubbleContent>
            </Bubble>
            <Bubble variant="muted">
              <BubbleContent>The site plan is missing a scale and the distance to the boundary.</BubbleContent>
            </Bubble>
            <Bubble variant="muted">
              <BubbleContent>Could you upload a new version before Friday 20 March?</BubbleContent>
            </Bubble>
          </BubbleGroup>
        </div>
      </div>
      <div className="flex flex-col items-end gap-1">
        <span className="px-1 text-xs text-muted-foreground">You · 09:31</span>
        <BubbleGroup className="w-full">
          <Bubble align="end">
            <BubbleContent>Of course.</BubbleContent>
          </Bubble>
          <Bubble align="end">
            <BubbleContent>I will ask the architect and send it tomorrow morning.</BubbleContent>
          </Bubble>
        </BubbleGroup>
      </div>
    </div>
  )
}

import { HeartIcon, ThumbsUpIcon } from 'lucide-react'
import { Bubble, BubbleContent, BubbleReactions } from '@/components/ui/bubble'

export function BubbleWithReactions() {
  return (
    <div className="flex w-full max-w-md flex-col gap-8 py-4">
      <Bubble variant="muted">
        <BubbleContent>Your parking permit for zone C has been approved and is valid from 1 July.</BubbleContent>
        <BubbleReactions>
          <ThumbsUpIcon aria-hidden="true" className="size-3.5" />
          <span className="text-xs">
            2<span className="sr-only"> people liked this</span>
          </span>
        </BubbleReactions>
      </Bubble>
      <Bubble align="end">
        <BubbleContent>Thank you for the quick handling!</BubbleContent>
        <BubbleReactions align="start" side="top">
          <HeartIcon aria-hidden="true" className="size-3.5" />
          <span className="sr-only">Mikko Virtanen loved this</span>
        </BubbleReactions>
      </Bubble>
    </div>
  )
}

import { CalendarPlusIcon, ExternalLinkIcon, FileTextIcon } from 'lucide-react'
import { Bubble, BubbleContent } from '@/components/ui/bubble'

export function BubbleAsLinkOrButton() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Bubble variant="muted">
        <BubbleContent>Your application has been decided. You can read the decision here:</BubbleContent>
      </Bubble>
      <Bubble variant="outline">
        {/* biome-ignore lint/a11y/useAnchorContent: the children are rendered inside the anchor */}
        <BubbleContent render={<a href="#decision" className="inline-flex items-center gap-2" />}>
          <FileTextIcon aria-hidden="true" className="size-4 text-muted-foreground" />
          Decision 2026-04812.pdf
          <ExternalLinkIcon aria-hidden="true" className="size-3.5 text-muted-foreground" />
        </BubbleContent>
      </Bubble>
      <Bubble variant="secondary" align="end">
        <BubbleContent render={<button type="button" className="inline-flex items-center gap-2" />}>
          <CalendarPlusIcon aria-hidden="true" className="size-4" />
          Book a meeting with the case officer
        </BubbleContent>
      </Bubble>
    </div>
  )
}

import { CircleAlertIcon, RotateCcwIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Bubble, BubbleContent } from '@/components/ui/bubble'

export function BubbleDestructive() {
  return (
    <div className="flex w-full max-w-md flex-col gap-1">
      <Bubble variant="destructive" align="end">
        <BubbleContent>Here are the new drawings for the extension.</BubbleContent>
      </Bubble>
      <div className="flex items-center justify-end gap-2 text-xs text-destructive">
        <CircleAlertIcon aria-hidden="true" className="size-3.5" />
        Not sent
        <Button variant="ghost" size="xs">
          <RotateCcwIcon data-icon="inline-start" />
          Try again
        </Button>
      </div>
    </div>
  )
}