71 lines
2.6 KiB
TypeScript
71 lines
2.6 KiB
TypeScript
import Link from "next/link";
|
|
import { Plus } from "lucide-react";
|
|
import { EmptyState } from "@/components/empty-state";
|
|
import { VolumeChart } from "@/components/volume-chart";
|
|
import { formatDateShort } from "@/lib/format";
|
|
import { listStrengthWorkouts } from "@/lib/models/strength";
|
|
import { workoutVolumeKg } from "@/lib/strength/stats";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
const VOLUME_CHART_LIMIT = 12;
|
|
|
|
export default async function StrengthPage() {
|
|
const workouts = await listStrengthWorkouts();
|
|
|
|
const volumeData = workouts
|
|
.slice(0, VOLUME_CHART_LIMIT)
|
|
.map((workout) => ({ label: formatDateShort(workout.date), volumeKg: workoutVolumeKg(workout) }))
|
|
.reverse();
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-fg">Siłownia</h1>
|
|
<p className="mt-1 text-sm text-fg/60">
|
|
Treningi zaimportowane z aplikacji Strong.
|
|
</p>
|
|
</div>
|
|
<Link
|
|
href="/strength/import"
|
|
className="flex items-center gap-1.5 rounded-md bg-accent px-3 py-2 text-sm font-semibold text-fg transition-opacity hover:opacity-90"
|
|
>
|
|
<Plus size={16} />
|
|
Importuj
|
|
</Link>
|
|
</div>
|
|
|
|
{volumeData.length > 1 ? <VolumeChart data={volumeData} /> : null}
|
|
|
|
{workouts.length === 0 ? (
|
|
<EmptyState
|
|
title="Brak treningów siłowych"
|
|
description="Zaimportuj swój pierwszy trening, wklejając tekst wygenerowany przez funkcję 'Share workout' w aplikacji Strong."
|
|
action={{ href: "/strength/import", label: "Zaimportuj trening" }}
|
|
/>
|
|
) : (
|
|
<ul className="flex flex-col gap-3">
|
|
{workouts.map((workout) => (
|
|
<li key={workout._id.toString()}>
|
|
<Link
|
|
href={`/strength/${workout._id.toString()}`}
|
|
className="flex items-center justify-between rounded-lg border border-muted/40 bg-surface p-4 transition-colors hover:border-accent/60"
|
|
>
|
|
<div>
|
|
<div className="font-semibold text-fg">{workout.name}</div>
|
|
<div className="text-sm text-fg/60">{formatDateShort(workout.date)}</div>
|
|
</div>
|
|
<div className="text-sm text-fg/60">
|
|
{workout.exercises.length}{" "}
|
|
{workout.exercises.length === 1 ? "ćwiczenie" : "ćwiczeń"}
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|