Initial commit for Start9 packaging
This commit is contained in:
MacPro
@@ -0,0 +1,256 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Exercise } from "@prisma/client";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
const EXERCISE_TYPES = [
|
||||
"barbell",
|
||||
"dumbbell",
|
||||
"machine",
|
||||
"cable",
|
||||
"bodyweight",
|
||||
"cardio",
|
||||
"kettlebell",
|
||||
"other",
|
||||
];
|
||||
|
||||
const MUSCLE_GROUPS = [
|
||||
"chest",
|
||||
"back",
|
||||
"shoulders",
|
||||
"biceps",
|
||||
"triceps",
|
||||
"forearms",
|
||||
"quads",
|
||||
"hamstrings",
|
||||
"glutes",
|
||||
"calves",
|
||||
"core",
|
||||
"cardio",
|
||||
];
|
||||
|
||||
const INPUT_FIELD_OPTIONS = [
|
||||
{ value: "sets", label: "Sets" },
|
||||
{ value: "reps", label: "Reps" },
|
||||
{ value: "weight", label: "Weight" },
|
||||
{ value: "duration", label: "Duration" },
|
||||
{ value: "distance", label: "Distance" },
|
||||
{ value: "calories", label: "Calories" },
|
||||
];
|
||||
|
||||
interface AddExerciseFormProps {
|
||||
onExerciseAdded: (exercise: Exercise) => void;
|
||||
}
|
||||
|
||||
export default function AddExerciseForm({
|
||||
onExerciseAdded,
|
||||
}: AddExerciseFormProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
type: "barbell",
|
||||
muscleGroups: [] as string[],
|
||||
inputFields: ["sets", "reps", "weight"] as string[],
|
||||
description: "",
|
||||
});
|
||||
|
||||
const handleMuscleGroupToggle = (group: string) => {
|
||||
setFormData((prev) => {
|
||||
const groups = prev.muscleGroups.includes(group)
|
||||
? prev.muscleGroups.filter((g) => g !== group)
|
||||
: [...prev.muscleGroups, group];
|
||||
return { ...prev, muscleGroups: groups };
|
||||
});
|
||||
};
|
||||
|
||||
const handleInputFieldToggle = (field: string) => {
|
||||
setFormData((prev) => {
|
||||
const fields = prev.inputFields.includes(field)
|
||||
? prev.inputFields.filter((f) => f !== field)
|
||||
: [...prev.inputFields, field];
|
||||
return { ...prev, inputFields: fields };
|
||||
});
|
||||
};
|
||||
|
||||
// Auto-set sensible input fields when type changes
|
||||
const handleTypeChange = (type: string) => {
|
||||
let defaultFields = ["sets", "reps", "weight"];
|
||||
if (type === "cardio") {
|
||||
defaultFields = ["sets", "duration", "calories"];
|
||||
} else if (type === "bodyweight") {
|
||||
defaultFields = ["sets", "reps"];
|
||||
}
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
type,
|
||||
inputFields: defaultFields,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/exercises", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
name: formData.name,
|
||||
type: formData.type,
|
||||
muscleGroups: formData.muscleGroups,
|
||||
inputFields: formData.inputFields,
|
||||
description: formData.description || undefined,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || "Failed to add exercise");
|
||||
}
|
||||
|
||||
const exercise = await response.json();
|
||||
onExerciseAdded(exercise);
|
||||
|
||||
setFormData({
|
||||
name: "",
|
||||
type: "barbell",
|
||||
muscleGroups: [],
|
||||
inputFields: ["sets", "reps", "weight"],
|
||||
description: "",
|
||||
});
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "An error occurred");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
{error && (
|
||||
<div className="bg-red-900/50 border border-red-800 rounded-lg p-3 text-red-400 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">
|
||||
Exercise Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(e) =>
|
||||
setFormData((prev) => ({ ...prev, name: e.target.value }))
|
||||
}
|
||||
className="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-white/20"
|
||||
placeholder="e.g., Barbell Bench Press"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Equipment */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">
|
||||
Equipment
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{EXERCISE_TYPES.map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
type="button"
|
||||
onClick={() => handleTypeChange(type)}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition ${
|
||||
formData.type === type
|
||||
? "bg-white text-black"
|
||||
: "bg-zinc-800 text-zinc-400 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{type.charAt(0).toUpperCase() + type.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Input Fields */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-zinc-400 uppercase tracking-wider mb-1">
|
||||
Tracked Fields
|
||||
</label>
|
||||
<p className="text-xs text-zinc-600 mb-2">
|
||||
What data do you log for this exercise?
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{INPUT_FIELD_OPTIONS.map((field) => (
|
||||
<button
|
||||
key={field.value}
|
||||
type="button"
|
||||
onClick={() => handleInputFieldToggle(field.value)}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition ${
|
||||
formData.inputFields.includes(field.value)
|
||||
? "bg-white text-black"
|
||||
: "bg-zinc-800 text-zinc-400 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{field.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Muscle Groups */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">
|
||||
Muscle Groups
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{MUSCLE_GROUPS.map((group) => (
|
||||
<button
|
||||
key={group}
|
||||
type="button"
|
||||
onClick={() => handleMuscleGroupToggle(group)}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition ${
|
||||
formData.muscleGroups.includes(group)
|
||||
? "bg-white text-black"
|
||||
: "bg-zinc-800 text-zinc-400 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{group.charAt(0).toUpperCase() + group.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">
|
||||
Description (optional)
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.description}
|
||||
onChange={(e) =>
|
||||
setFormData((prev) => ({ ...prev, description: e.target.value }))
|
||||
}
|
||||
className="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-white/20 resize-none"
|
||||
placeholder="Notes about form, tips, or variations..."
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !formData.name}
|
||||
className="w-full bg-white hover:bg-zinc-200 disabled:bg-zinc-700 disabled:text-zinc-500 text-black font-bold py-3 px-4 rounded-lg transition flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading && <Loader2 className="w-4 h-4 animate-spin" />}
|
||||
{loading ? "Adding..." : "Add Exercise"}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
|
||||
import { Exercise } from "@prisma/client";
|
||||
import Link from "next/link";
|
||||
import { Dumbbell } from "lucide-react";
|
||||
|
||||
const TYPE_COLORS: Record<string, string> = {
|
||||
barbell: "bg-red-900/50 text-red-400",
|
||||
dumbbell: "bg-blue-900/50 text-blue-400",
|
||||
machine: "bg-purple-900/50 text-purple-400",
|
||||
cable: "bg-amber-900/50 text-amber-400",
|
||||
bodyweight: "bg-green-900/50 text-green-400",
|
||||
cardio: "bg-orange-900/50 text-orange-400",
|
||||
kettlebell: "bg-yellow-900/50 text-yellow-400",
|
||||
other: "bg-zinc-800 text-zinc-400",
|
||||
};
|
||||
|
||||
export default function ExerciseCard({ exercise }: { exercise: Exercise }) {
|
||||
const muscleGroups = JSON.parse(exercise.muscleGroups || "[]") as string[];
|
||||
const typeColor = TYPE_COLORS[exercise.type] || TYPE_COLORS.other;
|
||||
|
||||
return (
|
||||
<Link href={`/main/exercises/${exercise.id}`}>
|
||||
<div className="bg-zinc-900 border border-zinc-800 rounded-lg hover:border-zinc-700 transition p-4 h-full flex flex-col cursor-pointer">
|
||||
<div className="flex items-start gap-3 mb-3">
|
||||
<div className="bg-zinc-800 p-2 rounded-lg">
|
||||
<Dumbbell className="w-5 h-5 text-zinc-400" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-white truncate">
|
||||
{exercise.name}
|
||||
</h3>
|
||||
<div
|
||||
className={`inline-block mt-1 px-2 py-0.5 rounded text-xs font-medium ${typeColor}`}
|
||||
>
|
||||
{exercise.type.charAt(0).toUpperCase() + exercise.type.slice(1)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{exercise.description && (
|
||||
<p className="text-sm text-zinc-500 mb-3 line-clamp-2">
|
||||
{exercise.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{muscleGroups.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-auto">
|
||||
{muscleGroups.slice(0, 3).map((group) => (
|
||||
<span
|
||||
key={group}
|
||||
className="inline-block px-2 py-0.5 bg-zinc-800 text-zinc-400 rounded text-xs"
|
||||
>
|
||||
{group.charAt(0).toUpperCase() + group.slice(1)}
|
||||
</span>
|
||||
))}
|
||||
{muscleGroups.length > 3 && (
|
||||
<span className="inline-block px-2 py-0.5 bg-zinc-800 text-zinc-500 rounded text-xs">
|
||||
+{muscleGroups.length - 3}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { Search, Plus, Loader2, Dumbbell, X } from "lucide-react";
|
||||
import ExerciseCard from "@/components/exercises/ExerciseCard";
|
||||
import AddExerciseForm from "@/components/exercises/AddExerciseForm";
|
||||
import { Exercise } from "@prisma/client";
|
||||
import { scoreExercise } from "@/lib/exerciseSearch";
|
||||
|
||||
export default function ExercisesClient() {
|
||||
const [exercises, setExercises] = useState<Exercise[]>([]);
|
||||
const [filteredExercises, setFilteredExercises] = useState<Exercise[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [selectedMuscleGroup, setSelectedMuscleGroup] = useState<string | null>(
|
||||
null
|
||||
);
|
||||
const [selectedType, setSelectedType] = useState<string | null>(null);
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
|
||||
// Build filter tags dynamically from all exercises
|
||||
const muscleGroups = useMemo(() => {
|
||||
const set = new Set<string>();
|
||||
for (const ex of exercises) {
|
||||
try {
|
||||
const groups = JSON.parse(ex.muscleGroups || "[]") as string[];
|
||||
groups.forEach((g) => set.add(g.toLowerCase()));
|
||||
} catch {}
|
||||
}
|
||||
return Array.from(set).sort();
|
||||
}, [exercises]);
|
||||
|
||||
const equipmentTypes = useMemo(() => {
|
||||
const set = new Set<string>();
|
||||
for (const ex of exercises) {
|
||||
if (ex.type) set.add(ex.type.toLowerCase());
|
||||
}
|
||||
return Array.from(set).sort();
|
||||
}, [exercises]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchExercises = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/exercises");
|
||||
const data = await response.json();
|
||||
setExercises(data);
|
||||
setFilteredExercises(data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch exercises:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchExercises();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let filtered = exercises;
|
||||
|
||||
// Apply muscle group filter
|
||||
if (selectedMuscleGroup) {
|
||||
filtered = filtered.filter((ex) => {
|
||||
try {
|
||||
const muscleGroups = JSON.parse(ex.muscleGroups || "[]");
|
||||
return muscleGroups.includes(selectedMuscleGroup);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Apply equipment type filter
|
||||
if (selectedType) {
|
||||
filtered = filtered.filter(
|
||||
(ex) => ex.type?.toLowerCase() === selectedType
|
||||
);
|
||||
}
|
||||
|
||||
// Apply fuzzy search with abbreviation expansion
|
||||
if (searchQuery.trim()) {
|
||||
filtered = filtered
|
||||
.map((ex) => ({ exercise: ex, score: scoreExercise(searchQuery, ex.name) }))
|
||||
.filter((item) => item.score >= 0)
|
||||
.sort((a, b) => a.score - b.score)
|
||||
.map((item) => item.exercise);
|
||||
} else {
|
||||
filtered = filtered.sort((a, b) => a.name.localeCompare(b.name));
|
||||
}
|
||||
|
||||
setFilteredExercises(filtered);
|
||||
}, [searchQuery, selectedMuscleGroup, selectedType, exercises]);
|
||||
|
||||
const handleExerciseAdded = (newExercise: Exercise) => {
|
||||
setExercises([...exercises, newExercise]);
|
||||
setShowAddForm(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 py-6 sm:px-6">
|
||||
{/* Controls */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-6">
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-3 w-5 h-5 text-zinc-500" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search exercises..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10 pr-10 py-2.5 bg-zinc-900 border border-zinc-800 rounded-lg text-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-white/20"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchQuery("")}
|
||||
className="absolute right-3 top-3 p-0.5 rounded text-zinc-500 hover:text-white transition-colors"
|
||||
aria-label="Clear search"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowAddForm(!showAddForm)}
|
||||
className="bg-white hover:bg-zinc-200 text-black font-medium py-2.5 px-4 rounded-lg flex items-center justify-center gap-2 transition"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
Add Exercise
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Add Exercise Form */}
|
||||
{showAddForm && (
|
||||
<div className="bg-zinc-900 border border-zinc-800 rounded-lg p-6 mb-6">
|
||||
<h2 className="text-lg font-bold text-white mb-4">
|
||||
Add Custom Exercise
|
||||
</h2>
|
||||
<AddExerciseForm onExerciseAdded={handleExerciseAdded} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Equipment Type Filter */}
|
||||
<div className="mb-3 flex flex-wrap gap-2">
|
||||
<span className="text-xs text-zinc-600 uppercase tracking-wider self-center mr-1">Equipment</span>
|
||||
{equipmentTypes.map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() =>
|
||||
setSelectedType(selectedType === type ? null : type)
|
||||
}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition ${
|
||||
selectedType === type
|
||||
? "bg-white text-black"
|
||||
: "bg-zinc-900 text-zinc-400 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{type.charAt(0).toUpperCase() + type.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Muscle Group Filter */}
|
||||
<div className="mb-6 flex flex-wrap gap-2">
|
||||
<span className="text-xs text-zinc-600 uppercase tracking-wider self-center mr-1">Muscle</span>
|
||||
{muscleGroups.map((group) => (
|
||||
<button
|
||||
key={group}
|
||||
onClick={() =>
|
||||
setSelectedMuscleGroup(
|
||||
selectedMuscleGroup === group ? null : group
|
||||
)
|
||||
}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition ${
|
||||
selectedMuscleGroup === group
|
||||
? "bg-white text-black"
|
||||
: "bg-zinc-900 text-zinc-400 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{group.charAt(0).toUpperCase() + group.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="w-6 h-6 text-zinc-500 animate-spin" />
|
||||
</div>
|
||||
) : filteredExercises.length === 0 ? (
|
||||
<div className="bg-zinc-900 border border-zinc-800 rounded-lg p-12 text-center">
|
||||
<Dumbbell className="w-12 h-12 text-zinc-700 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-semibold text-white mb-2">
|
||||
No exercises found
|
||||
</h3>
|
||||
<p className="text-zinc-500">
|
||||
{searchQuery || selectedMuscleGroup || selectedType
|
||||
? "Try adjusting your filters"
|
||||
: "Add your first exercise to get started"}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{filteredExercises.map((exercise) => (
|
||||
<ExerciseCard key={exercise.id} exercise={exercise} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user