Tatyana/Rehab_React_Vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

добавила компонент хедера

Browse Source
This commit is contained in:
Tatyana 2025-08-11 10:48:13 +03:00
parent ecbd91ea93
commit 9fde2d331c
2 changed files with 79 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/HeaderNav.tsx Normal file
View File

@ -0,0 +1,31 @@
import type React from "react"
interface HeaderProps {
item: string
text: string
}
const HeaderNav: React.FC<HeaderProps> = ({
item,
text,
}) => {
return (
<div className="opacity-90 fixed top-0 left-0 right-0 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] pt-6 pb-2 z-50 shadow-lg rounded-b-3xl">
<div className="absolute inset-0 bg-gradient-to-r from-black/10 to-transparent"></div>
<div className="relative px-4 sm:px-6 py-4 max-w-4xl mx-auto ">
<p className="text-cyan-100 text-sm font-medium">{text}</p>
<h1 className="text-xl sm:text-2xl font-semibold text-white">{item}</h1>
</div>
</div>
)
}
export default HeaderNav;

95
src/pages/Home.tsx
View File

@ -1,6 +1,9 @@
"use client" "use client"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { useHistory } from "react-router-dom" import { useHistory } from "react-router-dom"
import HeaderNav from "../components/HeaderNav"
import BottomNavigation from "../components/BottomNavigation" import BottomNavigation from "../components/BottomNavigation"
import CircularProgressDisplay from "../components/CircularProgressDisplay" import CircularProgressDisplay from "../components/CircularProgressDisplay"
@ -11,7 +14,6 @@ export default function Home() {
useEffect(() => { useEffect(() => {
setCurrentDate( setCurrentDate(
new Date().toLocaleDateString("ru-RU", { new Date().toLocaleDateString("ru-RU", {
year: "numeric", year: "numeric",
month: "long", month: "long",
day: "numeric", day: "numeric",
@ -22,10 +24,6 @@ export default function Home() {
const courses = [ const courses = [
{ {
id: 1, id: 1,
@ -62,13 +60,18 @@ export default function Home() {
const overallProgress = Math.round(courses.reduce((sum, course) => sum + course.progress, 0) / totalCourses) const overallProgress = Math.round(courses.reduce((sum, course) => sum + course.progress, 0) / totalCourses)
return ( return (
<div className="bg-gray-50 w-full h-full overflow-auto pb-50">
<div className="py-20 min-h-screen max-w-4xl mx-auto">
{/* Header */}
<div className="bg-gray-50 w-full h-full overflow-auto">
<div className="my-32 min-h-screen max-w-4xl mx-auto">
<HeaderNav item='Результаты' text='главная'/>
<div className="bg-white rounded-3xl p-6 shadow-lg mb-6 mx-4 sm:mx-6"> <div className="bg-white rounded-3xl p-6 shadow-lg mb-6 mx-4 sm:mx-6">
<div className="flex items-center justify-between mb-6 border-b-2 pb-4"> <div className="flex items-center justify-between mb-6 border-b-2 pb-4">
<div> <div>
<h1 className="text-2xl font-bold text-gray-600 mb-2">Результаты</h1> <h1 className="text-2xl font-bold text-gray-600 mb-2">Добрый день!</h1>
</div> </div>
<div className="text-right"> <div className="text-right">
<p className="text-gray-600 font-medium text-sm sm:text-base">{currentDate}</p> <p className="text-gray-600 font-medium text-sm sm:text-base">{currentDate}</p>
@ -100,9 +103,14 @@ export default function Home() {
{/* Заголовок и статус */} {/* Заголовок и статус */}
<div className="flex items-center justify-between flex-wrap mb-6 border-b-2 pb-4"> <div className="flex items-center justify-between flex-wrap mb-6 border-b-2 pb-4">
<h2 className="text-xl sm:text-2xl font-extrabold">Тренировка</h2> <h2 className="text-xl sm:text-2xl font-extrabold">Тренировка</h2>
<div className="px-3 py-1 bg-white/20 rounded-full shadow-lg backdrop-blur-sm"> <button
<span className="text-white text-sm font-semibold">Активно</span> onClick={() => history.goBack()}
</div> className="w-12 h-12 glass-morphism rounded-2xl flex items-center justify-center border border-white/30 hover:bg-white/30 transition-all duration-300 shadow-lg ml-auto"
>
<svg className="w-6 h-6 text-white transform rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7L15 5" />
</svg>
</button>
</div> </div>
{/* Основной блок с иконками и прогрессом */} {/* Основной блок с иконками и прогрессом */}
<div className="flex items-start flex-wrap space-x-4 mb-6"> <div className="flex items-start flex-wrap space-x-4 mb-6">
@ -128,32 +136,25 @@ export default function Home() {
<p className="text-white/70 font-medium mb-4 text-base">Текущее упражнение</p> <p className="text-white/70 font-medium mb-4 text-base">Текущее упражнение</p>
{/* Кнопка с стрелкой */} {/* Кнопка с стрелкой */}
</div> </div>
<button
onClick={() => history.goBack()}
className="w-12 h-12 glass-morphism rounded-2xl flex items-center justify-center border border-white/30 hover:bg-white/30 transition-all duration-300 shadow-lg ml-auto"
>
<svg className="w-6 h-6 text-white transform rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7L15 5" />
</svg>
</button>
</div> </div>
</div> </div>
{/* Quick Stats (Total Exercises & Total Courses) */} {/* Quick Stats (Total Exercises & Total Courses) */}
<div className="grid grid-cols-2 gap-4 md:gap-10"> <div className="grid grid-cols-2 gap-4 md:gap-10">
<div onClick={() => history.push("/courses")} className="glass-morphism rounded-3xl text-left border border-white/50 shadow-lg backdrop-blur-xl p-6 text-white transition-transform transform hover:scale-105 duration-300 overflow-hidden"> <div onClick={() => history.push("/courses")} className="glass-morphism rounded-3xl text-left border border-white/50 shadow-lg backdrop-blur-xl p-6 text-white transition-transform transform hover:scale-105 duration-300 overflow-hidden">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width={180} width={180}
height={180} height={180}
viewBox="0 0 26 26" viewBox="0 0 26 26"
fill={"#E6E5E5"} fill={"#E6E5E5"}
strokeWidth="2" strokeWidth="2"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
className="absolute -right-8 -top-8 -rotate-45" className="absolute -right-8 -top-8 -rotate-45"
> >
<path d="M4.147 9.186c.112-1.3.52-2.328 1.21-3.062.69-.733 1.721-1.232 3.194-1.368l.532-.05V2.344a.3.3 0 0 1 .293-.293.3.3 0 0 1 .293.293v2.344h8.79V2.344a.3.3 0 0 1 .293-.293.3.3 0 0 1 .293.293v2.362l.532.05c1.473.136 2.503.635 3.193 1.368.692.734 1.098 1.763 1.21 3.064H4.15a.017.017 0 0 1-.004-.002ZM4.688 12.118H23.44a.59.59 0 0 1 .586.586v7.22c0 1.668-.417 2.969-1.235 3.85-.81.873-2.1 1.425-4.039 1.425H9.376c-1.939 0-3.228-.552-4.039-1.425-.818-.881-1.235-2.182-1.235-3.85v-7.22a.59.59 0 0 1 .586-.586Zm5.945 6.773a1.759 1.759 0 0 0-1.341 0 1.94 1.94 0 0 0-.554.352l-.018.015-.015.017c-.307.324-.5.77-.5 1.235 0 .465.193.911.5 1.235l.015.017.018.016c.164.148.35.266.553.351.201.084.43.139.671.139.242 0 .47-.055.671-.139.204-.085.389-.203.553-.351l.018-.016.015-.017c.307-.324.501-.77.501-1.235 0-.464-.194-.911-.5-1.235l-.016-.017-.018-.015-.127-.106a1.92 1.92 0 0 0-.426-.246Zm0-4.102a1.759 1.759 0 0 0-1.341 0c-.204.085-.39.203-.554.351l-.023.021-.02.023a1.94 1.94 0 0 0-.352.554c-.083.2-.138.43-.138.67 0 .242.055.47.138.67.085.204.204.39.352.554l.02.024.023.02c.164.148.35.267.553.352.201.083.43.138.671.138.242 0 .47-.055.671-.138.204-.085.389-.204.553-.352l.024-.02.02-.024c.148-.164.267-.35.351-.554.084-.2.14-.428.14-.67 0-.24-.056-.47-.14-.67a1.938 1.938 0 0 0-.351-.554l-.02-.022-.024-.022a1.94 1.94 0 0 0-.553-.35Zm4.1 0a1.66 1.66 0 0 0-1.192-.057l-.148.057a1.942 1.942 0 0 0-.553.351l-.017.016-.016.017c-.307.324-.5.771-.5 1.236 0 .464.193.91.5 1.234l.016.017.017.016c.165.148.35.267.553.352.2.083.43.138.671.138.241 0 .47-.055.67-.138.205-.085.39-.204.555-.352l.017-.015.016-.018c.307-.324.5-.77.5-1.234 0-.465-.193-.912-.5-1.236l-.016-.017-.017-.016-.128-.106a1.922 1.922 0 0 0-.409-.237h.001l-.011-.005c-.003 0-.005-.002-.007-.003h-.001Z" /> <path d="M4.147 9.186c.112-1.3.52-2.328 1.21-3.062.69-.733 1.721-1.232 3.194-1.368l.532-.05V2.344a.3.3 0 0 1 .293-.293.3.3 0 0 1 .293.293v2.344h8.79V2.344a.3.3 0 0 1 .293-.293.3.3 0 0 1 .293.293v2.362l.532.05c1.473.136 2.503.635 3.193 1.368.692.734 1.098 1.763 1.21 3.064H4.15a.017.017 0 0 1-.004-.002ZM4.688 12.118H23.44a.59.59 0 0 1 .586.586v7.22c0 1.668-.417 2.969-1.235 3.85-.81.873-2.1 1.425-4.039 1.425H9.376c-1.939 0-3.228-.552-4.039-1.425-.818-.881-1.235-2.182-1.235-3.85v-7.22a.59.59 0 0 1 .586-.586Zm5.945 6.773a1.759 1.759 0 0 0-1.341 0 1.94 1.94 0 0 0-.554.352l-.018.015-.015.017c-.307.324-.5.77-.5 1.235 0 .465.193.911.5 1.235l.015.017.018.016c.164.148.35.266.553.351.201.084.43.139.671.139.242 0 .47-.055.671-.139.204-.085.389-.203.553-.351l.018-.016.015-.017c.307-.324.501-.77.501-1.235 0-.464-.194-.911-.5-1.235l-.016-.017-.018-.015-.127-.106a1.92 1.92 0 0 0-.426-.246Zm0-4.102a1.759 1.759 0 0 0-1.341 0c-.204.085-.39.203-.554.351l-.023.021-.02.023a1.94 1.94 0 0 0-.352.554c-.083.2-.138.43-.138.67 0 .242.055.47.138.67.085.204.204.39.352.554l.02.024.023.02c.164.148.35.267.553.352.201.083.43.138.671.138.242 0 .47-.055.671-.138.204-.085.389-.204.553-.352l.024-.02.02-.024c.148-.164.267-.35.351-.554.084-.2.14-.428.14-.67 0-.24-.056-.47-.14-.67a1.938 1.938 0 0 0-.351-.554l-.02-.022-.024-.022a1.94 1.94 0 0 0-.553-.35Zm4.1 0a1.66 1.66 0 0 0-1.192-.057l-.148.057a1.942 1.942 0 0 0-.553.351l-.017.016-.016.017c-.307.324-.5.771-.5 1.236 0 .464.193.91.5 1.234l.016.017.017.016c.165.148.35.267.553.352.2.083.43.138.671.138.241 0 .47-.055.67-.138.205-.085.39-.204.555-.352l.017-.015.016-.018c.307-.324.5-.77.5-1.234 0-.465-.193-.912-.5-1.236l-.016-.017-.017-.016-.128-.106a1.922 1.922 0 0 0-.409-.237h.001l-.011-.005c-.003 0-.005-.002-.007-.003h-.001Z" />
</svg> </svg>
<div className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center shadow-xl mb-4 z-20 relative"> <div className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center shadow-xl mb-4 z-20 relative">
{/* Clock icon SVG */} {/* Clock icon SVG */}
<svg <svg
@ -173,20 +174,20 @@ export default function Home() {
<div className="text-base text-gray-600 z-20 relative">все назначенные</div> <div className="text-base text-gray-600 z-20 relative">все назначенные</div>
</div> </div>
<div onClick={() => history.push("/course/${courseId}/exercises")} className="glass-morphism rounded-3xl text-left border border-white/50 shadow-lg backdrop-blur-xl p-6 text-white transition-transform transform hover:scale-105 duration-300 overflow-hidden"> <div onClick={() => history.push("/course/${courseId}/exercises")} className="glass-morphism rounded-3xl text-left border border-white/50 shadow-lg backdrop-blur-xl p-6 text-white transition-transform transform hover:scale-105 duration-300 overflow-hidden">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width={180} width={180}
height={180} height={180}
viewBox="0 0 26 26" viewBox="0 0 26 26"
fill={"#E6E5E5"} fill={"#E6E5E5"}
strokeWidth="2" strokeWidth="2"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
className="absolute -right-8 -top-8 -rotate-45" className="absolute -right-8 -top-8 -rotate-45"
> >
<path d="M20.136 6.739c.944 0 1.892.183 2.593.716.672.51 1.215 1.417 1.215 3.094v7.03c0 1.677-.543 2.584-1.215 3.095-.701.533-1.65.715-2.593.715-.945 0-1.894-.182-2.595-.715-.672-.51-1.215-1.418-1.215-3.094v-7.031c0-1.677.543-2.584 1.215-3.094.701-.533 1.65-.716 2.595-.716ZM7.994 6.739c.944 0 1.892.183 2.593.716.672.51 1.215 1.417 1.215 3.094v7.03c0 1.677-.543 2.584-1.215 3.095-.701.533-1.65.715-2.593.715-.945 0-1.893-.182-2.595-.715-.671-.51-1.215-1.418-1.215-3.094v-7.031c0-1.677.544-2.584 1.215-3.094.702-.533 1.65-.716 2.595-.716ZM15.154 13.771v.586h-2.18v-.586h2.18Z" /> <path d="M20.136 6.739c.944 0 1.892.183 2.593.716.672.51 1.215 1.417 1.215 3.094v7.03c0 1.677-.543 2.584-1.215 3.095-.701.533-1.65.715-2.593.715-.945 0-1.894-.182-2.595-.715-.672-.51-1.215-1.418-1.215-3.094v-7.031c0-1.677.543-2.584 1.215-3.094.701-.533 1.65-.716 2.595-.716ZM7.994 6.739c.944 0 1.892.183 2.593.716.672.51 1.215 1.417 1.215 3.094v7.03c0 1.677-.543 2.584-1.215 3.095-.701.533-1.65.715-2.593.715-.945 0-1.893-.182-2.595-.715-.671-.51-1.215-1.418-1.215-3.094v-7.031c0-1.677.544-2.584 1.215-3.094.702-.533 1.65-.716 2.595-.716ZM15.154 13.771v.586h-2.18v-.586h2.18Z" />
<path d="M26.37 17.873a.885.885 0 0 1-.879-.879v-5.86c0-.48.399-.879.88-.879.48 0 .878.399.878.88v5.86c0 .48-.398.878-.879.878ZM1.758 17.873a.885.885 0 0 1-.88-.879v-5.86c0-.48.4-.879.88-.879s.879.399.879.88v5.86c0 .48-.399.878-.88.878Z" /> <path d="M26.37 17.873a.885.885 0 0 1-.879-.879v-5.86c0-.48.399-.879.88-.879.48 0 .878.399.878.88v5.86c0 .48-.398.878-.879.878ZM1.758 17.873a.885.885 0 0 1-.88-.879v-5.86c0-.48.4-.879.88-.879s.879.399.879.88v5.86c0 .48-.399.878-.88.878Z" />
</svg> </svg>
<div className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center shadow-xl mb-4 z-20 relative"> <div className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center shadow-xl mb-4 z-20 relative">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"