Bileşenler

DateTimeText

Bir tarihi, saati ya da göreli zamanı Provider dilinde, Intl ile bir time öğesinde yazan metin.

Storybook: Storybook
Kaynak kod: Kaynak kod

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

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Düz tarih yalnızca tarih, tarih-saat ikisiyle yazılır. timeZone saati verilen bölgede yazar.

Oluşturulma: 8 Eki 2026
Son güncelleme: 8 Ekim 2026 14:30
Saat: 14:30

import { DateTimeText } from '@bigbang/ui';

export default function Default() {
  return (
    <dl className="grid grid-cols-[auto_1fr] gap-x-xl gap-y-sm type-body-md">
      <dt className="text-fg-subtle">Oluşturulma</dt>
      <dd>
        <DateTimeText value="2026-10-08" />
      </dd>
      <dt className="text-fg-subtle">Son güncelleme</dt>
      <dd>
        <DateTimeText value="2026-10-08T14:30:00" dateStyle="long" />
      </dd>
      <dt className="text-fg-subtle">Saat</dt>
      <dd>
        <DateTimeText value="2026-10-08T11:30:00Z" format="time" timeZone="Europe/Istanbul" />
      </dd>
    </dl>
  );
}

Göreli

format="relative" “2 dakika önce” yazar ve 30 saniyede bir tazelenir; kesin zaman title içindedir.

Son güncelleme: 2 dakika önce

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

export default function Relative() {
  const [moment] = useState(() => new Date(Date.now() - 2 * 60_000));
  return (
    <p className="type-body-md text-fg-subtle">
      Son güncelleme: <DateTimeText value={moment} format="relative" />
    </p>
  );
}

Açık ve koyu mod

Metin rengini çevresinden alır.

Oluşturulma: 8 Eki 2026
Son güncelleme: 8 Ekim 2026 14:30
Saat: 14:30

Oluşturulma: 8 Eki 2026
Son güncelleme: 8 Ekim 2026 14:30
Saat: 14:30

import { DateTimeText } from '@bigbang/ui';

export default function Default() {
  return (
    <dl className="grid grid-cols-[auto_1fr] gap-x-xl gap-y-sm type-body-md">
      <dt className="text-fg-subtle">Oluşturulma</dt>
      <dd>
        <DateTimeText value="2026-10-08" />
      </dd>
      <dt className="text-fg-subtle">Son güncelleme</dt>
      <dd>
        <DateTimeText value="2026-10-08T14:30:00" dateStyle="long" />
      </dd>
      <dt className="text-fg-subtle">Saat</dt>
      <dd>
        <DateTimeText value="2026-10-08T11:30:00Z" format="time" timeZone="Europe/Istanbul" />
      </dd>
    </dl>
  );
}