FileUpload

'use client';

import { Field, FileUpload, type FileUploadContext, type FileUploadItem } from '@akhatmirzo/ui';
import { useState } from 'react';

const MB = 1024 * 1024;

/** Soxta yuklash: progress bilan ~2 soniya. Nomida "xato" bo'lsa — tarmoq xatosi */
function fakeUpload(file: File, { onProgress, signal }: FileUploadContext) {
  return new Promise<{ url: string }>((resolve, reject) => {
    let progress = 0;
    const timer = setInterval(() => {
      progress = Math.min(100, progress + 8);
      onProgress(progress);
      if (file.name.includes('xato') && progress > 50) {
        clearInterval(timer);
        reject(new Error('network'));
      } else if (progress === 100) {
        clearInterval(timer);
        resolve({ url: `/uploads/${encodeURIComponent(file.name)}` });
      }
    }, 150);
    signal.addEventListener('abort', () => clearInterval(timer));
  });
}

export default function FileUploadBasic() {
  const [files, setFiles] = useState<FileUploadItem[]>([]);
  const done = files.filter((f) => f.status === 'done').length;

  return (
    <div className="flex w-full max-w-lg flex-col gap-2">
      <Field label="Hujjatlar">
        <FileUpload
          accept={['image/*', '.pdf']}
          maxSize={5 * MB}
          maxFiles={5}
          multiple
          upload={fakeUpload}
          onFilesChange={setFiles}
        />
      </Field>
      <p className="text-sm text-text-muted">
        Jami: {files.length} · yuklandi: {done}
      </p>
    </div>
  );
}

'use client';

import { Field, FileUpload } from '@akhatmirzo/ui';

export default function FileUploadStates() {
  return (
    <div className="grid w-full gap-4 md:grid-cols-2">
      <Field label="Faqat rasm" description="Bitta fayl — yangisi eskisini almashtiradi">
        <FileUpload accept={['image/png', 'image/jpeg']} maxSize={1024 * 1024} />
      </Field>
      <Field label="Shartnoma" error="Kamida bitta hujjat yuklang" required>
        <FileUpload accept={['.pdf']} />
      </Field>
      <Field label="O'chirilgan" disabled>
        <FileUpload />
      </Field>
      <Field label="O'z cheklov matni bilan">
        <FileUpload hint="Excel yoki CSV · 10 MB gacha" accept={['.xlsx', '.csv']} />
      </Field>
    </div>
  );
}

'use client';

import { Field, FileUpload } from '@akhatmirzo/ui';

export default function FileUploadButton() {
  return (
    <div className="w-full max-w-sm">
      <Field label="Pasport nusxasi" description="Old va orqa tomoni">
        <FileUpload
          variant="button"
          accept={['image/*', '.pdf']}
          maxSize={5 * 1024 * 1024}
          maxFiles={2}
          multiple
        />
      </Field>
    </div>
  );
}

'use client';

import { formatFileSize } from '@akhatmirzo/core';
import { Button, Field, FileUpload } from '@akhatmirzo/ui';
import { useState, type FormEvent } from 'react';

export default function FileUploadForm() {
  const [sent, setSent] = useState<string | null>(null);

  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const files = (new FormData(e.currentTarget).getAll('rezyume') as File[]).filter(
      (f) => f.size > 0,
    );
    setSent(files.map((f) => `${f.name} (${formatFileSize(f.size)})`).join(', ') || "Fayl yo'q");
  };

  return (
    <form onSubmit={onSubmit} className="flex w-full max-w-sm flex-col gap-3">
      <Field label="Rezyume" description="PDF yoki DOCX, 2 MB gacha">
        <FileUpload
          variant="button"
          name="rezyume"
          accept={['.pdf', '.docx']}
          maxSize={2 * 1024 * 1024}
        />
      </Field>
      <div className="flex items-center gap-3">
        <Button type="submit" variant="primary" size="sm">
          Yuborish
        </Button>
        {sent && <span className="text-sm text-text-muted">{sent}</span>}
      </div>
    </form>
  );
}

'use client';

import { Field, FileUpload } from '@akhatmirzo/ui';

export default function FileUploadPaste() {
  return (
    <div className="w-full max-w-lg">
      <Field
        label="Skrinshot"
        description="Rasmni nusxalang va sahifaning istalgan joyida Ctrl+V bosing"
      >
        <FileUpload accept={['image/*']} multiple maxFiles={3} paste="global" />
      </Field>
    </div>
  );
}