diff --git a/src/components/BottomNavigation.tsx b/src/components/BottomNavigation.tsx index 749c8f3..3776468 100644 --- a/src/components/BottomNavigation.tsx +++ b/src/components/BottomNavigation.tsx @@ -3,16 +3,17 @@ import type React from "react" import { useHistory, useLocation } from "react-router-dom" + const BottomNavigation: React.FC = () => { const history = useHistory() const location = useLocation() - // Define SVG icons directly within the component - const HomeIcon = ({ active }: { active: boolean }) => ( + // Define SVG icons directly within the component, with active state styling + const HomeIcon = ({ active, size = 24 }: { active: boolean; size?: number }) => ( { ) - const CoursesIcon = ({ active }: { active: boolean }) => ( + const CoursesIcon = ({ active, size = 24 }: { active: boolean; size?: number }) => ( { ) - const ExerciseIcon = ({ active }: { active: boolean }) => ( + const ExerciseIcon = ({ active, size = 24 }: { active: boolean; size?: number }) => ( { ) - const SettingsIcon = ({ active }: { active: boolean }) => ( + const SettingsIcon = ({ active, size = 24 }: { active: boolean; size?: number }) => ( { } return ( -
-
+
+
+
) } diff --git a/src/components/CircularProgressDisplay.tsx b/src/components/CircularProgressDisplay.tsx index ee8117a..2c7052b 100644 --- a/src/components/CircularProgressDisplay.tsx +++ b/src/components/CircularProgressDisplay.tsx @@ -23,7 +23,7 @@ const CircularProgressDisplay: React.FC = ({ const exercisesStrokeDashoffset = circumference - (exercisesProgress / 100) * circumference return ( -
+
{/* Overall Progress Background Circle */} = ({ cy="50" /> - {/* Courses Ring (Blue) */} + = ({ transform="rotate(-90 50 50)" /> - {/* Exercises Ring (Green) */} + = ({ />
-
{overallProgress}%
-
Общий прогресс
+
{overallProgress}%
+
) diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx new file mode 100644 index 0000000..715f0b5 --- /dev/null +++ b/src/components/Icons.tsx @@ -0,0 +1,24 @@ +import type React from "react" + +// Your custom Home icon component +export const CustomHomeIcon = ({ active, size = 24 }: { active: boolean; size?: number }) => ( + + + + +); + +// You can add other custom icons here if needed in the future +// export const CustomAnotherIcon = ({ active, size = 24 }: { active: boolean; size?: number }) => ( +// ... +// );