feat: display current date in timeline slider
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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' : ''}`}
|
||||||
|
|||||||
Reference in New Issue
Block a user