build: b0d8399f-81d7-4ccc-8711-0f8b1506676e

2026-06-20 01:45:23 +00:00
commit ee7cfdfeaa
140 changed files with 12958 additions and 0 deletions
@@ -0,0 +1,97 @@
+import React from 'react';
+import { IonIcon } from '@ionic/react';
+
+interface DashboardMetricCardProps {
+  label: string;
+  value: string;
+  hint: string;
+  icon: string;
+  onClick?: () => void;
+}
+
+const DashboardMetricCard: React.FC<DashboardMetricCardProps> = ({
+  label,
+  value,
+  hint,
+  icon,
+  onClick,
+}) => {
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        background: 'var(--color-surface)',
+        borderRadius: '24px',
+        padding: '20px',
+        flex: '1',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+        cursor: onClick ? 'pointer' : 'default',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'flex-start',
+          gap: '12px',
+        }}
+      >
+        <span
+          style={{
+            fontSize: '12px',
+            fontWeight: '700',
+            color: 'var(--color-text-tertiary)',
+            textTransform: 'uppercase',
+            letterSpacing: '0.05em',
+          }}
+        >
+          {label}
+        </span>
+        <div
+          style={{
+            width: '36px',
+            height: '36px',
+            borderRadius: '12px',
+            background: 'var(--color-brand-medium)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+          }}
+        >
+          <IonIcon
+            icon={icon}
+            style={{ color: 'var(--color-brand)', fontSize: '18px' }}
+          />
+        </div>
+      </div>
+      <div>
+        <div
+          style={{
+            fontSize: '28px',
+            fontWeight: '400',
+            color: 'var(--color-text-primary)',
+            lineHeight: '1',
+            fontVariantNumeric: 'tabular-nums',
+          }}
+        >
+          {value}
+        </div>
+        <div
+          style={{
+            fontSize: '12px',
+            fontWeight: '400',
+            color: 'var(--color-text-secondary)',
+            marginTop: '8px',
+          }}
+        >
+          {hint}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardMetricCard;