Badge

'use client';

import { Badge } from '@akhatmirzo/ui';

export default function BadgeColors() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge>Qoralama</Badge>
      <Badge color="primary">Yangi</Badge>
      <Badge color="success">To'langan</Badge>
      <Badge color="warning">Kutilmoqda</Badge>
      <Badge color="danger">Bekor qilindi</Badge>
      <Badge color="info">Yo'lda</Badge>
    </div>
  );
}

'use client';

import { Badge } from '@akhatmirzo/ui';

export default function BadgeVariants() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex flex-wrap items-center gap-2">
        <Badge variant="soft" color="success">
          Soft
        </Badge>
        <Badge variant="solid" color="success">
          Solid
        </Badge>
        <Badge variant="outline" color="success">
          Outline
        </Badge>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Badge variant="soft" color="danger">
          Soft
        </Badge>
        <Badge variant="solid" color="danger">
          Solid
        </Badge>
        <Badge variant="outline" color="danger">
          Outline
        </Badge>
      </div>
    </div>
  );
}

'use client';

import { Badge } from '@akhatmirzo/ui';

export default function BadgeSizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge size="sm" color="primary">
        Kichik
      </Badge>
      <Badge size="md" color="primary">
        O'rta
      </Badge>
    </div>
  );
}

'use client';

import { Badge } from '@akhatmirzo/ui';

export default function BadgeDot() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge dot color="success">
        Onlayn
      </Badge>
      <Badge dot color="warning" variant="outline">
        Tekshirilmoqda
      </Badge>
      <Badge dot color="danger" variant="solid">
        To'xtatilgan
      </Badge>
    </div>
  );
}

'use client';

import { Badge, Button } from '@akhatmirzo/ui';
import { useState } from 'react';

const initial = ['Toshkent', 'Samarqand', 'Buxoro', "Farg'ona"];

export default function BadgeRemovable() {
  const [cities, setCities] = useState(initial);

  return (
    <div className="flex flex-wrap items-center gap-2">
      {cities.map((city) => (
        <Badge
          key={city}
          variant="outline"
          onRemove={() => setCities((list) => list.filter((c) => c !== city))}
          labels={{ remove: `${city} filtrini olib tashlash` }}
        >
          {city}
        </Badge>
      ))}
      {cities.length < initial.length && (
        <Button variant="link" size="sm" onClick={() => setCities(initial)}>
          Qaytarish
        </Button>
      )}
    </div>
  );
}