build: 55712324-398e-4334-a254-fc30c84b2e47

2026-05-28 20:27:15 +00:00
commit 67515ba9a6
109 changed files with 11130 additions and 0 deletions
@@ -0,0 +1,47 @@
+import React from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+interface StatsHabitCardProps {
+  name: string;
+  color: string;
+  completedCount: number;
+  totalDays: number;
+  streak: number;
+}
+
+const StatsHabitCard: React.FC<StatsHabitCardProps> = ({
+  name,
+  color,
+  completedCount,
+  totalDays,
+  streak,
+}) => {
+  const ratio = totalDays > 0 ? completedCount / totalDays : 0;
+  const percentage = Math.round(ratio * 100);
+
+  return (
+    <div className="stats-card">
+      <div className="stats-card-header">
+        <div>
+          <h3>{name}</h3>
+          <p>
+            {completedCount} of {totalDays} days completed
+          </p>
+        </div>
+        <div className="stats-streak-badge" style={{ color }}>
+          {streak}🔥
+        </div>
+      </div>
+      <IonProgressBar
+        value={ratio}
+        style={{ '--progress-background': color } as React.CSSProperties}
+      />
+      <div className="stats-card-footer">
+        <span>{percentage}% consistency</span>
+        <span>Current streak {streak}</span>
+      </div>
+    </div>
+  );
+};
+
+export default StatsHabitCard;