Pagination

'use client';

import { Pagination, PaginationInfo } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function PaginationBasic() {
  const [page, setPage] = useState(3);

  return (
    <div className="flex flex-col items-center gap-3">
      <Pagination page={page} onPageChange={setPage} total={230} pageSize={10} />
      <PaginationInfo page={page} pageSize={10} total={230} />
    </div>
  );
}

'use client';

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

export default function PaginationSizes() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Pagination defaultPage={4} pageCount={12} size="sm" compact={false} />
      <Pagination defaultPage={4} pageCount={12} compact={false} />
    </div>
  );
}

'use client';

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

export default function PaginationFirstLast() {
  return <Pagination defaultPage={10} pageCount={40} siblings={2} showFirstLast compact={false} />;
}

'use client';

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

export default function PaginationCompact() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Pagination defaultPage={3} pageCount={24} compact />
      <Pagination defaultPage={3} pageCount={24} compact size="sm" showFirstLast />
    </div>
  );
}

'use client';

import { Pagination } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function PaginationLinks() {
  // Haqiqiy loyihada sahifa URL'dan o'qiladi: ?page=3
  const [page, setPage] = useState(1);

  return (
    <Pagination page={page} onPageChange={setPage} pageCount={8} getHref={(p) => `#sahifa-${p}`} />
  );
}

'use client';

import { formatMoney } from '@akhatmirzo/core';
import { DataTable, Pagination, PaginationInfo, type DataTableColumn } from '@akhatmirzo/ui';
import { useState } from 'react';

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

const NAMES = ['Jasur Karimov', 'Malika Rahimova', 'Nodira Saidova', 'Otabek Qodirov'];
const ORDERS: Order[] = Array.from({ length: 47 }, (_, i) => ({
  id: 3001 + i,
  customer: NAMES[i % NAMES.length]!,
  total: 120_000 + ((i * 314_159) % 2_500_000),
}));

const columns: DataTableColumn<Order>[] = [
  { key: 'id', header: '№', width: 88 },
  { key: 'customer', header: 'Mijoz' },
  { key: 'total', header: 'Summa', numeric: true, cell: (o) => formatMoney(o.total) },
];

const PAGE_SIZE = 5;

export default function PaginationDataTable() {
  const [page, setPage] = useState(1);
  const rows = ORDERS.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);

  return (
    <div className="flex w-full flex-col gap-3">
      <DataTable label="Buyurtmalar" data={rows} columns={columns} className="w-full" />
      <div className="flex flex-wrap items-center justify-between gap-3">
        <PaginationInfo page={page} pageSize={PAGE_SIZE} total={ORDERS.length} />
        <Pagination
          page={page}
          onPageChange={setPage}
          total={ORDERS.length}
          pageSize={PAGE_SIZE}
          size="sm"
        />
      </div>
    </div>
  );
}