MacPro
660 lines
24 KiB
TypeScript
660 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useParams, useRouter } from "next/navigation";
|
|
import Link from "next/link";
|
|
import { formatSetsSummary } from "@/lib/formatSets";
|
|
import {
|
|
ChevronLeft,
|
|
Loader,
|
|
Pencil,
|
|
Trash2,
|
|
Check,
|
|
X,
|
|
Dumbbell,
|
|
TrendingUp,
|
|
Calendar,
|
|
} from "lucide-react";
|
|
import { Exercise as PrismaExercise } from "@prisma/client";
|
|
|
|
// Extended type until Prisma client is regenerated with new fields
|
|
type Exercise = PrismaExercise & {
|
|
inputFields?: string;
|
|
defaultWeightUnit?: string | null;
|
|
};
|
|
|
|
const EXERCISE_TYPES = [
|
|
"barbell",
|
|
"dumbbell",
|
|
"machine",
|
|
"cable",
|
|
"bodyweight",
|
|
"cardio",
|
|
"kettlebell",
|
|
"other",
|
|
];
|
|
|
|
const MUSCLE_GROUPS = [
|
|
"chest",
|
|
"back",
|
|
"shoulders",
|
|
"quads",
|
|
"hamstrings",
|
|
"glutes",
|
|
"biceps",
|
|
"triceps",
|
|
"forearms",
|
|
"core",
|
|
"calves",
|
|
"full body",
|
|
"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" },
|
|
{ value: "notes", label: "Notes" },
|
|
];
|
|
|
|
interface WorkoutHistory {
|
|
workout: { id: string; date: string; name: string | null };
|
|
sets: Array<{
|
|
id: string;
|
|
setNumber: number;
|
|
reps: number | null;
|
|
weight: number | null;
|
|
weightUnit: string;
|
|
rpe: number | null;
|
|
durationSeconds: number | null;
|
|
distance: number | null;
|
|
calories: number | null;
|
|
notes: string | null;
|
|
}>;
|
|
}
|
|
|
|
export default function ExerciseDetailPage() {
|
|
const params = useParams();
|
|
const router = useRouter();
|
|
const exerciseId = params.id as string;
|
|
|
|
const [exercise, setExercise] = useState<Exercise | null>(null);
|
|
const [history, setHistory] = useState<WorkoutHistory[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [editing, setEditing] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
const [deleting, setDeleting] = useState(false);
|
|
|
|
// Edit form state
|
|
const [editName, setEditName] = useState("");
|
|
const [editType, setEditType] = useState("");
|
|
const [editMuscleGroups, setEditMuscleGroups] = useState<string[]>([]);
|
|
const [editInputFields, setEditInputFields] = useState<string[]>([]);
|
|
const [editDefaultUnit, setEditDefaultUnit] = useState<string | null>(null);
|
|
|
|
// Custom "+" add state
|
|
const [addingType, setAddingType] = useState(false);
|
|
const [newTypeText, setNewTypeText] = useState("");
|
|
const [addingMuscle, setAddingMuscle] = useState(false);
|
|
const [newMuscleText, setNewMuscleText] = useState("");
|
|
const [addingField, setAddingField] = useState(false);
|
|
const [newFieldText, setNewFieldText] = useState("");
|
|
const [customTypes, setCustomTypes] = useState<string[]>([]);
|
|
const [customMuscles, setCustomMuscles] = useState<string[]>([]);
|
|
const [customFields, setCustomFields] = useState<{ value: string; label: string }[]>([]);
|
|
|
|
useEffect(() => {
|
|
fetchExercise();
|
|
}, [exerciseId]);
|
|
|
|
const fetchExercise = async () => {
|
|
try {
|
|
const res = await fetch(`/api/exercises/${exerciseId}`);
|
|
if (!res.ok) throw new Error("Not found");
|
|
const data = await res.json();
|
|
setExercise(data.exercise);
|
|
setHistory(data.history || []);
|
|
|
|
// Populate edit form
|
|
setEditName(data.exercise.name);
|
|
setEditType(data.exercise.type);
|
|
const mg = JSON.parse(data.exercise.muscleGroups || "[]") as string[];
|
|
setEditMuscleGroups(mg);
|
|
const ifs = JSON.parse(data.exercise.inputFields || '["sets","reps","weight"]') as string[];
|
|
setEditInputFields(ifs);
|
|
setEditDefaultUnit(data.exercise.defaultWeightUnit);
|
|
|
|
// Detect custom values not in default lists
|
|
const knownTypes = EXERCISE_TYPES;
|
|
if (!knownTypes.includes(data.exercise.type)) {
|
|
setCustomTypes((prev) => prev.includes(data.exercise.type) ? prev : [...prev, data.exercise.type]);
|
|
}
|
|
const knownMuscles = MUSCLE_GROUPS;
|
|
mg.forEach((m: string) => {
|
|
if (!knownMuscles.includes(m)) {
|
|
setCustomMuscles((prev) => prev.includes(m) ? prev : [...prev, m]);
|
|
}
|
|
});
|
|
const knownFields = INPUT_FIELD_OPTIONS.map((f) => f.value);
|
|
ifs.forEach((f: string) => {
|
|
if (!knownFields.includes(f)) {
|
|
setCustomFields((prev) =>
|
|
prev.some((cf) => cf.value === f)
|
|
? prev
|
|
: [...prev, { value: f, label: f.charAt(0).toUpperCase() + f.slice(1) }]
|
|
);
|
|
}
|
|
});
|
|
} catch (err) {
|
|
console.error(err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
try {
|
|
const res = await fetch(`/api/exercises/${exerciseId}`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
name: editName,
|
|
type: editType,
|
|
muscleGroups: editMuscleGroups,
|
|
inputFields: editInputFields,
|
|
defaultWeightUnit: editDefaultUnit,
|
|
}),
|
|
});
|
|
if (!res.ok) throw new Error("Failed to save");
|
|
const updated = await res.json();
|
|
setExercise(updated);
|
|
setEditing(false);
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert("Failed to save changes");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
if (!confirm("Delete this exercise and all its history?")) return;
|
|
setDeleting(true);
|
|
try {
|
|
const res = await fetch(`/api/exercises/${exerciseId}`, {
|
|
method: "DELETE",
|
|
});
|
|
if (!res.ok) throw new Error("Failed to delete");
|
|
router.push("/main/exercises");
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert("Failed to delete exercise");
|
|
setDeleting(false);
|
|
}
|
|
};
|
|
|
|
const toggleMuscleGroup = (group: string) => {
|
|
setEditMuscleGroups((prev) =>
|
|
prev.includes(group) ? prev.filter((g) => g !== group) : [...prev, group]
|
|
);
|
|
};
|
|
|
|
const toggleInputField = (field: string) => {
|
|
setEditInputFields((prev) =>
|
|
prev.includes(field)
|
|
? prev.filter((f) => f !== field)
|
|
: [...prev, field]
|
|
);
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-[#0A0A0A] flex items-center justify-center">
|
|
<Loader className="w-8 h-8 animate-spin text-zinc-500" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!exercise) {
|
|
return (
|
|
<div className="min-h-screen bg-[#0A0A0A] p-6">
|
|
<Link
|
|
href="/main/exercises"
|
|
className="text-zinc-400 hover:text-white flex items-center gap-1 mb-4"
|
|
>
|
|
<ChevronLeft className="w-5 h-5" />
|
|
Back
|
|
</Link>
|
|
<p className="text-zinc-500">Exercise not found</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const muscleGroups = JSON.parse(exercise.muscleGroups || "[]") as string[];
|
|
const inputFields = JSON.parse(
|
|
exercise.inputFields || '["sets","reps","weight"]'
|
|
) as string[];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0A0A0A]">
|
|
{/* Header */}
|
|
<div className="border-b border-zinc-800 px-4 py-4">
|
|
<div className="max-w-2xl mx-auto flex items-center gap-4">
|
|
<Link
|
|
href="/main/exercises"
|
|
className="p-2 hover:bg-zinc-900 rounded-lg text-zinc-400 hover:text-white"
|
|
>
|
|
<ChevronLeft className="w-6 h-6" />
|
|
</Link>
|
|
<h1 className="text-xl font-bold text-white flex-1 truncate">
|
|
{exercise.name}
|
|
</h1>
|
|
{!editing && (
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => setEditing(true)}
|
|
className="p-2 hover:bg-zinc-900 rounded-lg text-zinc-400 hover:text-white"
|
|
>
|
|
<Pencil className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
onClick={handleDelete}
|
|
disabled={deleting}
|
|
className="p-2 hover:bg-zinc-900 rounded-lg text-red-500 hover:text-red-400 disabled:opacity-50"
|
|
>
|
|
<Trash2 className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-2xl mx-auto px-4 py-6 space-y-6">
|
|
{/* Edit Mode */}
|
|
{editing ? (
|
|
<div className="bg-zinc-900 border border-zinc-800 rounded-lg p-6 space-y-5">
|
|
<div>
|
|
<label className="block text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">
|
|
Name
|
|
</label>
|
|
<input
|
|
value={editName}
|
|
onChange={(e) => setEditName(e.target.value)}
|
|
className="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-white/20"
|
|
/>
|
|
</div>
|
|
|
|
<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, ...customTypes].map((type) => (
|
|
<button
|
|
key={type}
|
|
onClick={() => setEditType(type)}
|
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition ${
|
|
editType === type
|
|
? "bg-white text-black"
|
|
: "bg-zinc-800 text-zinc-400 hover:text-white"
|
|
}`}
|
|
>
|
|
{type.charAt(0).toUpperCase() + type.slice(1)}
|
|
</button>
|
|
))}
|
|
{addingType ? (
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
const val = newTypeText.trim().toLowerCase();
|
|
if (val && !EXERCISE_TYPES.includes(val) && !customTypes.includes(val)) {
|
|
setCustomTypes((p) => [...p, val]);
|
|
setEditType(val);
|
|
}
|
|
setNewTypeText("");
|
|
setAddingType(false);
|
|
}}
|
|
className="flex items-center gap-1"
|
|
>
|
|
<input
|
|
autoFocus
|
|
value={newTypeText}
|
|
onChange={(e) => setNewTypeText(e.target.value)}
|
|
onBlur={() => {
|
|
const val = newTypeText.trim().toLowerCase();
|
|
if (val && !EXERCISE_TYPES.includes(val) && !customTypes.includes(val)) {
|
|
setCustomTypes((p) => [...p, val]);
|
|
setEditType(val);
|
|
}
|
|
setNewTypeText("");
|
|
setAddingType(false);
|
|
}}
|
|
placeholder="New type"
|
|
className="w-24 px-2 py-1.5 bg-zinc-800 border border-zinc-600 rounded-lg text-sm text-white focus:outline-none focus:ring-1 focus:ring-white/30"
|
|
/>
|
|
</form>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => setAddingType(true)}
|
|
className="px-2.5 py-1.5 rounded-lg text-sm font-medium bg-zinc-800 text-zinc-500 hover:text-white border border-dashed border-zinc-600 transition"
|
|
>
|
|
+
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<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, ...customMuscles].map((group) => (
|
|
<button
|
|
key={group}
|
|
onClick={() => toggleMuscleGroup(group)}
|
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition ${
|
|
editMuscleGroups.includes(group)
|
|
? "bg-white text-black"
|
|
: "bg-zinc-800 text-zinc-400 hover:text-white"
|
|
}`}
|
|
>
|
|
{group.charAt(0).toUpperCase() + group.slice(1)}
|
|
</button>
|
|
))}
|
|
{addingMuscle ? (
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
const val = newMuscleText.trim().toLowerCase();
|
|
if (val && !MUSCLE_GROUPS.includes(val) && !customMuscles.includes(val)) {
|
|
setCustomMuscles((p) => [...p, val]);
|
|
}
|
|
if (val && !editMuscleGroups.includes(val)) {
|
|
setEditMuscleGroups((p) => [...p, val]);
|
|
}
|
|
setNewMuscleText("");
|
|
setAddingMuscle(false);
|
|
}}
|
|
className="flex items-center gap-1"
|
|
>
|
|
<input
|
|
autoFocus
|
|
value={newMuscleText}
|
|
onChange={(e) => setNewMuscleText(e.target.value)}
|
|
onBlur={() => {
|
|
const val = newMuscleText.trim().toLowerCase();
|
|
if (val && !MUSCLE_GROUPS.includes(val) && !customMuscles.includes(val)) {
|
|
setCustomMuscles((p) => [...p, val]);
|
|
}
|
|
if (val && !editMuscleGroups.includes(val)) {
|
|
setEditMuscleGroups((p) => [...p, val]);
|
|
}
|
|
setNewMuscleText("");
|
|
setAddingMuscle(false);
|
|
}}
|
|
placeholder="New group"
|
|
className="w-24 px-2 py-1.5 bg-zinc-800 border border-zinc-600 rounded-lg text-sm text-white focus:outline-none focus:ring-1 focus:ring-white/30"
|
|
/>
|
|
</form>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => setAddingMuscle(true)}
|
|
className="px-2.5 py-1.5 rounded-lg text-sm font-medium bg-zinc-800 text-zinc-500 hover:text-white border border-dashed border-zinc-600 transition"
|
|
>
|
|
+
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">
|
|
Input Fields
|
|
</label>
|
|
<p className="text-xs text-zinc-600 mb-2">
|
|
Choose which fields are relevant when logging this exercise
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{[...INPUT_FIELD_OPTIONS, ...customFields].map((field) => (
|
|
<button
|
|
key={field.value}
|
|
onClick={() => toggleInputField(field.value)}
|
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition ${
|
|
editInputFields.includes(field.value)
|
|
? "bg-white text-black"
|
|
: "bg-zinc-800 text-zinc-400 hover:text-white"
|
|
}`}
|
|
>
|
|
{field.label}
|
|
</button>
|
|
))}
|
|
{addingField ? (
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
const val = newFieldText.trim().toLowerCase();
|
|
if (
|
|
val &&
|
|
!INPUT_FIELD_OPTIONS.some((f) => f.value === val) &&
|
|
!customFields.some((f) => f.value === val)
|
|
) {
|
|
setCustomFields((p) => [
|
|
...p,
|
|
{ value: val, label: val.charAt(0).toUpperCase() + val.slice(1) },
|
|
]);
|
|
}
|
|
if (val && !editInputFields.includes(val)) {
|
|
setEditInputFields((p) => [...p, val]);
|
|
}
|
|
setNewFieldText("");
|
|
setAddingField(false);
|
|
}}
|
|
className="flex items-center gap-1"
|
|
>
|
|
<input
|
|
autoFocus
|
|
value={newFieldText}
|
|
onChange={(e) => setNewFieldText(e.target.value)}
|
|
onBlur={() => {
|
|
const val = newFieldText.trim().toLowerCase();
|
|
if (
|
|
val &&
|
|
!INPUT_FIELD_OPTIONS.some((f) => f.value === val) &&
|
|
!customFields.some((f) => f.value === val)
|
|
) {
|
|
setCustomFields((p) => [
|
|
...p,
|
|
{ value: val, label: val.charAt(0).toUpperCase() + val.slice(1) },
|
|
]);
|
|
}
|
|
if (val && !editInputFields.includes(val)) {
|
|
setEditInputFields((p) => [...p, val]);
|
|
}
|
|
setNewFieldText("");
|
|
setAddingField(false);
|
|
}}
|
|
placeholder="New field"
|
|
className="w-24 px-2 py-1.5 bg-zinc-800 border border-zinc-600 rounded-lg text-sm text-white focus:outline-none focus:ring-1 focus:ring-white/30"
|
|
/>
|
|
</form>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => setAddingField(true)}
|
|
className="px-2.5 py-1.5 rounded-lg text-sm font-medium bg-zinc-800 text-zinc-500 hover:text-white border border-dashed border-zinc-600 transition"
|
|
>
|
|
+
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">
|
|
Default Weight Unit
|
|
</label>
|
|
<div className="flex gap-2">
|
|
{[
|
|
{ value: null, label: "User Default" },
|
|
{ value: "lbs", label: "Pounds" },
|
|
{ value: "kg", label: "Kilograms" },
|
|
].map((opt) => (
|
|
<button
|
|
key={opt.label}
|
|
onClick={() => setEditDefaultUnit(opt.value)}
|
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition ${
|
|
editDefaultUnit === opt.value
|
|
? "bg-white text-black"
|
|
: "bg-zinc-800 text-zinc-400 hover:text-white"
|
|
}`}
|
|
>
|
|
{opt.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-2">
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="flex-1 py-3 bg-white text-black font-bold rounded-lg hover:bg-zinc-200 disabled:opacity-50 flex items-center justify-center gap-2"
|
|
>
|
|
{saving ? (
|
|
<Loader className="w-5 h-5 animate-spin" />
|
|
) : (
|
|
<Check className="w-5 h-5" />
|
|
)}
|
|
Save
|
|
</button>
|
|
<button
|
|
onClick={() => setEditing(false)}
|
|
className="flex-1 py-3 bg-zinc-800 text-white font-medium rounded-lg hover:bg-zinc-700 flex items-center justify-center gap-2"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
/* View Mode */
|
|
<div className="bg-zinc-900 border border-zinc-800 rounded-lg p-6">
|
|
<div className="flex items-start gap-4 mb-4">
|
|
<div className="bg-zinc-800 p-3 rounded-lg">
|
|
<Dumbbell className="w-6 h-6 text-zinc-400" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h2 className="text-xl font-bold text-white">
|
|
{exercise.name}
|
|
</h2>
|
|
<span className="inline-block mt-1 px-2 py-0.5 bg-zinc-800 text-zinc-300 rounded text-xs font-medium">
|
|
{exercise.type.charAt(0).toUpperCase() +
|
|
exercise.type.slice(1)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{muscleGroups.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{muscleGroups.map((group) => (
|
|
<span
|
|
key={group}
|
|
className="px-2 py-1 bg-zinc-800 text-zinc-400 rounded text-xs"
|
|
>
|
|
{group.charAt(0).toUpperCase() + group.slice(1)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="border-t border-zinc-800 pt-4 mt-4">
|
|
<p className="text-xs text-zinc-500 uppercase tracking-wider mb-2">
|
|
Tracked Fields
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{inputFields.map((field) => (
|
|
<span
|
|
key={field}
|
|
className="px-2 py-1 bg-zinc-800 text-zinc-300 rounded text-xs font-medium"
|
|
>
|
|
{field.charAt(0).toUpperCase() + field.slice(1)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{exercise.defaultWeightUnit && (
|
|
<p className="text-xs text-zinc-500 mt-3">
|
|
Default unit:{" "}
|
|
<span className="text-zinc-300">
|
|
{exercise.defaultWeightUnit}
|
|
</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* History */}
|
|
<div>
|
|
<h3 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
|
|
<Calendar className="w-5 h-5 text-zinc-400" />
|
|
History
|
|
</h3>
|
|
|
|
{history.length === 0 ? (
|
|
<div className="bg-zinc-900 border border-zinc-800 rounded-lg p-8 text-center">
|
|
<TrendingUp className="w-10 h-10 text-zinc-700 mx-auto mb-3" />
|
|
<p className="text-zinc-500">No history yet</p>
|
|
<p className="text-zinc-600 text-sm mt-1">
|
|
Start logging this exercise to see your progress
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-1">
|
|
{history.map((entry) => {
|
|
const summary = formatSetsSummary(
|
|
entry.sets.map((s: any) => ({ weight: s.weight, reps: s.reps, weightUnit: s.weightUnit }))
|
|
);
|
|
const dateStr = new Date(entry.workout.date).toLocaleDateString(
|
|
"en-US",
|
|
{ month: "short", day: "numeric" }
|
|
);
|
|
return (
|
|
<Link
|
|
key={entry.workout.id}
|
|
href={`/main/workouts/${entry.workout.id}`}
|
|
className="flex items-baseline gap-2 px-3 py-1.5 rounded-md hover:bg-zinc-800/60 transition"
|
|
>
|
|
<span className="text-xs text-zinc-500 flex-shrink-0 tabular-nums">
|
|
{dateStr}
|
|
</span>
|
|
<span className="text-xs text-zinc-600 flex-shrink-0">·</span>
|
|
<span className="text-xs text-zinc-500 flex-shrink-0">
|
|
{entry.sets.length} {entry.sets.length === 1 ? "set" : "sets"}
|
|
</span>
|
|
{summary && (
|
|
<>
|
|
<span className="text-xs text-zinc-600 flex-shrink-0">·</span>
|
|
<span className="text-sm text-zinc-300 truncate">
|
|
{summary}
|
|
</span>
|
|
</>
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|