120 lines
3.9 KiB
TypeScript
120 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { type TapoDevice } from "../lib/getPower";
|
|
|
|
interface PowerCardProps {
|
|
device: TapoDevice | null;
|
|
label: string;
|
|
delay?: number;
|
|
toggling?: boolean;
|
|
onToggle?: (on: boolean) => void;
|
|
}
|
|
|
|
function powerColor(watts: number): string {
|
|
if (watts > 400) return "#ef4444";
|
|
if (watts > 200) return "#f59e0b";
|
|
return "#3b82f6";
|
|
}
|
|
|
|
export default function PowerCard({ device, label, delay = 0, toggling = false, onToggle }: PowerCardProps) {
|
|
const pct = device ? Math.min(100, (device.current_power_w / 500) * 100) : 0;
|
|
const runtimeHours = device ? Math.floor(device.today_runtime_min / 60) : 0;
|
|
const runtimeMins = device ? device.today_runtime_min % 60 : 0;
|
|
|
|
return (
|
|
<div
|
|
className="bg-white border border-gray-200 rounded-2xl p-5 flex flex-col shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 animate-fade-up"
|
|
style={{ animationDelay: `${delay}ms` }}
|
|
>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<span className="text-[0.68rem] font-medium tracking-widest uppercase text-gray-400">
|
|
{label}
|
|
</span>
|
|
{device ? (
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={`flex items-center gap-1.5 text-[0.62rem] font-medium uppercase tracking-widest ${
|
|
device.on ? "text-emerald-500" : "text-gray-400"
|
|
}`}
|
|
>
|
|
<span
|
|
className={`w-1.5 h-1.5 rounded-full ${
|
|
device.on ? "bg-emerald-400" : "bg-gray-300"
|
|
}`}
|
|
/>
|
|
{device.on ? "On" : "Off"}
|
|
</span>
|
|
{onToggle && (
|
|
<button
|
|
onClick={() => onToggle(!device.on)}
|
|
disabled={toggling}
|
|
className={`text-[0.6rem] font-medium uppercase tracking-widest px-2 py-0.5 rounded-full border transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
|
|
device.on
|
|
? "border-red-200 text-red-400 hover:bg-red-50"
|
|
: "border-emerald-200 text-emerald-500 hover:bg-emerald-50"
|
|
}`}
|
|
>
|
|
{toggling ? "···" : device.on ? "Turn off" : "Turn on"}
|
|
</button>
|
|
)}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
{device ? (
|
|
<>
|
|
<div className="flex items-baseline gap-1.5 mt-0.5">
|
|
<span className="text-3xl font-medium tracking-tight text-gray-900 leading-none">
|
|
{device.current_power_w.toFixed(1)}
|
|
</span>
|
|
<span className="text-base text-gray-400 font-medium">W</span>
|
|
</div>
|
|
<span className="text-[0.7rem] text-gray-400 mt-1 truncate">
|
|
{device.alias} · {device.model}
|
|
</span>
|
|
|
|
<div className="h-[3px] bg-gray-100 rounded-full mt-4 overflow-hidden">
|
|
<div
|
|
className="h-full rounded-full transition-all duration-700"
|
|
style={{
|
|
width: `${pct}%`,
|
|
background: powerColor(device.current_power_w),
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-2 mt-4 pt-4 border-t border-gray-100">
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-sm font-medium text-gray-900">
|
|
{(device.today_energy_wh / 1000).toFixed(3)}
|
|
<span className="text-gray-400 text-xs ml-0.5">kWh</span>
|
|
</span>
|
|
<span className="text-[0.62rem] uppercase tracking-widest text-gray-400">
|
|
Today
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-sm font-medium text-gray-900">
|
|
{(device.month_energy_wh / 1000).toFixed(2)}
|
|
<span className="text-gray-400 text-xs ml-0.5">kWh</span>
|
|
</span>
|
|
<span className="text-[0.62rem] uppercase tracking-widest text-gray-400">
|
|
Month
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-sm font-medium text-gray-900">
|
|
{runtimeHours}h {runtimeMins}m
|
|
</span>
|
|
<span className="text-[0.62rem] uppercase tracking-widest text-gray-400">
|
|
Runtime
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="skeleton h-24 mt-2" />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|