Button

'use client';

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

export default function ButtonVariants() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="primary">Saqlash</Button>
      <Button>Soft</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="danger">O'chirish</Button>
      <Button variant="link">Batafsil</Button>
    </div>
  );
}

'use client';

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

export default function ButtonSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="sm">Kichik · 32</Button>
      <Button size="md">O'rta · 40</Button>
      <Button size="lg">Katta · 48</Button>
    </div>
  );
}

'use client';

import { Button } from '@akhatmirzo/ui';
import { ArrowRight, Plus, Trash2 } from 'lucide-react';

export default function ButtonIcons() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="primary" leftIcon={<Plus />}>
        Qo'shish
      </Button>
      <Button rightIcon={<ArrowRight />}>Davom etish</Button>
      <Button variant="danger" leftIcon={<Trash2 />}>
        O'chirish
      </Button>
    </div>
  );
}

'use client';

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

export default function ButtonLoading() {
  const [saving, setSaving] = useState(false);

  const save = () => {
    setSaving(true);
    setTimeout(() => {
      setSaving(false);
      toast.success('Saqlandi');
    }, 1500);
  };

  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="primary" loading={saving} onClick={save}>
        Saqlash
      </Button>
      <Button variant="outline" loading labels={{ loading: 'Yuborilmoqda' }}>
        Yuborish
      </Button>
      <Button disabled>O'chirilgan</Button>
    </div>
  );
}

'use client';

import { Button } from '@akhatmirzo/ui';
import { ArrowRight } from 'lucide-react';

export default function ButtonAsChild() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button asChild variant="outline" rightIcon={<ArrowRight />}>
        <a href="#accessibility">Accessibility bo'limiga</a>
      </Button>
      <Button asChild variant="link">
        <a href="https://github.com/Akhatmirzo/akhatmirzo-toolkit">GitHub</a>
      </Button>
    </div>
  );
}

'use client';

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

export default function ButtonFullWidth() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Button variant="primary" fullWidth>
        Kirish
      </Button>
      <Button variant="outline" fullWidth>
        Ro'yxatdan o'tish
      </Button>
    </div>
  );
}