Repository navigation
countdown component - #23
MatthewMo520 wants to merge 2 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
🚀 Preview deployment ready — |
🚦 Quality Gate Report📊 Check Results
✅ All Checks Passed!Your code meets all quality standards and is ready to merge! 🎉 📝 Run Details
|
| * Countdown to the start of CxC. | ||
| * | ||
| * Pure date math, no React and no dependencies, so it can be unit tested and | ||
| * reused anywhere the timer shows up. | ||
| */ | ||
|
|
||
| /** | ||
| * When CxC begins. | ||
| * | ||
| * The offset is explicit on purpose: without it, the target would be parsed in | ||
| * the viewer's own timezone and the countdown would read differently in | ||
| * Waterloo than in Vancouver. | ||
| * |
There was a problem hiding this comment.
remove these comments and keep just the todo comment
| * Countdown to the start of CxC. | |
| * | |
| * Pure date math, no React and no dependencies, so it can be unit tested and | |
| * reused anywhere the timer shows up. | |
| */ | |
| /** | |
| * When CxC begins. | |
| * | |
| * The offset is explicit on purpose: without it, the target would be parsed in | |
| * the viewer's own timezone and the countdown would read differently in | |
| * Waterloo than in Vancouver. | |
| * |
| /** | ||
| * Time left between `now` and `target`, clamped at zero. | ||
| * | ||
| * `now` is a parameter rather than an internal `new Date()` so callers control | ||
| * the clock — the component passes the real one, a test passes a fixed one. | ||
| */ |
There was a problem hiding this comment.
this comment block can be simplified too
| }: { | ||
| /** ISO string with an explicit UTC offset. */ | ||
| target?: string; | ||
| className?: string; | ||
| }) { |
There was a problem hiding this comment.
define this prop as a distinct interface
| /** | ||
| * The countdown, built to drop into the slot {@link DossierPanel} occupies. | ||
| * | ||
| * NOT RENDERED YET. It is staged here so that the moment the application | ||
| * release date is confirmed, swapping it in is a two-line change in | ||
| * `ComingSoon.tsx` — the import, and `<DossierPanel />` → `<CountdownPanel />`. | ||
| * It keeps the dossier card's `max-w-4xl` width so the swap moves nothing else | ||
| * on the page. | ||
| * | ||
| * The unit styling reproduces the Figma countdown frame: a SMOKE card holding | ||
| * the numeral, a white caret, then a bordered label strip, stacked with 10px | ||
| * gaps. Unlike the Figma frame it is fluid rather than pinned at 173px wide, | ||
| * because here it has to share a page that scales — the card keeps the design's | ||
| * 173:224 proportions instead. | ||
| */ |
There was a problem hiding this comment.
none of this is needed in the codebase
|
Overall, the component looks good, I think the countdown logic can be simplified down to a single hook in // lib/hooks/useCountdown.ts
export function useCountdown(...): ... {
// get target time
// ...
// compute time remaining and return
}in place of also in the home page, add a gate so that when |
Closes Issue
closes #22
Changes Made
Additional Notes/Screenshots/Videos (Optional)