Toast

'use client';

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

export default function ToastTypes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button variant="outline" onClick={() => toast('Havola nusxalandi')}>
        Oddiy
      </Button>
      <Button variant="outline" onClick={() => toast.success("O'zgarishlar saqlandi")}>
        success
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast.error("Ulanib bo'lmadi", {
            description: "Internetni tekshirib, qayta urinib ko'ring.",
          })
        }
      >
        error
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast.warning('Obuna 3 kundan keyin tugaydi', {
            description: "To'lovni oldindan qiling.",
          })
        }
      >
        warning
      </Button>
      <Button variant="outline" onClick={() => toast.info('Yangi versiya mavjud')}>
        info
      </Button>
      <Button variant="outline" onClick={() => toast.loading('Hisobot tayyorlanmoqda...')}>
        loading
      </Button>
      <Button variant="ghost" onClick={() => toast.dismiss()}>
        Hammasini yopish
      </Button>
    </div>
  );
}

'use client';

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

export default function ToastAction() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button
        variant="outline"
        onClick={() =>
          toast.success('Buyurtma yaratildi', {
            description: "#1042 · 1 250 000 so'm",
            action: { label: "Ko'rish", onClick: () => toast.info('Buyurtma #1042 ochildi') },
          })
        }
      >
        Amal bilan
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Mahsulot o'chirildi", {
            description: 'iPhone 15 Pro, 256 GB',
            action: {
              label: 'Qaytarish',
              onClick: () => toast.success('Mahsulot qaytarildi'),
            },
          })
        }
      >
        Bekor qilish (undo)
      </Button>
    </div>
  );
}

'use client';

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

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

async function saveOrder() {
  await wait(1500);
  return 1042;
}

async function failingRequest(): Promise<void> {
  await wait(1200);
  throw new Error('Server javob bermadi');
}

export default function ToastPromise() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button
        variant="outline"
        onClick={() =>
          toast.promise(saveOrder, {
            loading: 'Saqlanmoqda...',
            success: (id) => `Buyurtma #${id} saqlandi`,
            error: 'Xatolik yuz berdi',
          })
        }
      >
        Muvaffaqiyatli
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast
            .promise(failingRequest, {
              loading: 'Yuborilmoqda...',
              success: 'Yuborildi',
              error: (e) => `Xatolik: ${(e as Error).message}`,
            })
            .catch(() => {})
        }
      >
        Xato bilan
      </Button>
    </div>
  );
}

'use client';

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

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

export default function ToastUpdate() {
  const upload = async () => {
    const id = toast.loading('Fayl yuklanmoqda...', { description: 'hisobot.xlsx' });
    await wait(1000);
    toast.loading('Fayl tekshirilmoqda...', { id, description: 'hisobot.xlsx' });
    await wait(1000);
    toast.success('Fayl yuklandi', { id, description: 'hisobot.xlsx · 2,4 MB' });
  };

  return (
    <Button variant="outline" onClick={upload}>
      Faylni yuklash
    </Button>
  );
}

'use client';

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

export default function ToastStack() {
  const burst = () => {
    toast.info("Yangi mijoz ro'yxatdan o'tdi");
    toast.success("To'lov qabul qilindi", { description: "350 000 so'm" });
    toast.warning('Omborda 3 ta qoldi');
    toast('Yangi sharh qoldirildi');
  };

  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button variant="outline" onClick={burst}>
        4 tasini birdan
      </Button>
      <Button variant="ghost" onClick={() => toast.dismiss()}>
        Hammasini yopish
      </Button>
    </div>
  );
}