feat: display current date in timeline slider

This commit is contained in:
Gwadaking
2026-04-01 23:31:34 -04:00
parent 438a1fc392
commit e8e82c4b5a
2 changed files with 22 additions and 1 deletions

View File

@@ -24,6 +24,21 @@
transition: background .15s, color .15s; transition: background .15s, color .15s;
white-space: nowrap; white-space: nowrap;
} }
.timeline__date {
padding: 6px 10px;
color: #64748b;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
letter-spacing: 0.02em;
}
.timeline__separator {
width: 1px;
background: #334155;
margin: 4px 0;
}
.timeline__step:hover { background: #334155; color: #f1f5f9; } .timeline__step:hover { background: #334155; color: #f1f5f9; }
.timeline__step--active { .timeline__step--active {
background: #0ea5e9; background: #0ea5e9;

View File

@@ -8,10 +8,16 @@ const STEPS = [
{ value: 'h48', label: '+48h' }, { value: 'h48', label: '+48h' },
]; ];
const formatDate = () => new Date().toLocaleDateString('fr-FR', {
day: '2-digit', month: 'short', year: 'numeric',
});
export default function TimelineSlider({ activeStep, onChange }) { export default function TimelineSlider({ activeStep, onChange }) {
return ( return (
<div className="timeline"> <div className="timeline">
{STEPS.map((step, i) => ( <span className="timeline__date">{formatDate()}</span>
<div className="timeline__separator" />
{STEPS.map((step) => (
<button <button
key={step.value} key={step.value}
className={`timeline__step ${activeStep === step.value ? 'timeline__step--active' : ''}`} className={`timeline__step ${activeStep === step.value ? 'timeline__step--active' : ''}`}