Badge

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

export function BadgeDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge>New</Badge>
      <Badge variant="secondary">Disconnected</Badge>
      <Badge variant="destructive">Failed</Badge>
      <Badge variant="outline">Draft</Badge>
      <Badge variant="ghost">Beta</Badge>
      <Badge variant="link">Docs</Badge>
    </div>
  )
}

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

export function BadgeStatus() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge className="bg-success/15 text-success">Connected</Badge>
      <Badge variant="secondary">Disconnected</Badge>
    </div>
  )
}

import { ArrowUpRightIcon, CheckIcon, SparklesIcon } from "lucide-react"

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

export function BadgeWithIcon() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge>
        <SparklesIcon data-icon="inline-start" />
        New
      </Badge>
      <Badge className="bg-success/15 text-success">
        <CheckIcon data-icon="inline-start" />
        Connected
      </Badge>
      <Badge variant="outline">
        Changelog
        <ArrowUpRightIcon data-icon="inline-end" />
      </Badge>
    </div>
  )
}

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

export function BadgeAfterATitle() {
  return (
    <h3 className="flex items-center gap-2 text-xl font-medium">
      Shopify
      <Badge className="bg-success/15 text-success">Connected</Badge>
    </h3>
  )
}

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

export function BadgeAsLink() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge render={<a href="#badge" />}>New</Badge>
      <Badge variant="secondary" render={<a href="#badge" />}>
        Disconnected
      </Badge>
      <Badge variant="outline" render={<a href="#badge" />}>
        Draft
      </Badge>
    </div>
  )
}