syoul
7975abc619
ci/woodpecker/push/woodpecker Pipeline was successful
Nouveau mode animation accessible via "▶ Animer" dans le sélecteur de période. - useAnimation : hook gérant frames, lecture, vitesse, filtrage client - AnimationPlayer : barre de contrôle (play/pause, slider, ×1/×2/×4) - Granularité auto : 24 frames/h (24h), 7 frames/jour (7j), ~4 frames/semaine (30j) - Stats et heatmap mis à jour sur la fenêtre courante, zéro requête réseau supplémentaire Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
interface PeriodSelectorProps {
|
|
value: number;
|
|
onChange: (days: number) => void;
|
|
animationActive: boolean;
|
|
onAnimate: () => void;
|
|
}
|
|
|
|
const PERIODS = [
|
|
{ label: '24h', days: 1 },
|
|
{ label: '7 jours', days: 7 },
|
|
{ label: '30 jours', days: 30 },
|
|
];
|
|
|
|
export function PeriodSelector({ value, onChange, animationActive, onAnimate }: PeriodSelectorProps) {
|
|
return (
|
|
<div className="flex gap-1 bg-[#0f1016] border border-[#2e2f3a] rounded-lg p-1">
|
|
{PERIODS.map(({ label, days }) => (
|
|
<button
|
|
key={days}
|
|
onClick={() => onChange(days)}
|
|
className={`
|
|
px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer
|
|
${value === days
|
|
? 'bg-[#d4a843] text-[#0a0b0f] shadow-[0_0_12px_rgba(212,168,67,0.4)]'
|
|
: 'text-[#6b7280] hover:text-[#d4a843] hover:bg-[#1a1b23]'
|
|
}
|
|
`}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
<div className="w-px mx-1 bg-[#2e2f3a] self-stretch" />
|
|
<button
|
|
onClick={onAnimate}
|
|
className={`
|
|
px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer
|
|
${animationActive
|
|
? 'bg-[#d4a843] text-[#0a0b0f] shadow-[0_0_12px_rgba(212,168,67,0.4)]'
|
|
: 'text-[#6b7280] hover:text-[#d4a843] hover:bg-[#1a1b23]'
|
|
}
|
|
`}
|
|
>
|
|
▶ Animer
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|