Merge version_4 into main #9
58
src/app/calendar/page.tsx
Normal file
58
src/app/calendar/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -72,21 +72,21 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Weight Logging", description: "Quickly input weight and reps for every set.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/trainer-helping-beginner-gym_23-2149561882.jpg?_wi=1", imageAlt: "mobile app ui gym" },
|
||||
title: "Muscle Group Filter", description: "Categorize your training by Shoulders, Chest, Biceps, Triceps, Quads, and Hamstrings.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/trainer-helping-beginner-gym_23-2149561882.jpg?_wi=1", imageAlt: "mobile app ui gym" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-athlete-using-mobile-phone-stadium_23-2148162126.jpg", imageAlt: "mobile app ui gym" },
|
||||
},
|
||||
{
|
||||
title: "Progress Metrics", description: "Visualise your strength trends over months.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/fitness-woman-doing-yoga-with-mobile-app_23-2148952553.jpg", imageAlt: "mobile app ui gym" },
|
||||
title: "Progress Metrics", description: "Visualise your strength trends over months.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/fitness-woman-doing-yoga-with-mobile-app_23-2148952553.jpg", imageAlt: "mobile app ui gym" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/woman-with-smartphone-gym_23-2147688130.jpg", imageAlt: "mobile app ui gym" },
|
||||
},
|
||||
{
|
||||
title: "Muscle Mapping", description: "Keep tabs on volume per muscle group.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/woman-gym-with-smartphone-template_23-2148111597.jpg", imageAlt: "mobile app ui gym" },
|
||||
title: "Muscle Mapping", description: "Keep tabs on volume per muscle group.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/woman-gym-with-smartphone-template_23-2148111597.jpg", imageAlt: "mobile app ui gym" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169856.jpg", imageAlt: "mobile app ui gym" },
|
||||
},
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
title="Comprehensive Tracking"
|
||||
description="Never wonder what your PR is again. Track your compound lifts and isolated movements with precision."
|
||||
title="Categorized Tracking"
|
||||
description="Organize your lifts by specific muscle groups for better data insights and targeted growth."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -97,17 +97,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "p1", title: "Push Day", price: "Mon/Thu", period: "Focus", features: ["Chest", "Shoulders", "Triceps"],
|
||||
id: "p1", title: "Push Day", price: "Mon/Thu", period: "Focus", features: ["Chest", "Shoulders", "Triceps"],
|
||||
button: { text: "View Routine" },
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-fit-woman-holding-device_23-2149168693.jpg", imageAlt: "workout calendar app"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-fit-woman-holding-device_23-2149168693.jpg", imageAlt: "workout calendar app"},
|
||||
{
|
||||
id: "p2", title: "Pull Day", price: "Tue/Fri", period: "Focus", features: ["Back", "Biceps", "Rear Delts"],
|
||||
id: "p2", title: "Pull Day", price: "Tue/Fri", period: "Focus", features: ["Back", "Biceps", "Rear Delts"],
|
||||
button: { text: "View Routine" },
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/silhouette-man-gym_23-2148024303.jpg?_wi=2", imageAlt: "workout calendar app"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/silhouette-man-gym_23-2148024303.jpg?_wi=2", imageAlt: "workout calendar app"},
|
||||
{
|
||||
id: "p3", title: "Leg Day", price: "Wed/Sat", period: "Focus", features: ["Quads", "Hamstrings", "Calves"],
|
||||
id: "p3", title: "Leg Day", price: "Wed/Sat", period: "Focus", features: ["Quads", "Hamstrings", "Calves"],
|
||||
button: { text: "View Routine" },
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/trainer-helping-beginner-gym_23-2149561882.jpg?_wi=2", imageAlt: "workout calendar app"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/trainer-helping-beginner-gym_23-2149561882.jpg?_wi=2", imageAlt: "workout calendar app"},
|
||||
]}
|
||||
title="Training Calendar"
|
||||
description="Organize your split. A perfect visual guide for PPL, Upper/Lower, or Full Body splits."
|
||||
@@ -183,4 +183,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user