Add src/app/calendar/page.tsx

src/app/calendar/page.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Calendar, Plus, Trash2, Edit } from "lucide-react";
+
+type Exercise = { id: string; name: string; reps: string; sets: string };
+type DayData = { [date: string]: Exercise[] };
+
+export default function CalendarPage() {
+  const [data, setData] = useState<DayData>({});
+  const [selectedDate, setSelectedDate] = useState<string>("2025-05-20");
+  const [newExercise, setNewExercise] = useState({ name: "", reps: "", sets: "" });
+
+  const addExercise = () => {
+    if (!newExercise.name) return;
+    setData(prev => ({
+      ...prev,
+      [selectedDate]: [...(prev[selectedDate] || []), { ...newExercise, id: Date.now().toString() }]
+    }));
+    setNewExercise({ name: "", reps: "", sets: "" });
+  };
+
+  return (
+    <ThemeProvider>
+      <div className="p-8 max-w-4xl mx-auto">
+        <h1 className="text-4xl font-bold mb-8 flex items-center gap-4"><Calendar /> Workout Calendar</h1>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div className="p-6 border rounded-lg">
+            <h2 className="text-xl font-semibold mb-4">Select Day: {selectedDate}</h2>
+            <div className="space-y-4">
+              <input 
+                className="w-full p-2 border rounded" 
+                placeholder="Exercise Name" 
+                value={newExercise.name} 
+                onChange={e => setNewExercise({...newExercise, name: e.target.value})}
+              />
+              <div className="grid grid-cols-2 gap-2">
+                <input className="p-2 border rounded" placeholder="Sets" value={newExercise.sets} onChange={e => setNewExercise({...newExercise, sets: e.target.value})} />
+                <input className="p-2 border rounded" placeholder="Reps" value={newExercise.reps} onChange={e => setNewExercise({...newExercise, reps: e.target.value})} />
+              </div>
+              <button onClick={addExercise} className="w-full bg-primary p-2 rounded text-white font-bold flex items-center justify-center gap-2"><Plus size={18}/> Add Exercise</button>
+            </div>
+          </div>
+          <div className="p-6 border rounded-lg">
+            <h2 className="text-xl font-semibold mb-4">Exercises for {selectedDate}</h2>
+            {(data[selectedDate] || []).map(ex => (
+              <div key={ex.id} className="flex justify-between p-3 border-b">
+                <span>{ex.name} - {ex.sets} sets x {ex.reps} reps</span>
+                <button onClick={() => setData(prev => ({...prev, [selectedDate]: prev[selectedDate].filter(i => i.id !== ex.id)}))}><Trash2 size={16} className="text-red-500"/></button>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}