75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
// components/KpiTop.tsx
|
|
import React from "react";
|
|
|
|
type Props = {
|
|
month?: string;
|
|
yieldKwh: number;
|
|
consumptionKwh: number;
|
|
gridDrawKwh: number;
|
|
};
|
|
|
|
const Card: React.FC<{ title: string; value: string; accent?: boolean; icon?: React.ReactNode }> = ({
|
|
title,
|
|
value,
|
|
accent,
|
|
icon,
|
|
}) => (
|
|
<div
|
|
className={`rounded-xl p-4 md:p-5 shadow-sm
|
|
${accent
|
|
? "bg-[#fcd913] text-black"
|
|
: "bg-white text-gray-900 dark:bg-rtgray-800 dark:text-white"}`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="shrink-0 text-black dark:text-white">
|
|
{icon}
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-lg font-bold opacity-80">{title}</div>
|
|
<div className="text-2xl font-semibold">{value}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
|
|
export default function KpiTop({ month, yieldKwh, consumptionKwh, gridDrawKwh }: Props) {
|
|
return (
|
|
<section aria-label="Top KPIs" className="space-y-3">
|
|
{month && <div className="text-xs dark:text-[#9aa4b2]">{month}</div>}
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
|
<Card
|
|
title="Monthly Yield"
|
|
value={`${yieldKwh.toLocaleString()} kWh`}
|
|
icon={
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
|
<circle cx="12" cy="12" r="4" stroke="#fcd913" strokeWidth="2" />
|
|
<path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" stroke="#fcd913" strokeWidth="2" />
|
|
</svg>
|
|
}
|
|
/>
|
|
<Card
|
|
title="Monthly Consumption"
|
|
value={`${consumptionKwh.toLocaleString()} kWh`}
|
|
icon={
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
|
<rect x="8" y="3" width="8" height="12" rx="2" stroke="currentColor" strokeWidth="2" />
|
|
<path d="M12 15v6" stroke="#fcd913" strokeWidth="2" />
|
|
</svg>
|
|
}
|
|
/>
|
|
<Card
|
|
title="Monthly Grid Draw"
|
|
value={`${gridDrawKwh.toLocaleString()} kWh`}
|
|
icon={
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
|
<path d="M5 21h14M7 21l5-18 5 18" stroke="currentColor" strokeWidth="2" />
|
|
<path d="M14 8l2 2" stroke="#fcd913" strokeWidth="2" />
|
|
</svg>
|
|
}
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|