diff --git a/src/App.tsx b/src/App.tsx index 53d67bb..ee145aa 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,7 +5,7 @@ import AppRoutes from "./AppRoutes" import "./index.css" import "@ionic/react/css/core.css" - import {Toaster } from "./components/Sonner" +import { Toaster } from "./components/Sonner" // import Header from "./components/Header" // import Footer from "./components/Footer" @@ -13,14 +13,14 @@ const App: React.FC = () => ( - -
+ +
- - -
+ + +
- + diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx index 07d6af0..fa93bf1 100644 --- a/src/AppRoutes.tsx +++ b/src/AppRoutes.tsx @@ -1,23 +1,23 @@ import { Switch, Route, Redirect } from "react-router-dom" -import Welcome from "./pages/Welcome" -import Login from "./pages/Login" -import Home from "./pages/Home" -import ForgotPasword from "./pages/ForgotPassword" -import { Courses } from "./pages/Courses" -import { CourseExercises } from "./pages/CourseExercises" -import { Exercise } from "./pages/Exercise" +import Welcome from "./pages/Welcome"; +import Login from "./pages/Login"; +import Home from "./pages/Home"; +import ForgotPasword from "./pages/ForgotPassword"; +import { Courses } from "./pages/Courses"; +import { CourseExercises } from "./pages/CourseExercises"; +import { Exercise } from "./pages/Exercise"; -import Settings from "./pages/Settings" -import CourseComplete from "./pages/CourseComplete" +import Settings from "./pages/Settings"; +import CourseComplete from "./pages/CourseComplete"; -import { getRouteWelcome } from "./shared/consts/router" -import { getRouteLogin } from "./shared/consts/router" -import { getRouteHome } from "./shared/consts/router" -import { getRouteForgotPassword } from "./shared/consts/router" -import { getRouteCourses } from "./shared/consts/router" -import { getRouteSettings } from "./shared/consts/router" -import { getRouteCourseComplete } from "./shared/consts/router" +import { getRouteWelcome } from "./shared/consts/router"; +import { getRouteLogin } from "./shared/consts/router"; +import { getRouteHome } from "./shared/consts/router"; +import { getRouteForgotPassword } from "./shared/consts/router"; +import { getRouteCourses } from "./shared/consts/router"; +import { getRouteSettings } from "./shared/consts/router"; +import { getRouteCourseComplete } from "./shared/consts/router"; const AppRoutes = () => ( diff --git a/src/components/BottomNavigation.tsx b/src/components/BottomNavigation.tsx index 16d5c49..dcb6e37 100644 --- a/src/components/BottomNavigation.tsx +++ b/src/components/BottomNavigation.tsx @@ -1,17 +1,17 @@ "use client" -import type React from "react" -import { useHistory, useLocation } from "react-router-dom" +import type React from "react"; +import { useHistory, useLocation } from "react-router-dom"; -import { getRouteHome } from "../shared/consts/router" -import { getRouteCourses } from "../shared/consts/router" -import { getRouteCourseExercises } from "../shared/consts/router" -import { getRouteSettings } from "../shared/consts/router" +import { getRouteHome } from "../shared/consts/router"; +import { getRouteCourses } from "../shared/consts/router"; +import { getRouteCourseExercises } from "../shared/consts/router"; +import { getRouteSettings } from "../shared/consts/router"; -import { HomeIcon } from "./icons/HomeIcon" -import { CalendarIcon } from "./icons/CalendarIcon" -import { DumbbellIcon } from "./icons/DumbbellIcon" -import { SettingsIcon } from "./icons/SettingsIcon" +import { HomeIcon } from "./icons/HomeIcon"; +import { CalendarIcon } from "./icons/CalendarIcon"; +import { DumbbellIcon } from "./icons/DumbbellIcon"; +import { SettingsIcon } from "./icons/SettingsIcon"; const BottomNavigation: React.FC = () => { diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index fe32317..03aa2f2 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -1,8 +1,8 @@ "use client" -import type React from "react" -import { useHistory } from "react-router-dom" -import { getRouteCourseExercises } from "../shared/consts/router" +import type React from "react"; +import { useHistory } from "react-router-dom"; +import { getRouteCourseExercises } from "../shared/consts/router"; interface CourseCardProps { id: number diff --git a/src/components/cards/StatCardHome.tsx b/src/components/cards/StatCardHome.tsx index d00d3bf..fcb45fe 100644 --- a/src/components/cards/StatCardHome.tsx +++ b/src/components/cards/StatCardHome.tsx @@ -1,4 +1,9 @@ "use client" +//Когда нужен "use client"? +// Если компонент использует React хуки (useState, useEffect, useContext и т.п.). +// Если он взаимодействует с браузерными API или DOM. +// Если он содержит обработчики событий или управляет состоянием. + import type React from "react" @@ -10,6 +15,20 @@ interface StatCardProps { onClick: () => void } +//Это тип компонента React, который принимает определенные пропсы. +// React.ComponentType<...> — это тип компонента, который можно использовать как JSX . +// Внутри <...> указаны пропсы, которые этот компонент принимает. + +// Какие пропсы у иконки? + +// size?: number — необязательный размер иконки (например, в пикселях). +// fill?: string — необязательный цвет заливки. +// className?: string — необязственный CSS-класс. +// style?: React.CSSProperties — необязательные inline-стили. + + + + export const StatCardHome: React.FC = ({ title, subtitle, @@ -33,8 +52,7 @@ export const StatCardHome: React.FC = ({
- + />
{/* Текст */} diff --git a/src/components/cards/WorkoutCardHome.tsx b/src/components/cards/WorkoutCardHome.tsx index 7dace26..53513dc 100644 --- a/src/components/cards/WorkoutCardHome.tsx +++ b/src/components/cards/WorkoutCardHome.tsx @@ -7,6 +7,8 @@ interface WorkoutCardProps { onCardClick: () => void } +// Это означает, что компонент ожидает получить пропс onBackClick, который должен быть функцией, вызываемой при определенном событии (например, при нажатии кнопки "Назад"). + export const WorkoutCardHome: React.FC = ({ onBackClick, onCardClick }) => { return (
{ const history = useHistory() diff --git a/src/pages/CourseExercises.tsx b/src/pages/CourseExercises.tsx index 0d92c4f..d9718c3 100644 --- a/src/pages/CourseExercises.tsx +++ b/src/pages/CourseExercises.tsx @@ -1,14 +1,14 @@ "use client" -import { useState, useEffect } from "react" -import { useParams, useHistory } from "react-router-dom" +import { useState, useEffect } from "react"; +import { useParams, useHistory } from "react-router-dom"; -import HeaderNav from "../components/HeaderNav" -import BottomNavigation from "../components/BottomNavigation" +import HeaderNav from "../components/HeaderNav"; +import BottomNavigation from "../components/BottomNavigation"; import { connect } from '../confconnect'; -import { getRouteExercise } from "../shared/consts/router" +import { getRouteExercise } from "../shared/consts/router"; interface CourseExercises { @@ -28,7 +28,7 @@ interface Exercise { export const CourseExercises = () => { -const history = useHistory(); + const history = useHistory(); const { id } = useParams<{ id: string }>(); // const [pacientData, setPacientData] = useState(null); @@ -36,8 +36,6 @@ const history = useHistory(); const [course_exercises, setExercises] = useState([]); const [selectedDay, setSelectedDay] = useState(null); - - const token = localStorage.getItem('authToken'); useEffect(() => { @@ -130,26 +128,33 @@ const history = useHistory();
)} - + {/* надо делать по индексу, чтоб шло по порядку + {filteredExercises + .filter(item => item.deleted_at === null) // фильтруем по условию + .length > 0 ? ( + filteredExercises + .filter(item => item.deleted_at === null) + + */}
{filteredExercises.length > 0 ? ( - filteredExercises.map((item) => ( -
history.push(getRouteExercise(item.id_course.toString(), item.id_exercise.toString()))} - className="p-4 mb-4 cursor-pointer hover:scale-105 transition duration-300 glass-morphism rounded-3xl border border-white/50 shadow-2xl overflow-hidden backdrop-blur-2xl relative"> + filteredExercises.map((item, index) => ( +
history.push(getRouteExercise(item.id_course.toString(), item.id_exercise.toString()))} + className="p-4 mb-4 cursor-pointer hover:scale-105 transition duration-300 glass-morphism rounded-3xl border border-white/50 shadow-2xl overflow-hidden backdrop-blur-2xl relative">

Упражнение {item.id_exercise}

{item.exercise.title}

- {/* Иконка стрелки */} -
- - - -
+ {/* Иконка стрелки */} +
+ + + +
diff --git a/src/pages/CourseExercises_ old.tsx b/src/pages/CourseExercises_ old.tsx deleted file mode 100644 index dc03f4f..0000000 --- a/src/pages/CourseExercises_ old.tsx +++ /dev/null @@ -1,288 +0,0 @@ -"use client" - -import { useState, useEffect } from "react" -import { useHistory, useParams } from "react-router-dom" - -import HeaderNav from "../components/HeaderNav" -import BottomNavigation from "../components/BottomNavigation" -import video from "../assets/img/video.mov" - -import { connect } from '../confconnect'; -import { getRouteExercise } from "../shared/consts/router" - -interface CourseExercise { - ID: number; - title: string; - desc: string; - url_file_img: string; -} - - - - -export const CourseExercises = () => { - const history = useHistory() - // const { id } = useParams<{ id: string }>(); - const [currentSlide, setCurrentSlide] = useState(0); - const token = localStorage.getItem('authToken'); - - useEffect(() => { - console.log(token) - if (!token) { - setError('Токен не найден'); - return; - } - - connect.get('/pacient/', { - headers: { - Authorization: `Bearer ${token}`, - }, - }) - .then(response => { - console.log('Response status:', response.status); - - // Предполагаемая структура: - // response.data.courses — массив пользователей - const users = response.data.courses || []; - - // Собираем все курсы из всех пользователей - const allCourses: Course[] = []; - - users.forEach(user => { - if (user.Courses && Array.isArray(user.Courses)) { - user.Courses.forEach(course => { - // Можно добавить проверку или преобразование - allCourses.push({ - ID: course.id, // или course.ID, зависит от структуры - title: course.title, - desc: course.desc, - url_file_img: course.url_file_img, - }); - }); - } - }); - - setCourses(allCourses); - }) - .catch(error => { - if (error.response) { - console.error('Ошибка ответа сервера:', error.response.status, error.response.data); - setError(`Ошибка сервера: ${error.response.status}`); - } else if (error.request) { - console.error('Нет ответа от сервера:', error.request); - setError('Нет ответа от сервера'); - } else { - console.error('Ошибка при настройке запроса:', error.message); - setError(`Ошибка: ${error.message}`); - } - }); - }, [token]); - - -const course = { - id: 2, - description: 'Очень сильно', - name: 'Качаем ноги', - exercises: [ - { - id: 1, - name: "Подъемы ног лежа", - duration: "15 мин", - sets: 3, - reps: 12, - image: "/placeholder.svg?height=200&width=300", - difficulty: "Легкий", - description: "Укрепление мышц бедра и улучшение подвижности коленного сустава", - calories: 45, - }, - { - id: 2, - name: "Приседания у стены", - duration: "10 мин", - sets: 2, - reps: 15, - image: "/placeholder.svg?height=200&width=300", - difficulty: "Средний", - description: "Безопасные приседания для восстановления силы ног", - calories: 60, - }, - { - id: 3, - name: "Растяжка квадрицепса", - duration: "8 мин", - sets: 1, - reps: 30, - image: "/placeholder.svg?height=200&width=300", - difficulty: "Легкий", - description: "Улучшение гибкости и снятие напряжения", - calories: 25, - }, - { - id: 4, - name: "Укрепление икр", - duration: "12 мин", - sets: 3, - reps: 20, - image: "/placeholder.svg?height=200&width=300", - difficulty: "Средний", - description: "Развитие силы и выносливости икроножных мышц", - calories: 40, - }, - ]} - - // Функции для переключения на следующее/предыдущее упражнение - const nextExercise = () => { - setCurrentSlide((prev) => (prev + 1) % course.exercises.length) - } - - const prevExercise = () => { - setCurrentSlide((prev) => (prev - 1 + course.exercises.length) % course.exercises.length) - } - const currentExercise = course.exercises[currentSlide] - - // const getDifficultyColor = (difficulty: string) => { - // switch (difficulty) { - // case "Легкий": - // return "bg-gradient-to-r from-emerald-400 to-green-500" - // case "Средний": - // return "bg-gradient-to-r from-amber-400 to-orange-500" - // case "Сложный": - // return "bg-gradient-to-r from-red-400 to-pink-500" - // default: - // return "bg-gradient-to-r from-gray-400 to-gray-500" - // } - // } - - return ( - - - - -
-
- - - - - {/* Exercise Slider */} -
-
- {/* Exercise Image */} -
-
- - {/* Exercise Info */} -
-

{currentExercise.name}

- - - - -
-
- - {/* Slide indicators */} -
- {course.exercises.map((_, index) => ( -
-
- - - - - - {/* Exercise List */} -
-

Все упражнения курса

-
- {course.exercises.map((exercise, index) => ( -
history.push(getRouteExercise(currentExercise.id))} - className={`glass-morphism rounded-2xl p-4 sm:p-6 border border-white/50 shadow-lg cursor-pointer transition-all duration-300 hover:shadow-2xl transform hover:scale-[1.02] backdrop-blur-xl ${index === currentSlide ? "ring-2 ring-[#2BACBE] bg-cyan-50/20" : "" - }`} - > -
-
-
- {index + 1} -
- -
-
-

{exercise.name}

-

{exercise.description}

- -
-
- - - -
-
-
- ))} -
-
- - -
-
- ) -} - - diff --git a/src/pages/Courses old.tsx b/src/pages/Courses old.tsx deleted file mode 100644 index b2b79c6..0000000 --- a/src/pages/Courses old.tsx +++ /dev/null @@ -1,133 +0,0 @@ -"use client" - -import { useState, useEffect } from 'react'; -import BottomNavigation from "../components/BottomNavigation" -import { useHistory } from "react-router-dom" -import HeaderNav from "../components/HeaderNav" -import { getRouteCourseExercises } from "../shared/consts/router" - -// Типизация Exercise -interface Exercise { - id: number; - title: string; - desc: string; - url_file_img: string; -} - -const ProgressLine = () => { - return ( -
- ); -} - -const AnalitcsCards = () => { - return ( -
-
-
- {/* Прогрессная часть */} - - - {/* Текст поверх линии */} -
Вы прошли реабилитацию на {85}%
-
-
-
- ) -} - -export const Courses = () => { - const history = useHistory() - - // Внутренний компонент для загрузки упражнений - const Exercises = () => { - const [exercises, setExercises] = useState([]); - - -useEffect(() => { - fetch('/pacient/exercises') - .then(res => { - if (!res.ok) throw new Error('Ошибка при загрузке упражнений'); - return res.json(); - }) - .then((data: Exercise[]) => { - console.log('test'); - setExercises(data); - - }) - .catch(err => { - setError(err.message); - - }); -}, []); - - return ( -
- {/* Можно добавить заголовок или обертку */} -
    - {exercises.map(ex => ( -
  • -

    {ex.title}

    -

    {ex.desc}

    - {/* Вставка изображения */} - {ex.title} -
    • - ))} -
-
- ); - }; - - return ( -
- - - - {/* Внедрение компонента упражнений */} - - - {/* Можно оставить закомментированный блок или убрать его */} - {/* -
-
-

Мои курсы

- -
-
- {courses.map((course) => ( -
history.push(getRouteCourseExercises(':id'))} - className="bg-white/30 backdrop-blur-2xl rounded-3xl p-6 border border-white/20 shadow-xl cursor-pointer hover:shadow-2xl transition-all duration-300 transform hover:scale-[1.02]" - > -
- -
-

{course.name}

-
-
-
-

{course.progress}% завершено

-
-
- {/* Иконка стрелки */} - {/**/} - {/*
-
-
- ))} -
-
*/} - - -
- ) -} \ No newline at end of file diff --git a/src/pages/Courses.tsx b/src/pages/Courses.tsx index 451a377..74814b1 100644 --- a/src/pages/Courses.tsx +++ b/src/pages/Courses.tsx @@ -1,9 +1,11 @@ "use client" import { useState, useEffect } from 'react'; -import BottomNavigation from "../components/BottomNavigation" -import { useHistory } from "react-router-dom" -import HeaderNav from "../components/HeaderNav" +import { useHistory } from "react-router-dom"; + +import BottomNavigation from "../components/BottomNavigation"; + +import HeaderNav from "../components/HeaderNav"; import { connect } from '../confconnect'; import { getRouteCourseExercises } from '../shared/consts/router'; @@ -39,6 +41,10 @@ const AnalitcsCards = () => { ) } + + +// НАЧАЛО КОМПОНЕНТА + export const Courses = () => { const history = useHistory(); @@ -106,11 +112,7 @@ export const Courses = () => { // Цвета для прогресс-баров в оттенках cyan const progressColors = [ - "from-cyan-400 to-cyan-600", - "from-cyan-500 to-cyan-700", - "from-teal-400 to-cyan-500", - "from-cyan-300 to-teal-600", - "from-sky-400 to-cyan-600" + "from-gray-400 to-cyan-800", ]; //item.exercise.title diff --git a/src/pages/Exercise old.tsx b/src/pages/Exercise old.tsx deleted file mode 100644 index b43f781..0000000 --- a/src/pages/Exercise old.tsx +++ /dev/null @@ -1,240 +0,0 @@ -"use client" - -import { useState, useEffect } from "react" -import { useHistory } from "react-router-dom" - -import BottomNavigation from "../components/BottomNavigation" -import { getRouteCourseComplete } from "../shared/consts/router" -import HeaderNav from "../components/HeaderNav" -import video from "../assets/img/video.mov" - - -export interface Exercise { - id: number; - title: string; - desc: string; - url_file: string; - url_file_img: string; -} - - - - - -export const Exercise = () => { - const history = useHistory() - // const { id } = useParams<{ id: string }>() - const [isPlaying, setIsPlaying] = useState(false) - const [currentTime, setCurrentTime] = useState(0) - const [totalTime] = useState(900) // 15 minutes in seconds - const [currentSet, setCurrentSet] = useState(1) - const [totalSets] = useState(3) - - useEffect(() => { - let interval: NodeJS.Timeout | undefined - if (isPlaying) { - interval = setInterval(() => { - setCurrentTime((prev) => { - if (prev >= totalTime) { - setIsPlaying(false) - // Show completion animation - history.push(getRouteCourseComplete()) - return totalTime - } - return prev + 1 - }) - }, 1000) - } - return () => { - if (interval) clearInterval(interval) - } - }, [isPlaying, totalTime, history]) - - const formatTime = (seconds: number) => { - const mins = Math.floor(seconds / 60) - const secs = seconds % 60 - return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}` - } - - const progress = (currentTime / totalTime) * 100 - - - - const PlayIcon = () => ( - - - - ) - - const PauseIcon = () => ( - - - - ) - - const RefreshIcon = () => ( - - ) - - const CheckIcon = () => ( - - - - ) - - const exerciseSteps = [ - { - title: "Исходное положение", - description: - "Лягте на спирку на коврик. Руки вдоль тела, ладони прижаты к полу. Ноги выпрямлены, носки направлены вверх. Поясница плотно прижата к полу.", - }, - { - title: "Задание", - description: - "Медленно поднимите прямые ноги до угла 90 градусов. Задержитесь на 2 секунды, затем медленно опустите ноги, не касаясь пола. Повторите движение плавно и контролируемо.", - }, - { - title: "Подходы", - description: "Выполните 3 подхода по 12 повторений с отдыхом 60 секунд между подходами.", - }, - { - title: "Перерыв", - description: "Отдыхайте 60 секунд между подходами. Дышите спокойно и расслабьте мышцы.", - }, - { - title: "Динамика и статика", - description: - "Динамическая фаза: подъем и опускание ног выполняется плавно, 2 секунды вверх, 2 секунды вниз. Статическая фаза: удержание ног в верхней точке на 2 секунды.", - }, - ] - - - return ( - -
-
- - - - -
-
-
-
-
-
- -
- {exerciseSteps.map((step, index) => ( -
-
- -
-

{step.title}

-

{step.description}

-
-
-
- ))} -
- - {/* Fixed Timer at Bottom */} -
-
-
-
-
- - Подход {currentSet} из {totalSets} - -
- - {formatTime(currentTime)} / {formatTime(totalTime)} - -
-
-
-
-
- - - -
-
-
- -
-
- ) -} - - diff --git a/src/pages/Exercise.tsx b/src/pages/Exercise.tsx index e6956b3..2b9a1d4 100644 --- a/src/pages/Exercise.tsx +++ b/src/pages/Exercise.tsx @@ -1,15 +1,21 @@ "use client" -import { useState, useEffect } from "react" -import { useHistory, useParams } from "react-router-dom" +//хуки +import { useState, useEffect } from "react"; +import { useHistory, useParams } from "react-router-dom"; + +import { CheckIcon } from "../components/icons/CheckIcon"; +import { RefreshIcon } from "../components/icons/RefreshIcon"; + +import HeaderNav from "../components/HeaderNav"; +import BottomNavigation from "../components/BottomNavigation"; + +// import { getRouteCourseComplete } from "../shared/consts/router"; +import { connect } from "../confconnect"; + + +//В TypeScript ключевое слово interface используется для определения интерфейсов — это способ описать структуру объектов, то есть какие свойства и методы у них есть, и какие типы данных они содержат -import { CheckIcon } from "../components/icons/CheckIcon" -import { RefreshIcon } from "../components/icons/RefreshIcon" -import BottomNavigation from "../components/BottomNavigation" -import { getRouteCourseComplete } from "../shared/consts/router" -import HeaderNav from "../components/HeaderNav" -import video from "../assets/img/video.mov" -import { connect } from "../confconnect" export interface Exercise { id: number @@ -115,7 +121,7 @@ export const Exercise = () => { // Отправляем результат на сервер при завершении submitProgress() // Show completion animation - history.push(getRouteCourseComplete()) + // history.push(getRouteCourseComplete()) return totalTime } return prev + 1 @@ -257,7 +263,7 @@ export const Exercise = () => { return (
- +
@@ -384,9 +390,6 @@ export const Exercise = () => { className={`cursor-pointer px-6 py-3 font-bold rounded-xl transition-all duration-500 hover:scale-105 hover:shadow-lg border border-gray-200 flex items-center justify-center ${!isActive ? "bg-white text-cyan-500" : "bg-orange-400 text-white"}`} > - - - sum + course.progress, 0) / totalCourses) const handleWorkoutClick = () => { - history.push(getRouteExercise(":id")) + history.push(getRouteExercise()) } const handleBackClick = () => { diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 719f447..7f0758c 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -1,14 +1,14 @@ "use client" -import React, { useState } from "react" -import { useHistory } from "react-router-dom" -import manImage from "../assets/img/man.svg" +import React, { useState } from "react"; +import { useHistory } from "react-router-dom"; +import manImage from "../assets/img/man.svg"; import { connect } from '../confconnect'; import axios from 'axios'; import { toast } from 'sonner'; -import { getRouteHome } from '../shared/consts/router' -import { getRouteForgotPassword } from '../shared/consts/router' +import { getRouteHome } from '../shared/consts/router'; +import { getRouteForgotPassword } from '../shared/consts/router'; export default function LoginPage() { diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx index 2285bf8..2193c43 100644 --- a/src/pages/Settings.tsx +++ b/src/pages/Settings.tsx @@ -1,11 +1,11 @@ "use client" -import type React from "react" -import { useHistory } from "react-router-dom" -import BottomNavigation from "../components/BottomNavigation" +import type React from "react"; +import { useHistory } from "react-router-dom"; +import BottomNavigation from "../components/BottomNavigation"; -import { getRouteLogin } from "../shared/consts/router" -import manImage from "../assets/img/man.svg" +import { getRouteLogin } from "../shared/consts/router"; +import manImage from "../assets/img/man.svg"; const Settings: React.FC = () => { const history = useHistory() diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx index 4d40de8..ac50fd3 100644 --- a/src/pages/Welcome.tsx +++ b/src/pages/Welcome.tsx @@ -1,7 +1,7 @@ "use client" -import type React from "react" -import { useEffect, useState } from "react" +import type React from "react"; +import { useEffect, useState } from "react"; import { useIonRouter } from '@ionic/react'; const Welcome: React.FC = () => {