Skip to content

Commit ea1a782

Browse files
crupcrup
committed
docs(docs): reuse timer row component
1 parent 16b953b commit ea1a782

File tree

1 file changed

+91
-67
lines changed

1 file changed

+91
-67
lines changed

‎docs-site/samples/recipes.tsx‎

Lines changed: 91 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -346,13 +346,12 @@ export function ManyDisplayCountdownsSample() {
346346
const remainingMs = Math.max(0, deadline - clock.now);
347347
const total = [12_000, 24_000, 36_000, 48_000][index];
348348
return (
349-
<div key={deadline} className="sample-row-card">
350-
<div>
351-
<strong>Lot {index + 1}</strong>
352-
<span>{formatClock(remainingMs)} left</span>
353-
</div>
354-
<Progress value={100 - (remainingMs / total) * 100} compact />
355-
</div>
349+
<SampleRow
350+
key={deadline}
351+
title={`Lot ${index + 1}`}
352+
meta={`${formatClock(remainingMs)} left`}
353+
progress={<Progress value={100 - (remainingMs / total) * 100} compact />}
354+
/>
356355
);
357356
})}
358357
</div>
@@ -379,18 +378,19 @@ export function TimerGroupSample() {
379378
const timer = timers.get(id);
380379
const total = [20_000, 30_000, 40_000][index];
381380
return (
382-
<div key={id} className="sample-row-card">
383-
<div>
384-
<strong>{id}</strong>
385-
<span>{timer ? formatElapsed(timer.elapsedMilliseconds) : 'removed'} · {timer?.status}</span>
386-
</div>
387-
<Progress value={timer ? Math.min(100, (timer.elapsedMilliseconds / total) * 100) : 0} compact tone={timer?.isEnded ? 'complete' : 'active'} />
388-
<div className="sample-mini-controls">
389-
<ActionButton onClick={() => timers.pause(id)} disabled={!timer?.isRunning} label="Pause" tone="secondary" small />
390-
<ActionButton onClick={() => timers.resume(id)} disabled={!timer?.isPaused} label="Resume" small />
391-
<ActionButton onClick={() => timers.restart(id)} label="Restart" small />
392-
</div>
393-
</div>
381+
<SampleRow
382+
key={id}
383+
title={id}
384+
meta={`${timer ? formatElapsed(timer.elapsedMilliseconds) : 'removed'} · ${timer?.status ?? '-'}`}
385+
progress={<Progress value={timer ? Math.min(100, (timer.elapsedMilliseconds / total) * 100) : 0} compact tone={timer?.isEnded ? 'complete' : 'active'} />}
386+
actions={
387+
<>
388+
<ActionButton onClick={() => timers.pause(id)} disabled={!timer?.isRunning} label="Pause" tone="secondary" small />
389+
<ActionButton onClick={() => timers.resume(id)} disabled={!timer?.isPaused} label="Resume" small />
390+
<ActionButton onClick={() => timers.restart(id)} label="Restart" small />
391+
</>
392+
}
393+
/>
394394
);
395395
})}
396396
</div>
@@ -411,12 +411,11 @@ export function GroupControlsSample() {
411411
{timers.ids.map(id => {
412412
const timer = timers.get(id);
413413
return (
414-
<div key={id} className="sample-row-card">
415-
<div>
416-
<strong>{id}</strong>
417-
<span>{timer?.status} · {timer ? formatElapsed(timer.elapsedMilliseconds) : '-'}</span>
418-
</div>
419-
</div>
414+
<SampleRow
415+
key={id}
416+
title={id}
417+
meta={`${timer?.status ?? '-'} · ${timer ? formatElapsed(timer.elapsedMilliseconds) : '-'}`}
418+
/>
420419
);
421420
})}
422421
</div>
@@ -454,18 +453,19 @@ export function CheckoutHoldsSample() {
454453
const timer = timers.get(hold.id);
455454
const remainingMs = Math.max(0, hold.durationMs - (timer?.elapsedMilliseconds ?? 0));
456455
return (
457-
<div key={hold.id} className="sample-row-card">
458-
<div>
459-
<strong>{hold.label}</strong>
460-
<span>{timer?.isEnded ? 'expired' : `${formatClock(remainingMs)} left`} · {timer?.status}</span>
461-
</div>
462-
<Progress value={100 - (remainingMs / hold.durationMs) * 100} compact tone={timer?.isEnded ? 'complete' : 'active'} />
463-
<div className="sample-mini-controls">
464-
<ActionButton onClick={() => timers.pause(hold.id)} disabled={!timer?.isRunning} label="Pause" small tone="secondary" />
465-
<ActionButton onClick={() => timers.resume(hold.id)} disabled={!timer?.isPaused} label="Resume" small />
466-
<ActionButton onClick={() => timers.restart(hold.id)} label="Extend" small />
467-
</div>
468-
</div>
456+
<SampleRow
457+
key={hold.id}
458+
title={hold.label}
459+
meta={`${timer?.isEnded ? 'expired' : `${formatClock(remainingMs)} left`} · ${timer?.status ?? '-'}`}
460+
progress={<Progress value={100 - (remainingMs / hold.durationMs) * 100} compact tone={timer?.isEnded ? 'complete' : 'active'} />}
461+
actions={
462+
<>
463+
<ActionButton onClick={() => timers.pause(hold.id)} disabled={!timer?.isRunning} label="Pause" small tone="secondary" />
464+
<ActionButton onClick={() => timers.resume(hold.id)} disabled={!timer?.isPaused} label="Resume" small />
465+
<ActionButton onClick={() => timers.restart(hold.id)} label="Extend" small />
466+
</>
467+
}
468+
/>
469469
);
470470
})}
471471
</div>
@@ -497,16 +497,17 @@ export function PerItemPollingSample() {
497497
{timers.ids.map(id => {
498498
const timer = timers.get(id);
499499
return (
500-
<div key={id} className="sample-row-card">
501-
<div>
502-
<strong>{id}</strong>
503-
<span>{checks[id] ?? 0} status checks · {timer?.status}</span>
504-
</div>
505-
<div className="sample-mini-controls">
506-
<ActionButton onClick={() => timers.pause(id)} disabled={!timer?.isRunning} label="Pause" small tone="secondary" />
507-
<ActionButton onClick={() => timers.resume(id)} disabled={!timer?.isPaused} label="Resume" small />
508-
</div>
509-
</div>
500+
<SampleRow
501+
key={id}
502+
title={id}
503+
meta={`${checks[id] ?? 0} status checks · ${timer?.status ?? '-'}`}
504+
actions={
505+
<>
506+
<ActionButton onClick={() => timers.pause(id)} disabled={!timer?.isRunning} label="Pause" small tone="secondary" />
507+
<ActionButton onClick={() => timers.resume(id)} disabled={!timer?.isPaused} label="Resume" small />
508+
</>
509+
}
510+
/>
510511
);
511512
})}
512513
</div>
@@ -531,13 +532,12 @@ export function DynamicItemsSample() {
531532
{timers.ids.map(id => {
532533
const timer = timers.get(id);
533534
return (
534-
<div key={id} className="sample-row-card">
535-
<div>
536-
<strong>{id}</strong>
537-
<span>{timer ? formatElapsed(timer.elapsedMilliseconds) : '-'} · {timer?.status}</span>
538-
</div>
539-
<ActionButton onClick={() => timers.remove(id)} label="Remove" small tone="secondary" />
540-
</div>
535+
<SampleRow
536+
key={id}
537+
title={id}
538+
meta={`${timer ? formatElapsed(timer.elapsedMilliseconds) : '-'} · ${timer?.status ?? '-'}`}
539+
actions={<ActionButton onClick={() => timers.remove(id)} label="Remove" small tone="secondary" />}
540+
/>
541541
);
542542
})}
543543
</div>
@@ -567,23 +567,24 @@ export function ToastAutoDismissSample() {
567567
return (
568568
<DemoShell eyebrow="Toast expiry" title={`${timers.size} visible`} status={timers.size ? 'running' : 'idle'}>
569569
<div className="sample-board">
570-
{timers.ids.length === 0 ? <p className="sample-muted">Add a toast and pause it like a hover interaction.</p> : null}
570+
{timers.ids.length === 0 ? <p className="sample-muted">Add a toast and pause its dismiss timer.</p> : null}
571571
{timers.ids.map(id => {
572572
const timer = timers.get(id);
573573
const remainingMs = Math.max(0, 5000 - (timer?.elapsedMilliseconds ?? 0));
574574
return (
575-
<div key={id} className="sample-row-card">
576-
<div>
577-
<strong>{id}</strong>
578-
<span>{formatClock(remainingMs)} before dismiss · {timer?.status}</span>
579-
</div>
580-
<Progress value={100 - (remainingMs / 5000) * 100} compact tone="warning" />
581-
<div className="sample-mini-controls">
582-
<ActionButton onClick={() => timers.pause(id)} disabled={!timer?.isRunning} label="Hover pause" small tone="secondary" />
583-
<ActionButton onClick={() => timers.resume(id)} disabled={!timer?.isPaused} label="Resume" small />
584-
<ActionButton onClick={() => timers.remove(id)} label="Dismiss" small tone="danger" />
585-
</div>
586-
</div>
575+
<SampleRow
576+
key={id}
577+
title={id}
578+
meta={`${formatClock(remainingMs)} before dismiss · ${timer?.status ?? '-'}`}
579+
progress={<Progress value={100 - (remainingMs / 5000) * 100} compact tone="warning" />}
580+
actions={
581+
<>
582+
<ActionButton onClick={() => timers.pause(id)} disabled={!timer?.isRunning} label="Pause dismiss" small tone="secondary" />
583+
<ActionButton onClick={() => timers.resume(id)} disabled={!timer?.isPaused} label="Resume" small />
584+
<ActionButton onClick={() => timers.remove(id)} label="Dismiss" small tone="danger" />
585+
</>
586+
}
587+
/>
587588
);
588589
})}
589590
</div>
@@ -627,6 +628,29 @@ function TimerControlsPanel({
627628
);
628629
}
629630

631+
function SampleRow({
632+
title,
633+
meta,
634+
progress,
635+
actions,
636+
}: {
637+
title: string;
638+
meta: string;
639+
progress?: React.ReactNode;
640+
actions?: React.ReactNode;
641+
}) {
642+
return (
643+
<div className="sample-row-card">
644+
<div>
645+
<strong>{title}</strong>
646+
<span>{meta}</span>
647+
</div>
648+
<div className="sample-row-card__progress">{progress}</div>
649+
<div className="sample-mini-controls">{actions}</div>
650+
</div>
651+
);
652+
}
653+
630654
function DemoShell({
631655
eyebrow,
632656
title,

0 commit comments

Comments
 (0)