Michael/CollectFlow
1
0 Fork 0
mirror of https://github.com/R0m1k3/CollectFlow.git synced 2026-10-17 12:19:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add HeatmapCell component and Apple-inspired global design system with dark/light mode support.

Browse Source
This commit is contained in:
Michael committed 2026-02-26 15:54:47 +01:00
1 parent 174b7fa36c
commit 3438d1b35d
3 files changed
+104 -51
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/features/grid/components/heatmap-cell.tsx
+8 -11
View File
@@ -4,25 +4,22 @@ interface HeatmapCellProps {
value: number | null;
}
function getHeatmapStyle(value: number | null): { background: string; color: string } {
if (value === null || value === 0) {
return { background: "var(--bg-elevated)", color: "var(--text-muted)" };
}
function getHeatmapClass(value: number | null): string {
if (value === null || value === 0) return "heatmap-zero";
const abs = Math.abs(value);
if (abs > 100) return { background: "rgba(45,212,191,0.22)", color: "var(--accent)" };
if (abs > 30) return { background: "rgba(45,212,191,0.14)", color: "var(--accent)" };
if (abs > 10) return { background: "rgba(45,212,191,0.08)", color: "var(--accent)" };
return { background: "var(--bg-elevated)", color: "var(--text-secondary)" };
if (abs > 100) return "heatmap-high";
if (abs > 30) return "heatmap-mid";
if (abs > 10) return "heatmap-low";
return "heatmap-zero";
}
export function HeatmapCell({ value }: HeatmapCellProps) {
const style = getHeatmapStyle(value);
const heatClass = getHeatmapClass(value);
const display = value === null || value === 0 ? "—" : Math.round(Math.abs(value)).toString();
return (
<div
className="rounded text-center text-[12px] tabular-nums px-0.5 py-0.5 font-bold tracking-tighter transition-colors min-h-[24px] flex items-center justify-center font-mono-nums"
style={style}
className={`rounded text-center text-[12px] tabular-nums px-0.5 py-0.5 font-bold tracking-tighter transition-colors min-h-[24px] flex items-center justify-center font-mono-nums ${heatClass}`}
title={value !== null ? `${Math.abs(value).toLocaleString("fr-FR")} unités` : "Aucune vente"}
>
{display}