Progress

'use client';

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

export default function ProgressBasic() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <Progress value={64} label="Yuklanmoqda" showValue />
      <Progress
        value={3}
        max={5}
        label="Profil to'ldirildi"
        showValue
        formatValue={(value, max) => `${value} / ${max}`}
      />
    </div>
  );
}

'use client';

import { Progress, ProgressCircle } from '@akhatmirzo/ui';

export default function ProgressIndeterminate() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <Progress value={null} label="Fayl tayyorlanmoqda" />
      <ProgressCircle value={null} label="Yuklanmoqda" />
    </div>
  );
}

'use client';

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

export default function ProgressColorsSizes() {
  return (
    <div className="flex w-full max-w-md flex-col gap-5">
      <Progress value={40} size="sm" aria-label="Kichik chiziq" />
      <Progress value={55} color="success" aria-label="O'rta chiziq" />
      <Progress value={80} size="lg" color="warning" aria-label="Katta chiziq" />
      <Progress value={95} color="danger" label="Disk to'lib bormoqda" showValue />
    </div>
  );
}

'use client';

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

export default function ProgressCircleDemo() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <ProgressCircle value={30} size="sm" label="Sinxronlash" />
      <ProgressCircle value={58} showValue label="Saqlash" />
      <ProgressCircle value={72} size="lg" showValue label="Kurs" color="success" />
      <ProgressCircle value={100} size="lg" showValue label="Tayyor" color="success" />
    </div>
  );
}

'use client';

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

export default function ProgressUpload() {
  const [value, setValue] = useState(0);
  const [running, setRunning] = useState(false);

  useEffect(() => {
    if (!running) return;
    const id = setInterval(() => setValue((v) => Math.min(v + 8, 100)), 300);
    return () => clearInterval(id);
  }, [running]);

  const done = value === 100;
  if (done && running) setRunning(false);

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Progress value={value} label="hisobot.pdf" showValue color={done ? 'success' : 'primary'} />
      <Button
        size="sm"
        className="self-start"
        disabled={running}
        onClick={() => {
          setValue(0);
          setRunning(true);
        }}
      >
        {done ? 'Qayta yuklash' : 'Yuklashni boshlash'}
      </Button>
    </div>
  );
}