Badge

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

export const BadgeDemo = () => {
  return (
    <div className="flex items-center gap-3 justify-center flex-wrap">
      <Badge variant="subtle">Badge</Badge>
      <Badge variant="soft" intent="soft-primary">Badge</Badge>
      <Badge variant="outline" intent="outline-warning">Badge</Badge>
      <Badge intent="solid-danger">Badge</Badge>
      <Badge intent="solid-neutral">Badge</Badge>
    </div>
  )
}

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


export const BadgeOutline = () => {
    return (
        <div className="flex flex-wrap gap-4">
            <Badge variant="outline">Badge Gray</Badge>
            <Badge variant="outline" intent="outline-neutral">Badge Neutral</Badge>
            <Badge variant="outline" intent="outline-primary">Badge Primary</Badge>
            <Badge variant="outline" intent="outline-secondary">Badge Secondary</Badge>
            <Badge variant="outline" intent="outline-warning">Badge Warning</Badge>
            <Badge variant="outline" intent="outline-danger">Badge danger</Badge>
            <Badge variant="outline" intent="outline-info">Badge Info</Badge>
            <Badge variant="outline" intent="outline-success">Badge Success</Badge>
        </div>
    )
}

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


export const BadgeSoft = () => {
    return (
        <div className="flex flex-wrap gap-4">
            <Badge variant="soft">Badge Gray</Badge>
            <Badge variant="soft" intent="soft-neutral">Badge Neutral</Badge>
            <Badge variant="soft" intent="soft-primary">Badge Primary</Badge>
            <Badge variant="soft" intent="soft-secondary">Badge Secondary</Badge>
            <Badge variant="soft" intent="soft-warning">Badge Warning</Badge>
            <Badge variant="soft" intent="soft-danger">Badge danger</Badge>
            <Badge variant="soft" intent="soft-info">Badge Info</Badge>
            <Badge variant="soft" intent="soft-success">Badge Success</Badge>
        </div>
    )
}

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


export const BadgeSubtle = () => {
    return (
        <div className="flex flex-wrap gap-4">
            <Badge variant="subtle">Badge Gray</Badge>
            <Badge variant="subtle" intent="subtle-neutral">Badge Neutral</Badge>
            <Badge variant="subtle" intent="subtle-primary">Badge Primary</Badge>
            <Badge variant="subtle" intent="subtle-secondary">Badge Secondary</Badge>
            <Badge variant="subtle" intent="subtle-warning">Badge Warning</Badge>
            <Badge variant="subtle" intent="subtle-danger">Badge danger</Badge>
            <Badge variant="subtle" intent="subtle-info">Badge Info</Badge>
            <Badge variant="subtle" intent="subtle-success">Badge Success</Badge>
        </div>
    )
}

import { Badge } from '@/components/jk/badge'

export const BadgeWithIcon = () => {
    return (
        <div className="flex flex-wrap gap-4">
            <Badge variant="soft" intent="soft-success" className="flex items-center gap-x-1">
                12%
                <span aria-hidden="true" className="flex iconify ph--trend-up"></span>
            </Badge>
            <Badge variant="soft" intent="soft-danger" className="flex items-center gap-x-1">
                50%
                <span aria-hidden="true" className="flex iconify ph--trend-down"></span>
            </Badge>
            <Badge variant="soft" intent="soft-warning" className="flex items-centerr gap-x-1">
                You&apos;re reaching out your limit
                <span aria-hidden="true" className="flex iconify ph--warning"></span>
            </Badge>
        </div>
    )
}