Alert

'use client';

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

export default function AlertColors() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      <Alert title="Yangi versiya chiqdi">
        Sahifani yangilang — o'zgarishlar darhol kuchga kiradi.
      </Alert>
      <Alert color="success" title="Buyurtma qabul qilindi">
        Kuryer bugun 18:00 gacha qo'ng'iroq qiladi.
      </Alert>
      <Alert color="warning" title="Obuna 3 kundan keyin tugaydi">
        To'lovni hozir qilsangiz, ma'lumotlaringiz saqlanib qoladi.
      </Alert>
      <Alert color="danger" title="To'lov o'tmadi">
        Kartada mablag' yetarli emas. Boshqa kartani sinab ko'ring.
      </Alert>
      <Alert color="primary" title="Maslahat">
        Tez qidirish uchun Ctrl + K ni bosing.
      </Alert>
      <Alert color="neutral" title="Qoralama saqlandi" />
    </div>
  );
}

'use client';

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

export default function AlertVariants() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      <Alert color="success" variant="soft" title="Soft">
        Yumshoq fon — standart ko'rinish.
      </Alert>
      <Alert color="success" variant="outline" title="Outline">
        Rangli chegara va oddiy fon.
      </Alert>
      <Alert color="success" variant="solid" title="Solid">
        To'q fon — eng ko'p e'tibor tortadi.
      </Alert>
    </div>
  );
}

'use client';

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

export default function AlertActions() {
  const [open, setOpen] = useState(true);

  if (!open) {
    return (
      <Button size="sm" onClick={() => setOpen(true)}>
        Xabarni qaytarish
      </Button>
    );
  }

  return (
    <Alert
      className="max-w-xl"
      color="danger"
      title="To'lov o'tmadi"
      action={
        <Button size="sm" variant="outline">
          Qayta urinish
        </Button>
      }
      onClose={() => setOpen(false)}
    >
      Bank to'lovni rad etdi. Karta ma'lumotlarini tekshiring.
    </Alert>
  );
}

'use client';

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

export default function AlertBanner() {
  const [open, setOpen] = useState(true);

  return (
    <div className="w-full overflow-hidden rounded-lg border border-border bg-surface">
      {open && (
        <Alert banner color="primary" onClose={() => setOpen(false)}>
          Bugun 23:00 dan 01:00 gacha texnik ishlar olib boriladi.
        </Alert>
      )}
      <div className="flex items-center justify-between gap-3 p-6 text-sm text-text-muted">
        Sahifa kontenti
        {!open && (
          <Button size="sm" onClick={() => setOpen(true)}>
            Qaytarish
          </Button>
        )}
      </div>
    </div>
  );
}