Badge

import { Badge } from "@/components/ui/badge"

export default function BadgeVariants() {
  return (
    <div className="flex max-w-lg flex-wrap items-center justify-center gap-2">
      <Badge>Domyślny</Badge>
      <Badge variant="secondary">Drugorzędny</Badge>
      <Badge variant="outline">Konturowy</Badge>
      <Badge variant="brand">Marka</Badge>
      <Badge variant="brand-secondary">Drugi kolor marki</Badge>
      <Badge variant="success">Sukces</Badge>
      <Badge variant="warning">Ostrzeżenie</Badge>
      <Badge variant="destructive">Destrukcyjny</Badge>
      <Badge variant="info">Informacja</Badge>
      <Badge variant="ghost">Przezroczysty</Badge>
      <Badge variant="link">Link</Badge>
    </div>
  )
}

import { Badge, BadgeDot } from "@/components/ui/badge"

const services = [
  { name: "API", status: "Działa", variant: "success", live: false },
  { name: "Pulpit", status: "Zakłócenia", variant: "warning", live: false },
  { name: "Webhooki", status: "Awaria", variant: "destructive", live: false },
  { name: "Indeks wyszukiwania", status: "Ponowne indeksowanie", variant: "info", live: true },
] as const

export default function BadgeStatus() {
  return (
    <ul className="flex w-full max-w-sm flex-col divide-y rounded-xl border bg-card">
      {services.map((service) => (
        <li
          key={service.name}
          className="flex items-center justify-between px-4 py-3 text-sm"
        >
          <span className="font-medium">{service.name}</span>
          <Badge variant={service.variant}>
            <BadgeDot live={service.live} />
            {service.status}
          </Badge>
        </li>
      ))}
    </ul>
  )
}

import {
  ArrowUpRightIcon,
  CircleCheckIcon,
  LockIcon,
  SparklesIcon,
  TrendingUpIcon,
} from "lucide-react"

import { Badge } from "@/components/ui/badge"

export default function BadgeWithIcon() {
  return (
    <div className="flex max-w-md flex-wrap items-center justify-center gap-2">
      <Badge variant="success">
        <CircleCheckIcon data-icon="inline-start" />
        Zweryfikowano
      </Badge>
      <Badge variant="brand">
        <SparklesIcon data-icon="inline-start" />
        Wygenerowane przez AI
      </Badge>
      <Badge variant="secondary">
        <LockIcon data-icon="inline-start" />
        Prywatne
      </Badge>
      <Badge variant="outline">
        <TrendingUpIcon data-icon="inline-start" />
        +12,4%
      </Badge>
      <Badge variant="info">
        Dziennik zmian
        <ArrowUpRightIcon data-icon="inline-end" />
      </Badge>
    </div>
  )
}

import { ArrowRightIcon } from "lucide-react"
import Link from "next/link"

import { Badge } from "@/components/ui/badge"

const tags = [
  { label: "kolor", href: "/pl/docs/foundations/color" },
  { label: "typografia", href: "/pl/docs/foundations/typography" },
  { label: "dostępność", href: "/pl/docs/foundations/accessibility" },
  { label: "tokeny-projektowe", href: "/pl/docs/foundations/tokens" },
]

export default function BadgeAsLink() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Badge
        variant="brand"
        size="lg"
        render={<Link href="/pl/docs/resources/changelog" />}
      >
        Zobacz, co nowego
        <ArrowRightIcon data-icon="inline-end" />
      </Badge>
      <div className="flex flex-wrap justify-center gap-1.5">
        {tags.map((tag) => (
          <Badge
            key={tag.label}
            variant="secondary"
            render={<Link href={tag.href} />}
          >
            #{tag.label}
          </Badge>
        ))}
      </div>
    </div>
  )
}

import { BellIcon, InboxIcon, MessageSquareIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"

const items = [
  { label: "Odebrane", icon: InboxIcon, count: 12, "unread": true },
  { label: "Wzmianki", icon: MessageSquareIcon, count: 3, "unread": true },
  { label: "Powiadomienia", icon: BellIcon, count: 128, "unread": false },
]

export default function BadgeCount() {
  return (
    <nav
      aria-label="Skrzynki pocztowe"
      className="flex w-56 flex-col gap-px rounded-xl border bg-card p-1 shadow-raised"
    >
      {items.map(({ label, icon: Icon, count, unread }) => (
        <a
          key={label}
          href="#"
          className="flex h-9 items-center gap-2.5 rounded-lg px-2.5 text-sm hover:bg-accent"
        >
          <Icon className="size-4 text-muted-foreground" aria-hidden="true" />
          <span className="flex-1">{label}</span>
          <Badge
            variant={unread ? "default" : "secondary"}
            size="sm"
            className="min-w-5 tabular-nums"
          >
            {count > 99 ? "99+" : count}
            <span className="sr-only">
              {unread ? " wiadomości do przeczytania" : " wiadomości łącznie"}
            </span>
          </Badge>
        </a>
      ))}
    </nav>
  )
}