Add src/app/exercise-log/page.tsx

2026-04-26 19:54:23 +00:00
parent 25aa43304f
commit feb7d95661
1 changed files with 83 additions and 0 deletions
--- a/src/app/exercise-log/page.tsx
+++ b/src/app/exercise-log/page.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Dumbbell, Plus, Trash2 } from "lucide-react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ReactLenis from "lenis/react";
+
+export default function ExerciseLogPage() {
+  const [entries, setEntries] = useState([{ id: Date.now(), exercise: "", weight: "" }]);
+
+  const addEntry = () => {
+    setEntries([...entries, { id: Date.now(), exercise: "", weight: "" }]);
+  };
+
+  const removeEntry = (id: number) => {
+    setEntries(entries.filter((e) => e.id !== id));
+  };
+
+  const updateEntry = (id: number, field: string, value: string) => {
+    setEntries(entries.map((e) => e.id === id ? { ...e, [field]: value } : e));
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="mediumLarge"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Tracker", id: "/exercise-log" },
+          ]}
+          brandName="IRONTRACK"
+        />
+        <div className="min-h-screen pt-32 pb-20 px-6 max-w-3xl mx-auto">
+          <h1 className="text-4xl font-bold mb-8 flex items-center gap-3">
+            <Dumbbell className="w-8 h-8" /> Exercise Log
+          </h1>
+          <div className="space-y-4">
+            {entries.map((entry) => (
+              <div key={entry.id} className="flex items-center gap-4 p-4 border rounded-xl bg-card">
+                <Dumbbell className="w-6 h-6 text-primary" />
+                <input
+                  type="text"
+                  placeholder="Exercise name"
+                  className="flex-1 bg-transparent border-b outline-none py-1"
+                  value={entry.exercise}
+                  onChange={(e) => updateEntry(entry.id, "exercise", e.target.value)}
+                />
+                <input
+                  type="number"
+                  placeholder="kg"
+                  className="w-20 bg-transparent border-b outline-none py-1"
+                  value={entry.weight}
+                  onChange={(e) => updateEntry(entry.id, "weight", e.target.value)}
+                />
+                <button onClick={() => removeEntry(entry.id)} className="text-destructive">
+                  <Trash2 className="w-5 h-5" />
+                </button>
+              </div>
+            ))}
+            <button
+              onClick={addEntry}
+              className="w-full py-3 flex items-center justify-center gap-2 border-2 border-dashed rounded-xl hover:bg-accent/10 transition-all"
+            >
+              <Plus className="w-5 h-5" /> Add Exercise
+            </button>
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}