feat: display current date in timeline slider
This commit is contained in:
@@ -24,6 +24,21 @@
|
||||
transition: background .15s, color .15s;
|
||||
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--active {
|
||||
background: #0ea5e9;
|
||||
|
||||
@@ -8,10 +8,16 @@ const STEPS = [
|
||||
{ value: 'h48', label: '+48h' },
|
||||
];
|
||||
|
||||
const formatDate = () => new Date().toLocaleDateString('fr-FR', {
|
||||
day: '2-digit', month: 'short', year: 'numeric',
|
||||
});
|
||||
|
||||
export default function TimelineSlider({ activeStep, onChange }) {
|
||||
return (
|
||||
<div className="timeline">
|
||||
{STEPS.map((step, i) => (
|
||||
<span className="timeline__date">{formatDate()}</span>
|
||||
<div className="timeline__separator" />
|
||||
{STEPS.map((step) => (
|
||||
<button
|
||||
key={step.value}
|
||||
className={`timeline__step ${activeStep === step.value ? 'timeline__step--active' : ''}`}
|
||||
|
||||
Reference in New Issue
Block a user