CountdownTimer

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Saat yalnız ya da boşalan bir halkayla. warnAt son saniyelerde uyarı rengine geçer.

01:3001:30

AçıkKoyu

Kodu kopyala

import { CountdownTimer } from '@bigbang/ui';
import { useState } from 'react';

export default function Default() {
  const [target] = useState(() => Date.now() + 90_000);
  return (
    <div className="flex flex-wrap items-center gap-xl">
      <CountdownTimer target={target} label="Kodun geçerlilik süresi" />
      <CountdownTimer target={target} label="Kodun geçerlilik süresi" variant="ring" duration={120} warnAt={30} />
    </div>
  );
}

Yeniden gönderme

Süre dolunca onComplete düğmeyi açar; yeni bir target ve key sayacı baştan başlatır.

Kod şu süre sonra geçersiz olur:00:15

Kodu yeniden gönder

AçıkKoyu

Kodu kopyala

import { Button, CountdownTimer } from '@bigbang/ui';
import { useState } from 'react';

export default function Resend() {
  const [target, setTarget] = useState(() => Date.now() + 15_000);
  const [done, setDone] = useState(false);
  return (
    <div className="flex flex-col items-start gap-md">
      <p className="flex items-center gap-xs type-body-md text-fg-subtle">
        Kod şu süre sonra geçersiz olur:
        <CountdownTimer key={target} target={target} label="Kodun geçerlilik süresi" warnAt={5} onComplete={() => setDone(true)} />
      </p>
      <Button
        variant="secondary"
        disabled={!done}
        onClick={() => {
          setDone(false);
          setTarget(Date.now() + 15_000);
        }}
      >
        Kodu yeniden gönder
      </Button>
    </div>
  );
}

Açık ve koyu mod

Halka izi ve renkler token’lardan gelir.

Açık

01:3001:30

Koyu

01:3001:30

Kodu kopyala

import { CountdownTimer } from '@bigbang/ui';
import { useState } from 'react';

export default function Default() {
  const [target] = useState(() => Date.now() + 90_000);
  return (
    <div className="flex flex-wrap items-center gap-xl">
      <CountdownTimer target={target} label="Kodun geçerlilik süresi" />
      <CountdownTimer target={target} label="Kodun geçerlilik süresi" variant="ring" duration={120} warnAt={30} />
    </div>
  );
}