EmptyState

'use client';

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

export default function EmptyStateBasic() {
  return (
    <EmptyState
      icon={<Inbox />}
      title="Buyurtmalar hali yo'q"
      description="Birinchi buyurtma kelganda shu yerda ko'rinadi."
      action={
        <Button variant="primary" leftIcon={<Plus />}>
          Mahsulot qo'shish
        </Button>
      }
      secondaryAction={<Button variant="ghost">Qo'llanma</Button>}
    />
  );
}

'use client';

import { Button, EmptyState, Input } from '@akhatmirzo/ui';
import { SearchX } from 'lucide-react';
import { useState } from 'react';

export default function EmptyStateSearch() {
  const [query, setQuery] = useState('Namangan');

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Input
        aria-label="Shahar qidirish"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Shahar nomi"
      />
      <EmptyState
        size="sm"
        bordered
        icon={<SearchX />}
        title="Hech narsa topilmadi"
        description={`"${query}" bo'yicha natija yo'q. So'zni o'zgartirib ko'ring.`}
        action={
          <Button size="sm" onClick={() => setQuery('')}>
            Qidiruvni tozalash
          </Button>
        }
      />
    </div>
  );
}

'use client';

import { EmptyState } from '@akhatmirzo/ui';
import { FolderOpen } from 'lucide-react';

export default function EmptyStateSizes() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-3">
      <EmptyState bordered size="sm" icon={<FolderOpen />} title="Kichik" description="sm" />
      <EmptyState bordered size="md" icon={<FolderOpen />} title="O'rta" description="md" />
      <EmptyState bordered size="lg" icon={<FolderOpen />} title="Katta" description="lg" />
    </div>
  );
}

'use client';

import { Button, DataTable, type DataTableColumn } from '@akhatmirzo/ui';
import { Inbox, Plus } from 'lucide-react';

interface Order {
  id: number;
  customer: string;
  total: string;
}

const columns: DataTableColumn<Order>[] = [
  { key: 'id', header: '№' },
  { key: 'customer', header: 'Mijoz' },
  { key: 'total', header: 'Summa' },
];

const orders: Order[] = [];

export default function EmptyStateDataTable() {
  return (
    <DataTable
      className="w-full"
      label="Buyurtmalar"
      data={orders}
      columns={columns}
      empty={{
        icon: <Inbox />,
        title: "Buyurtmalar hali yo'q",
        description: "Birinchi buyurtma kelganda shu yerda ko'rinadi.",
        action: (
          <Button size="sm" variant="primary" leftIcon={<Plus />}>
            Buyurtma qo'shish
          </Button>
        ),
      }}
    />
  );
}