Component: Relative Time
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 55/100
- Issue 类型
- 功能
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- react, tailwindcss, typescript
调研方向
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.
由索引模型根据 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 atitle - Updates itself while on screen, at a rate that fits the distance (every second near "now", every minute after that, …), and stops when unmounted
nowprop for tests and SSR, so the server and client render the same text- Forwarded ref and
...restlike 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.tsand entry insrc/registry/registry.ts - Tests in
test/covering past and future dates, unit selection,numeric="auto", at leasten,deandar, and that the timer is cleared on unmount - Documentation page in
content/docs/components/
See CONTRIBUTING.md and the Contributor Rulebook.
- 主要语言
- TypeScript
- 星标
- 39
- 派生
- 16
- 平均合并
- 18 小时 14 分钟
- 30 天内合并 PR
- 35
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
babelize/babelize-elements 的其他 Issue
-
accessibility help wanted
难度 4/5 3-5 天 新手友好度 48/100
babelize/babelize-elements#94 ·
维护者通常 1 天内回复
-
component help wanted
难度 4/5 3-5 天 新手友好度 55/100
babelize/babelize-elements#93 ·
维护者通常 1 天内回复
-
component date-time good first issue
难度 4/5 3-5 天 新手友好度 55/100
babelize/babelize-elements#91 ·
维护者通常 1 天内回复
-
component good first issue language-switcher
难度 4/5 3-5 天 新手友好度 56/100
babelize/babelize-elements#90 ·
维护者通常 1 天内回复
-
component enhancement help wanted
难度 5/5 一周以上 新手友好度 35/100
babelize/babelize-elements#47 ·
维护者通常 1 天内回复
查看 babelize/babelize-elements 的全部 Issue
相似的 Issue
-
bug module:nodes tests
难度 2/5 1-3 小时 新手友好度 78/100
rocketride-org/rocketride-server#3020 ·
维护者通常 2 天内回复
-
area: dashboard area: tests good first issue size: XS tests
难度 1/5 1-3 小时 新手友好度 88/100
维护者通常 1 天内回复
-
enhancement needs-community-review
难度 2/5 1-3 小时 新手友好度 67/100
shaharia-lab/slackcli#501 · 3 条评论 ·
维护者通常 1 天内回复
-
[Bug] Pod detail shows CPU usage ten times too high, and throws on decimal memory suffixes可能已有人在做 @RaphaelFakhri 今天认领。 未关闭
难度 2/5 1-3 小时 新手友好度 84/100
维护者通常 11 天内回复
-
`package.json`: build tools listed as runtime dependencies, exact pins causing duplicate installs未关闭
难度 2/5 1-3 小时 新手友好度 68/100
themesberg/flowbite-vue#471 ·