142 lines
4.4 KiB
TypeScript
142 lines
4.4 KiB
TypeScript
"use client"
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { useHistory } from "react-router-dom";
|
||
|
||
import { CalendarIcon } from "../components/icons/CalendarIcon";
|
||
import { DumbbellIcon } from "../components/icons/DumbbellIcon";
|
||
|
||
|
||
import HeaderNav from "../components/HeaderNav";
|
||
import BottomNavigation from "../components/BottomNavigation";
|
||
import CircularProgressDisplay from "../components/CircularProgressDisplay";
|
||
|
||
|
||
import { StatCardHome } from "../components/cards/StatCardHome";
|
||
import { WorkoutCardHome } from "../components/cards/WorkoutCardHome";
|
||
|
||
import { getRouteExercise } from "../shared/consts/router";
|
||
import { getRouteCourses } from "../shared/consts/router";
|
||
import { getRouteCourseExercises } from "../shared/consts/router";
|
||
|
||
export default function Home() {
|
||
const history = useHistory()
|
||
const [currentDate, setCurrentDate] = useState("")
|
||
|
||
useEffect(() => {
|
||
setCurrentDate(
|
||
new Date().toLocaleDateString("ru-RU", {
|
||
year: "numeric",
|
||
month: "long",
|
||
day: "numeric",
|
||
}),
|
||
)
|
||
}, [])
|
||
|
||
const courses = [
|
||
{
|
||
id: 1,
|
||
name: "Восстановление колена",
|
||
progress: 75,
|
||
color: "from-[#2BACBE] to-cyan-600",
|
||
exercises: 12,
|
||
nextExercise: "Подъемы ног лежа",
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "Укрепление спины",
|
||
progress: 45,
|
||
color: "from-emerald-500 to-green-600",
|
||
exercises: 8,
|
||
nextExercise: "Планка",
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "Реабилитация плеча",
|
||
progress: 90,
|
||
color: "from-purple-500 to-pink-600",
|
||
exercises: 10,
|
||
nextExercise: "Вращения плечами",
|
||
},
|
||
]
|
||
|
||
// Calculate overall progress, total courses, total exercises
|
||
const totalCourses = courses.length
|
||
const totalExercises = courses.reduce((sum, course) => sum + course.exercises, 0)
|
||
const overallProgress = Math.round(courses.reduce((sum, course) => sum + course.progress, 0) / totalCourses)
|
||
|
||
const handleWorkoutClick = () => {
|
||
history.push(getRouteExercise())
|
||
}
|
||
|
||
const handleBackClick = () => {
|
||
history.goBack()
|
||
}
|
||
|
||
const handleCoursesClick = () => {
|
||
history.push(getRouteCourses())
|
||
}
|
||
|
||
const handleExercisesClick = () => {
|
||
history.push(getRouteCourseExercises(":id"))
|
||
}
|
||
|
||
return (
|
||
<div className="bg-gray-50 w-full h-full overflow-auto">
|
||
<div className="my-36 min-h-screen max-w-4xl mx-auto">
|
||
<HeaderNav item="Прогресс" text={currentDate} />
|
||
|
||
<div className="bg-white rounded-3xl p-6 shadow-lg mx-4 sm:mx-6">
|
||
<div className="flex content-center items-center justify-between ">
|
||
|
||
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<div className="flex flex-col gap-6">
|
||
<div className="text-left">
|
||
<div className="text-sm sm:text-base text-gray-800">Все курсы</div>
|
||
<div className="text-2xl font-bold text-cyan-500">{totalCourses}/1</div>
|
||
</div>
|
||
<div className="text-left">
|
||
<div className="text-sm sm:text-base text-gray-800">Все упражнения</div>
|
||
<div className="text-2xl font-bold text-orange-400">{totalExercises}/4</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-center items-center gap-8">
|
||
<CircularProgressDisplay
|
||
overallProgress={overallProgress}
|
||
totalCourses={totalCourses}
|
||
totalExercises={totalExercises}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="px-4 sm:px-6 space-y-6">
|
||
{/* Current Exercise */}
|
||
<WorkoutCardHome onBackClick={handleBackClick} onCardClick={handleWorkoutClick} />
|
||
|
||
{/* Quick Stats (Total Exercises & Total Courses) */}
|
||
<div className="grid grid-cols-2 gap-4 md:gap-5">
|
||
<StatCardHome
|
||
title="Курсы"
|
||
subtitle="назначенные"
|
||
icon={CalendarIcon}
|
||
fill="#2BACBE"
|
||
onClick={handleCoursesClick}
|
||
/>
|
||
<StatCardHome
|
||
title="Упражнения"
|
||
subtitle="текущего курса"
|
||
icon={DumbbellIcon}
|
||
fill="#FF8D28"
|
||
onClick={handleExercisesClick}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<BottomNavigation />
|
||
</div>
|
||
</div>
|
||
)
|
||
} |