Initial commit

components/HabitStreak.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { Habit } from '@/lib/types'
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
+
+interface HabitStreakProps {
+  habits: Habit[]
+}
+
+export default function HabitStreak({ habits }: HabitStreakProps) {
+  // Get the last 30 days of data
+  const dates = Array.from({ length: 30 }, (_, i) => {
+    const d = new Date()
+    d.setDate(d.getDate() - i)
+    return d.toISOString().split('T')[0]
+  }).reverse()
+
+  // Count completed habits per day
+  const completions = dates.map(date => ({
+    date: new Date(date).toLocaleDateString(),
+    completed: habits.filter(habit =>
+      habit.completions.includes(date)
+    ).length
+  }))
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Daily Habit Completion Streak</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="w-full aspect-[2/1]">
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart
+              data={completions}
+              margin={{
+                top: 5,
+                right: 30,
+                left: 20,
+                bottom: 5,
+              }}
+            >
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="date" />
+              <YAxis />
+              <Tooltip formatter={(value) => [`${value} habits`, 'Completed']} />
+              <Line
+                type="monotone"
+                dataKey="completed"
+                stroke="#14b8a6"
+                strokeWidth={2}
+                dot={false}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}