VirtualList

'use client';

import { Badge, Button, Input, VirtualList, type VirtualListHandle } from '@akhatmirzo/ui';
import { useMemo, useRef, useState } from 'react';

const LEVELS = [
  { label: 'Info', color: 'info', text: 'Foydalanuvchi tizimga kirdi' },
  { label: 'Tayyor', color: 'success', text: "To'lov qabul qilindi" },
  { label: 'Ogohlantirish', color: 'warning', text: 'Omborda mahsulot kam qoldi' },
  { label: 'Xato', color: 'danger', text: "SMS yuborib bo'lmadi" },
] as const;

export default function VirtualListBasic() {
  const logs = useMemo(
    () => Array.from({ length: 10_000 }, (_, i) => ({ id: i + 1, ...LEVELS[i % LEVELS.length]! })),
    [],
  );
  const ref = useRef<VirtualListHandle>(null);
  const [target, setTarget] = useState('5000');

  const go = () => ref.current?.scrollToIndex(Number(target) - 1, { align: 'start' });

  return (
    <div className="flex w-full flex-col gap-3">
      <div className="flex flex-wrap items-center gap-2">
        <Input
          aria-label="Qator raqami"
          inputMode="numeric"
          value={target}
          onChange={(e) => setTarget(e.target.value.replace(/\D/g, ''))}
          onKeyDown={(e) => e.key === 'Enter' && go()}
          className="w-28"
        />
        <Button variant="soft" onClick={go}>
          Qatorga o'tish
        </Button>
      </div>
      <VirtualList
        ref={ref}
        aria-label="Tizim jurnali"
        items={logs}
        estimateSize={48}
        height={400}
        overscan={8}
        getItemKey={(log) => log.id}
        className="rounded-xl border border-border bg-surface"
        renderItem={(log) => (
          <div className="flex h-12 items-center gap-3 border-b border-border px-4 text-sm">
            <span className="w-14 shrink-0 text-text-faint tabular-nums">#{log.id}</span>
            <Badge color={log.color}>{log.label}</Badge>
            <span className="min-w-0 flex-1 truncate">{log.text}</span>
          </div>
        )}
      />
    </div>
  );
}

'use client';

import { Avatar, VirtualList } from '@akhatmirzo/ui';

const NAMES = ['Aziza Karimova', 'Bobur Toshmatov', "G'ayrat Usmonov", 'Malika Yusupova'];
const TEXTS = [
  'Assalomu alaykum!',
  "Buyurtmam qachon yetib keladi? Kecha to'lov qilgan edim.",
  "Yetkazish manzilini o'zgartirsam bo'ladimi? Hozir Samarqanddaman, kuryer oldindan qo'ng'iroq qilsin.",
  'Ha, albatta.',
  "Rahmat, mahsulot juda yoqdi. Qadoqlash ham a'lo darajada edi, do'stlarimga ham tavsiya qilaman.",
];

const messages = Array.from({ length: 2000 }, (_, i) => ({
  id: i,
  author: NAMES[(i * 3) % NAMES.length]!,
  text: TEXTS[(i * 2 + (i >> 2)) % TEXTS.length]!,
}));

export default function VirtualListDynamic() {
  return (
    <VirtualList
      dynamic
      aria-label="Mijozlar bilan yozishmalar"
      items={messages}
      estimateSize={72}
      height={400}
      getItemKey={(m) => m.id}
      className="w-full rounded-xl border border-border bg-surface"
      renderItem={(m) => (
        <div className="flex gap-3 border-b border-border px-4 py-3">
          <Avatar name={m.author} size="sm" />
          <div className="flex min-w-0 flex-col gap-0.5">
            <span className="text-sm font-medium">{m.author}</span>
            <p className="m-0 text-sm text-text-muted">{m.text}</p>
          </div>
        </div>
      )}
    />
  );
}

'use client';

import { formatMoney } from '@akhatmirzo/core';
import { VirtualList } from '@akhatmirzo/ui';
import { useCallback, useState } from 'react';

const PAGE = 40;
const TOTAL = 400;
const NAMES = ['Jasur Karimov', 'Malika Rahimova', 'Nodira Saidova', 'Otabek Qodirov'];

const makeOrders = (from: number) =>
  Array.from({ length: PAGE }, (_, i) => {
    const id = from + i + 1;
    return {
      id,
      customer: NAMES[id % NAMES.length]!,
      total: ((id * 7919) % 90) * 15_000 + 150_000,
    };
  });

export default function VirtualListInfinite() {
  const [orders, setOrders] = useState(() => makeOrders(0));
  const [loading, setLoading] = useState(false);

  const loadMore = useCallback(() => {
    if (orders.length >= TOTAL) return;
    setLoading(true);
    // Haqiqiy loyihada — fetch(`/api/orders?offset=${orders.length}`)
    setTimeout(() => {
      setOrders((prev) => [...prev, ...makeOrders(prev.length)]);
      setLoading(false);
    }, 900);
  }, [orders.length]);

  return (
    <div className="flex w-full flex-col gap-2">
      <p className="m-0 text-sm text-text-muted">
        Yuklangan: {orders.length} / {TOTAL}
      </p>
      <VirtualList
        aria-label="Buyurtmalar"
        items={orders}
        estimateSize={52}
        height={360}
        loadingMore={loading}
        onEndReached={loadMore}
        getItemKey={(o) => o.id}
        labels={{ loadingMore: 'Buyurtmalar yuklanmoqda...' }}
        className="rounded-xl border border-border bg-surface"
        renderItem={(o) => (
          <div className="flex h-13 items-center gap-3 border-b border-border px-4 text-sm">
            <span className="w-14 shrink-0 text-text-faint tabular-nums">№{o.id}</span>
            <span className="min-w-0 flex-1 truncate">{o.customer}</span>
            <span className="shrink-0 font-medium tabular-nums">{formatMoney(o.total)}</span>
          </div>
        )}
      />
    </div>
  );
}

'use client';

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

export default function VirtualListEmpty() {
  return (
    <VirtualList
      aria-label="Bildirishnomalar"
      items={[]}
      estimateSize={48}
      height={160}
      renderItem={() => null}
      emptyState="Hali bildirishnomalar yo'q"
      className="w-full max-w-md rounded-xl border border-border bg-surface"
    />
  );
}