Component: Relative Time

Aperta
  • Qualcosa non va?
#92 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
55/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, tailwindcss, typescript
Ambito
frontend, internationalization

Direzione di ricerca

Read the existing components under src/registry/components/, then check their exports in src/registry/components/index.ts and entries in src/registry/registry.ts. Build the Relative Time component around the listed API and timing requirements, and add tests in test/ for past and future dates, unit selection, locales, and timer cleanup. It is done when the component, registry entry, tests, and a page in content/docs/components/ are complete.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

component date-time good first issue

Component: Relative Time

Show how long ago (or until) a date is, in the user's language: "3 minutes ago", "vor 3 Minuten", "in 2 days".

A first version was removed in #66 until it could be a real component. This issue is for doing it properly.

Requirements
  • TypeScript-first with exported props interface
  • Uses Intl.RelativeTimeFormat, picking the largest sensible unit (seconds → minutes → hours → days → weeks → months → years)
  • numeric="auto" by default, so you get "yesterday" / "gestern" rather than "1 day ago"
  • Renders a semantic <time dateTime="…"> with the absolute date as a title
  • Updates itself while on screen, at a rate that fits the distance (every second near "now", every minute after that, …), and stops when unmounted
  • now prop for tests and SSR, so the server and client render the same text
  • Forwarded ref and ...rest like the other components
  • Tailwind CSS compatible
Expected API
<RelativeTime date={comment.createdAt} locale="de" />
// → <time dateTime="2026-10-28T10:00:00.000Z" title="28. Oktober 2026, 11:00">vor 3 Minuten</time>
Deliverables
  • Component source in src/registry/components/
  • Export in src/registry/components/index.ts and entry in src/registry/registry.ts
  • Tests in test/ covering past and future dates, unit selection, numeric="auto", at least en, de and ar, and that the timer is cleared on unmount
  • Documentation page in content/docs/components/

See CONTRIBUTING.md and the Contributor Rulebook.

Lingua principale
TypeScript
Stelle
39
Fork
16
Merge medio
18h 14m
PR unite (30g)
35

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di babelize/babelize-elements

Tutte le issue di babelize/babelize-elements

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.