feat: add sleep report page

src/components/report/kv-list.tsx

@@ -0,0 +1,29 @@
+import { Text, View } from "@tarojs/components";
+import type { KvMetric } from "../../pages/report/types";
+import { getStatusTone } from "../../pages/report/report-utils";
+
+type ReportKvListProps = {
+  title: string;
+  items: KvMetric[];
+};
+
+export function ReportKvList({ title, items }: ReportKvListProps) {
+  return (
+    <View className="report-card">
+      <View className="report-card__header">
+        <Text className="report-card__title">{title}</Text>
+      </View>
+      <View className="kv-list">
+        {items.map((item) => (
+          <View className="kv-list__row" key={item.label}>
+            <Text className="kv-list__label">{item.label}</Text>
+            <View className="kv-list__value-wrap">
+              <Text className="kv-list__value">{item.value}</Text>
+              {item.status ? <Text className={`kv-list__status kv-list__status--${getStatusTone(item.status)}`}>{item.status}</Text> : null}
+            </View>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}