поправила пропсы на иконки календаря и гантели в разных компонентах
This commit is contained in:
parent
8c99c4a220
commit
1907ec5680
@ -9,8 +9,8 @@ import { getRouteCourseExercises } from "../shared/consts/router"
|
|||||||
import { getRouteSettings } from "../shared/consts/router"
|
import { getRouteSettings } from "../shared/consts/router"
|
||||||
|
|
||||||
import { HomeIcon } from "./icons/HomeIcon"
|
import { HomeIcon } from "./icons/HomeIcon"
|
||||||
import { CoursesIcon } from "./icons/CoursesIcon"
|
import { CalendarIcon } from "./icons/CalendarIcon"
|
||||||
import { ExerciseIcon } from "./icons/ExerciseIcon"
|
import { DumbbellIcon } from "./icons/DumbbellIcon"
|
||||||
import { SettingsIcon } from "./icons/SettingsIcon"
|
import { SettingsIcon } from "./icons/SettingsIcon"
|
||||||
|
|
||||||
|
|
||||||
@ -20,8 +20,8 @@ const BottomNavigation: React.FC = () => {
|
|||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ path: getRouteHome(), icon: HomeIcon, label: "Домой" },
|
{ path: getRouteHome(), icon: HomeIcon, label: "Домой" },
|
||||||
{ path: getRouteCourses(), icon: CoursesIcon, label: "Курсы" },
|
{ path: getRouteCourses(), icon: CalendarIcon, label: "Курсы" },
|
||||||
{ path: getRouteCourseExercises(":id"), icon: ExerciseIcon, label: "Тренировка" },
|
{ path: getRouteCourseExercises(":id"), icon: DumbbellIcon, label: "Тренировка" },
|
||||||
{ path: getRouteSettings(), icon: SettingsIcon, label: "Меню" },
|
{ path: getRouteSettings(), icon: SettingsIcon, label: "Меню" },
|
||||||
]
|
]
|
||||||
|
|
||||||
|
@ -5,18 +5,16 @@ import type React from "react"
|
|||||||
interface StatCardProps {
|
interface StatCardProps {
|
||||||
title: string
|
title: string
|
||||||
subtitle: string
|
subtitle: string
|
||||||
icon: React.ComponentType<{ size?: number; className?: string; color?: string }>
|
icon: React.ComponentType<{ size?: number; fill?: string; className?: string; style?: React.CSSProperties }>
|
||||||
iconColor: string
|
fill:string
|
||||||
backgroundIconColor: string
|
|
||||||
onClick: () => void
|
onClick: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export const StatCard: React.FC<StatCardProps> = ({
|
export const StatCardHome: React.FC<StatCardProps> = ({
|
||||||
title,
|
title,
|
||||||
subtitle,
|
subtitle,
|
||||||
icon: Icon,
|
icon: Icon,
|
||||||
iconColor,
|
fill,
|
||||||
backgroundIconColor,
|
|
||||||
onClick,
|
onClick,
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
@ -25,11 +23,18 @@ export const StatCard: React.FC<StatCardProps> = ({
|
|||||||
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 cursor-pointer"
|
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 cursor-pointer"
|
||||||
>
|
>
|
||||||
{/* Фоновая иконка */}
|
{/* Фоновая иконка */}
|
||||||
<Icon size={180} color={backgroundIconColor} className="absolute -right-8 -top-8 -rotate-45" />
|
<Icon
|
||||||
|
size={180}
|
||||||
|
fill={"#E6E5E5"}
|
||||||
|
className="absolute -right-8 -top-8 -rotate-45"
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Основная иконка */}
|
{/* Основная иконка */}
|
||||||
<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">
|
||||||
<Icon size={40} color={iconColor} />
|
<Icon size={40}
|
||||||
|
fill={fill}
|
||||||
|
/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Текст */}
|
{/* Текст */}
|
@ -7,7 +7,7 @@ interface WorkoutCardProps {
|
|||||||
onCardClick: () => void
|
onCardClick: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export const WorkoutCard: React.FC<WorkoutCardProps> = ({ onBackClick, onCardClick }) => {
|
export const WorkoutCardHome: React.FC<WorkoutCardProps> = ({ onBackClick, onCardClick }) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
onClick={onCardClick}
|
onClick={onCardClick}
|
@ -1,18 +1,20 @@
|
|||||||
import type React from "react"
|
import type React from "react"
|
||||||
|
|
||||||
interface IconProps {
|
interface IconProps {
|
||||||
|
active?: boolean
|
||||||
size?: number
|
size?: number
|
||||||
className?: string
|
className?: string
|
||||||
color?: string
|
color?: string
|
||||||
|
fill?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export const CalendarIcon: React.FC<IconProps> = ({ size = 40, className = "", color = "#2B8794" }) => (
|
export const CalendarIcon: React.FC<IconProps> = ({ active = false, size = 40, className = "", fill = active ? "#2B8794" : "#ffffff" }) => (
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width={size}
|
width={size}
|
||||||
height={size}
|
height={size}
|
||||||
viewBox="0 0 26 26"
|
viewBox="0 0 26 26"
|
||||||
fill={color}
|
fill={fill}
|
||||||
strokeWidth="2"
|
strokeWidth="2"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
|
@ -1,18 +1,20 @@
|
|||||||
import type React from "react"
|
import type React from "react"
|
||||||
|
|
||||||
interface IconProps {
|
interface IconProps {
|
||||||
|
active?: boolean
|
||||||
size?: number
|
size?: number
|
||||||
className?: string
|
className?: string
|
||||||
color?: string
|
color?: string
|
||||||
|
fill?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export const DumbbellIcon: React.FC<IconProps> = ({ size = 40, className = "", color = "#FF8D28" }) => (
|
export const DumbbellIcon: React.FC<IconProps> = ({ active = false, size = 40, className = "", fill = active ? "#2B8794" : "#ffffff" }) => (
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width={size}
|
width={size}
|
||||||
height={size}
|
height={size}
|
||||||
viewBox="0 0 27 27"
|
viewBox="0 0 27 27"
|
||||||
fill={color}
|
fill={fill}
|
||||||
strokeWidth="2"
|
strokeWidth="2"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
|
@ -1,28 +0,0 @@
|
|||||||
import type React from "react"
|
|
||||||
|
|
||||||
interface IconProps {
|
|
||||||
active?: boolean
|
|
||||||
size?: number
|
|
||||||
className?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ExerciseIcon: React.FC<IconProps> = ({ active = false, size = 40, className = "" }) => (
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width={size}
|
|
||||||
height={size}
|
|
||||||
viewBox="0 0 29 29"
|
|
||||||
fill={active ? "#2B8794" : "#ffffff"}
|
|
||||||
className={className}
|
|
||||||
>
|
|
||||||
<g clipPath="url(#a)">
|
|
||||||
<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" />
|
|
||||||
</g>
|
|
||||||
<defs>
|
|
||||||
<clipPath id="a">
|
|
||||||
<path fill="#fff" d="M0,0h28v28h-28z" />
|
|
||||||
</clipPath>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
)
|
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import type React from "react"
|
import type React from "react"
|
||||||
import { useState } from "react"
|
import { useState } from "react"
|
||||||
import { useHistory, useParams } from "react-router-dom"
|
import { useHistory } from "react-router-dom"
|
||||||
|
|
||||||
import HeaderNav from "../components/HeaderNav"
|
import HeaderNav from "../components/HeaderNav"
|
||||||
import BottomNavigation from "../components/BottomNavigation"
|
import BottomNavigation from "../components/BottomNavigation"
|
||||||
@ -13,7 +13,7 @@ import { getRouteExercise } from "../shared/consts/router"
|
|||||||
|
|
||||||
const CourseExercises: React.FC = () => {
|
const CourseExercises: React.FC = () => {
|
||||||
const history = useHistory()
|
const history = useHistory()
|
||||||
const { id } = useParams<{ id: string }>();
|
// const { id } = useParams<{ id: string }>();
|
||||||
const [currentSlide, setCurrentSlide] = useState(0)
|
const [currentSlide, setCurrentSlide] = useState(0)
|
||||||
|
|
||||||
|
|
||||||
|
@ -12,8 +12,9 @@ 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"
|
||||||
|
|
||||||
import { WorkoutCard } from "../components/cards/WorkoutCard"
|
|
||||||
import { StatCard } from "../components/cards/StatCard"
|
import { StatCardHome } from "../components/cards/StatCardHome"
|
||||||
|
import { WorkoutCardHome } from "../components/cards/WorkoutCardHome"
|
||||||
|
|
||||||
import { getRouteExercise } from "../shared/consts/router"
|
import { getRouteExercise } from "../shared/consts/router"
|
||||||
import { getRouteCourses } from "../shared/consts/router"
|
import { getRouteCourses } from "../shared/consts/router"
|
||||||
@ -118,24 +119,22 @@ export default function Home() {
|
|||||||
|
|
||||||
<div className="px-4 sm:px-6 space-y-6">
|
<div className="px-4 sm:px-6 space-y-6">
|
||||||
{/* Current Exercise */}
|
{/* Current Exercise */}
|
||||||
<WorkoutCard onBackClick={handleBackClick} onCardClick={handleWorkoutClick} />
|
<WorkoutCardHome onBackClick={handleBackClick} onCardClick={handleWorkoutClick} />
|
||||||
|
|
||||||
{/* 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">
|
||||||
<StatCard
|
<StatCardHome
|
||||||
title="Курсы"
|
title="Курсы"
|
||||||
subtitle="все назначенные"
|
subtitle="все назначенные"
|
||||||
icon={CalendarIcon}
|
icon={CalendarIcon}
|
||||||
iconColor="#2B8794"
|
fill="#2BACBE"
|
||||||
backgroundIconColor="#E6E5E5"
|
|
||||||
onClick={handleCoursesClick}
|
onClick={handleCoursesClick}
|
||||||
/>
|
/>
|
||||||
<StatCard
|
<StatCardHome
|
||||||
title="Упражнения"
|
title="Упражнения"
|
||||||
subtitle="внутри текущего курса"
|
subtitle="внутри текущего курса"
|
||||||
icon={DumbbellIcon}
|
icon={DumbbellIcon}
|
||||||
iconColor="#FF8D28"
|
fill="#FF8D28"
|
||||||
backgroundIconColor="#E6E5E5"
|
|
||||||
onClick={handleExercisesClick}
|
onClick={handleExercisesClick}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user