Component: Relative Time

Ouverte
  • Quelque chose ne va pas ?
#92 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
55/100
Type d'issue
Fonctionnalité
Clarté
Clairement spécifiée
Activité
Active
Stack technique
react, tailwindcss, typescript
Domaine
frontend, internationalization

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
39
Forks
16
Merge moyen
18 h 14 min
PR mergées (30 j)
35

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de babelize/babelize-elements

Toutes les issues de babelize/babelize-elements

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.