feat: build production-ready wtr weather PWA

components/weather/metric-card.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { motion } from "framer-motion";
+import type { LucideIcon } from "lucide-react";
+import { Card } from "@/components/ui/card";
+
+export function MetricCard({ icon: Icon, label, value, detail, index = 0 }: { icon: LucideIcon; label: string; value: string; detail?: string; index?: number }) {
+  return (
+    <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: index * 0.04, duration: 0.35 }}>
+      <Card className="h-full p-4 sm:p-5">
+        <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
+          <Icon className="size-4 text-sky-600 dark:text-sky-300" />
+          {label}
+        </div>
+        <p className="mt-4 text-xl font-semibold tracking-tight">{value}</p>
+        {detail && <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">{detail}</p>}
+      </Card>
+    </motion.div>
+  );
+}