поменяла алерты на тостер/соннер + настройка отображения небольшая
This commit is contained in:
parent
00126080bf
commit
1197c9ca1d
@ -6,6 +6,7 @@ const Toaster: React.FC<ToasterProps> = ({ className, ...props }) => {
|
|||||||
return (
|
return (
|
||||||
<Sonner
|
<Sonner
|
||||||
className={`toaster group ${className ?? ''}`}
|
className={`toaster group ${className ?? ''}`}
|
||||||
|
position="bottom-center"
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -42,4 +42,24 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ToastRoot[data-swipe="move"] {
|
||||||
|
transform: translateX(var(--radix-toast-swipe-move-x));
|
||||||
|
}
|
||||||
|
.ToastRoot[data-swipe="cancel"] {
|
||||||
|
transform: translateX(0);
|
||||||
|
transition: transform 200ms ease-out;
|
||||||
|
}
|
||||||
|
.ToastRoot[data-swipe="end"] {
|
||||||
|
animation: slideRight 100ms ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideRight {
|
||||||
|
from {
|
||||||
|
transform: translateX(var(--radix-toast-swipe-end-x));
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -7,6 +7,32 @@ import { useHistory } from "react-router-dom"
|
|||||||
import HeaderNav from "../components/HeaderNav"
|
import HeaderNav from "../components/HeaderNav"
|
||||||
import { getRouteCourseExercises } from "../shared/consts/router"
|
import { getRouteCourseExercises } from "../shared/consts/router"
|
||||||
|
|
||||||
|
const ProgressLine = () => {
|
||||||
|
return (<div
|
||||||
|
className="h-full bg-orange-400 transition-all duration-500 absolute left-0 top-0 rounded-l-xl"
|
||||||
|
style={{ width: '85%' }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const AnalitcsCards = () => {
|
||||||
|
|
||||||
|
{/* Analytics Cards */ }
|
||||||
|
return (
|
||||||
|
<div className="px-6 mb-8" >
|
||||||
|
<div className="text-center relative ">
|
||||||
|
<div className="w-full h-10 bg-gray-500 rounded-xl relative flex items-center justify-center mb-4 shadow-xl">
|
||||||
|
{/* Прогрессная часть */}
|
||||||
|
<ProgressLine/>
|
||||||
|
|
||||||
|
{/* Текст поверх линии */}
|
||||||
|
<div className="absolute text-white font-semibold text-base">Вы прошли реабилитацию на {85}%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
const Home: React.FC = () => {
|
const Home: React.FC = () => {
|
||||||
const history = useHistory()
|
const history = useHistory()
|
||||||
|
|
||||||
@ -16,35 +42,10 @@ const Home: React.FC = () => {
|
|||||||
{ id: 3, name: "Реабилитация плеча", progress: 90, color: "from-[#2BACBE]/80 to-[#5F5C5C]" },
|
{ id: 3, name: "Реабилитация плеча", progress: 90, color: "from-[#2BACBE]/80 to-[#5F5C5C]" },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="my-36 min-h-screen max-w-4xl mx-auto">
|
<div className="my-36 min-h-screen max-w-4xl mx-auto">
|
||||||
<HeaderNav item='Курсы' text='все назначенные' />
|
<HeaderNav item='Курсы' text='все назначенные' />
|
||||||
|
<AnalitcsCards />
|
||||||
{/* Analytics Cards */}
|
|
||||||
<div className="px-6 mb-8">
|
|
||||||
|
|
||||||
<div className="text-center relative ">
|
|
||||||
|
|
||||||
<div className="w-full h-10 bg-gray-500 rounded-xl relative flex items-center justify-center mb-4 shadow-xl">
|
|
||||||
{/* Прогрессная часть */}
|
|
||||||
<div
|
|
||||||
className="h-full bg-orange-400 transition-all duration-500 absolute left-0 top-0 rounded-l-xl"
|
|
||||||
style={{ width: '85%' }}
|
|
||||||
></div>
|
|
||||||
{/* Текст поверх линии */}
|
|
||||||
<div className="absolute text-white font-semibold text-base">Вы прошли реабилитацию на {85}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{/* Courses */}
|
{/* Courses */}
|
||||||
|
@ -96,6 +96,51 @@ const Exercise: React.FC = () => {
|
|||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
class User {
|
||||||
|
age = 18;
|
||||||
|
private _token = '';
|
||||||
|
|
||||||
|
constructor(age = 18, token = '') {
|
||||||
|
this.token = token
|
||||||
|
this.age = age
|
||||||
|
}
|
||||||
|
|
||||||
|
get isOld() {
|
||||||
|
return this.age > 70;
|
||||||
|
}
|
||||||
|
|
||||||
|
get isAuth() {
|
||||||
|
|
||||||
|
return this._token.length > 0 && this._token.length <= 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
set token (t: string) {
|
||||||
|
if(t.length === 0) return;
|
||||||
|
|
||||||
|
this._token = t;
|
||||||
|
}
|
||||||
|
|
||||||
|
get token () {
|
||||||
|
return this._token;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const user = new User();
|
||||||
|
|
||||||
|
user.isOld // false
|
||||||
|
|
||||||
|
user.age = 71
|
||||||
|
|
||||||
|
user.isOld // true
|
||||||
|
|
||||||
|
user.isAuth // false
|
||||||
|
|
||||||
|
user.token = '123'
|
||||||
|
|
||||||
|
user.isAuth // true
|
||||||
|
|
||||||
|
user.token = '123'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<div className="bg-gray-50 w-full h-full overflow-auto">
|
<div className="bg-gray-50 w-full h-full overflow-auto">
|
||||||
@ -103,9 +148,6 @@ const Exercise: React.FC = () => {
|
|||||||
|
|
||||||
<HeaderNav item='Надо разобраться?' text='упражнение' />
|
<HeaderNav item='Надо разобраться?' text='упражнение' />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{/* Video/Image Section */}
|
{/* Video/Image Section */}
|
||||||
<div className="px-4 sm:px-6 mt-10 mb-6">
|
<div className="px-4 sm:px-6 mt-10 mb-6">
|
||||||
<div className="glass-morphism rounded-3xl overflow-hidden shadow-2xl border border-white/20 backdrop-blur-2xl">
|
<div className="glass-morphism rounded-3xl overflow-hidden shadow-2xl border border-white/20 backdrop-blur-2xl">
|
||||||
|
@ -23,7 +23,7 @@ const handleSubmit = async (e: React.FormEvent) => {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
await connect.post('/reset-password/api/add-request', { email });
|
await connect.post('/reset-password/api/add-request', { email });
|
||||||
toast.error('Письмо для сброса пароля отправлено.', {
|
toast.success('Письмо для сброса пароля отправлено.', {
|
||||||
richColors: true,
|
richColors: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -38,7 +38,6 @@ const handleSubmit = async (e: React.FormEvent) => {
|
|||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
setIsSubmitted(false);
|
setIsSubmitted(false);
|
||||||
toast.error('Ошибка авторизации!', {
|
toast.error('Ошибка авторизации!', {
|
||||||
description: `${e}`,
|
|
||||||
richColors: true,
|
richColors: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -68,14 +68,13 @@ export default function LoginPage() {
|
|||||||
if (error.response.status === 400) {
|
if (error.response.status === 400) {
|
||||||
|
|
||||||
toast.error('Неверные данные для входа', {
|
toast.error('Неверные данные для входа', {
|
||||||
description: `${e}`,
|
richColors: true,
|
||||||
richColors: true,
|
});
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.error('Неожиданная ошибка:', error);
|
console.error('Неожиданная ошибка:', error);
|
||||||
;
|
;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -87,9 +86,9 @@ export default function LoginPage() {
|
|||||||
const handleRegisterSubmit = async (e: React.FormEvent) => {
|
const handleRegisterSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
if (registerFormData.password !== registerFormData.confirmPassword) {
|
if (registerFormData.password !== registerFormData.confirmPassword) {
|
||||||
toast.error('Пароли не совпадают', {
|
toast.error('Пароли не совпадают', {
|
||||||
richColors: true,
|
richColors: true,
|
||||||
});
|
});
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
@ -109,14 +108,18 @@ export default function LoginPage() {
|
|||||||
localStorage.setItem('userName', data.user_name)
|
localStorage.setItem('userName', data.user_name)
|
||||||
|
|
||||||
console.log('Данные сохранены в localStorage')
|
console.log('Данные сохранены в localStorage')
|
||||||
alert('Вы успешно зерегистрировались!')
|
toast.success('Вы успешно зарегистрировались', {
|
||||||
|
richColors: true,
|
||||||
|
});
|
||||||
console.log('Отправляемые данные:', { email, password });
|
console.log('Отправляемые данные:', { email, password });
|
||||||
|
|
||||||
// После этого можно перейти или показать сообщение
|
// После этого можно перейти или показать сообщение
|
||||||
history.push(getRouteHome())
|
history.push(getRouteHome())
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Ошибка при регистрации:', error)
|
console.error('Ошибка при регистрации:', error)
|
||||||
alert('Ошибка при регистрации')
|
toast.error('Ошибка при регистрации', {
|
||||||
|
richColors: true,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -151,8 +154,8 @@ export default function LoginPage() {
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={() => setActiveTab("login")}
|
onClick={() => setActiveTab("login")}
|
||||||
className={`flex-1 px-3 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${activeTab === "login"
|
className={`flex-1 px-3 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${activeTab === "login"
|
||||||
? "bg-white text-gray-800 shadow-lg"
|
? "bg-white text-gray-800 shadow-lg"
|
||||||
: "text-white/80 hover:text-white hover:bg-white/10"
|
: "text-white/80 hover:text-white hover:bg-white/10"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
Вход
|
Вход
|
||||||
@ -161,8 +164,8 @@ export default function LoginPage() {
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={() => setActiveTab("register")}
|
onClick={() => setActiveTab("register")}
|
||||||
className={`flex-1 px-3 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${activeTab === "register"
|
className={`flex-1 px-3 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${activeTab === "register"
|
||||||
? "bg-white text-gray-800 shadow-lg"
|
? "bg-white text-gray-800 shadow-lg"
|
||||||
: "text-white/80 hover:text-white hover:bg-white/10"
|
: "text-white/80 hover:text-white hover:bg-white/10"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
Регистрация
|
Регистрация
|
||||||
@ -224,7 +227,7 @@ export default function LoginPage() {
|
|||||||
aria-label={showPassword ? "Hide password" : "Show password"}
|
aria-label={showPassword ? "Hide password" : "Show password"}
|
||||||
>
|
>
|
||||||
{showPassword ? (
|
{showPassword ? (
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 40 44" fill="none">
|
<svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 40 44" fill="none">
|
||||||
<path d="M5.61017 0.723266C5.22511 0.35136 4.70938 0.145572 4.17406 0.150224C3.63874 0.154875 3.12667 0.369595 2.74813 0.748137C2.36959 1.12668 2.15487 1.63875 2.15021 2.17407C2.14556 2.70939 2.35135 3.22512 2.72326 3.61018L7.67226 8.55918C4.75267 10.756 2.20467 13.7736 0.299799 17.5874C0.158192 17.8708 0.0844727 18.1833 0.0844727 18.5001C0.0844727 18.8169 0.158192 19.1293 0.299799 19.4127C4.70572 28.2266 12.5294 32.7917 20.5 32.7917C23.6748 32.7917 26.8292 32.0669 29.7488 30.6378L35.3899 36.2769C35.775 36.6488 36.2907 36.8545 36.826 36.8499C37.3614 36.8452 37.8734 36.6305 38.252 36.252C38.6305 35.8734 38.8452 35.3614 38.8499 34.826C38.8545 34.2907 38.6487 33.775 38.2768 33.3899L5.61017 0.723266ZM26.6536 27.5406C24.6528 28.3225 22.5703 28.7084 20.5 28.7084C14.4383 28.7084 8.24597 25.4009 4.43213 18.5001C6.10017 15.4804 8.22555 13.1509 10.5939 11.4828L14.9712 15.8602C14.4242 17.0034 14.2453 18.2882 14.4592 19.5374C14.6731 20.7865 15.2692 21.9386 16.1653 22.8348C17.0615 23.7309 18.2136 24.327 19.4627 24.5409C20.7119 24.7548 21.9967 24.5759 23.1399 24.0289L26.6536 27.5406ZM33.8771 22.3711C34.8632 21.2359 35.7676 19.9476 36.568 18.5001C32.7541 11.5992 26.5638 8.29173 20.5 8.29173C20.2714 8.29173 20.0427 8.29649 19.814 8.30602L16.1697 4.66368C17.5933 4.36102 19.0446 4.20842 20.5 4.20839C28.4687 4.20839 36.2944 8.77356 40.7003 17.5874C40.8419 17.8708 40.9156 18.1833 40.9156 18.5001C40.9156 18.8169 40.8419 19.1293 40.7003 19.4127C39.656 21.5285 38.3343 23.4956 36.7701 25.2621L33.8771 22.3711Z" fill="#636B6F" />
|
<path d="M5.61017 0.723266C5.22511 0.35136 4.70938 0.145572 4.17406 0.150224C3.63874 0.154875 3.12667 0.369595 2.74813 0.748137C2.36959 1.12668 2.15487 1.63875 2.15021 2.17407C2.14556 2.70939 2.35135 3.22512 2.72326 3.61018L7.67226 8.55918C4.75267 10.756 2.20467 13.7736 0.299799 17.5874C0.158192 17.8708 0.0844727 18.1833 0.0844727 18.5001C0.0844727 18.8169 0.158192 19.1293 0.299799 19.4127C4.70572 28.2266 12.5294 32.7917 20.5 32.7917C23.6748 32.7917 26.8292 32.0669 29.7488 30.6378L35.3899 36.2769C35.775 36.6488 36.2907 36.8545 36.826 36.8499C37.3614 36.8452 37.8734 36.6305 38.252 36.252C38.6305 35.8734 38.8452 35.3614 38.8499 34.826C38.8545 34.2907 38.6487 33.775 38.2768 33.3899L5.61017 0.723266ZM26.6536 27.5406C24.6528 28.3225 22.5703 28.7084 20.5 28.7084C14.4383 28.7084 8.24597 25.4009 4.43213 18.5001C6.10017 15.4804 8.22555 13.1509 10.5939 11.4828L14.9712 15.8602C14.4242 17.0034 14.2453 18.2882 14.4592 19.5374C14.6731 20.7865 15.2692 21.9386 16.1653 22.8348C17.0615 23.7309 18.2136 24.327 19.4627 24.5409C20.7119 24.7548 21.9967 24.5759 23.1399 24.0289L26.6536 27.5406ZM33.8771 22.3711C34.8632 21.2359 35.7676 19.9476 36.568 18.5001C32.7541 11.5992 26.5638 8.29173 20.5 8.29173C20.2714 8.29173 20.0427 8.29649 19.814 8.30602L16.1697 4.66368C17.5933 4.36102 19.0446 4.20842 20.5 4.20839C28.4687 4.20839 36.2944 8.77356 40.7003 17.5874C40.8419 17.8708 40.9156 18.1833 40.9156 18.5001C40.9156 18.8169 40.8419 19.1293 40.7003 19.4127C39.656 21.5285 38.3343 23.4956 36.7701 25.2621L33.8771 22.3711Z" fill="#636B6F" />
|
||||||
</svg>
|
</svg>
|
||||||
) : (
|
) : (
|
||||||
@ -367,7 +370,7 @@ export default function LoginPage() {
|
|||||||
aria-label={showConfirmRegisterPassword ? "Hide password" : "Show password"}
|
aria-label={showConfirmRegisterPassword ? "Hide password" : "Show password"}
|
||||||
>
|
>
|
||||||
{showConfirmRegisterPassword ? (
|
{showConfirmRegisterPassword ? (
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 40 44" fill="none">
|
<svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 40 44" fill="none">
|
||||||
<path d="M5.61017 0.723266C5.22511 0.35136 4.70938 0.145572 4.17406 0.150224C3.63874 0.154875 3.12667 0.369595 2.74813 0.748137C2.36959 1.12668 2.15487 1.63875 2.15021 2.17407C2.14556 2.70939 2.35135 3.22512 2.72326 3.61018L7.67226 8.55918C4.75267 10.756 2.20467 13.7736 0.299799 17.5874C0.158192 17.8708 0.0844727 18.1833 0.0844727 18.5001C0.0844727 18.8169 0.158192 19.1293 0.299799 19.4127C4.70572 28.2266 12.5294 32.7917 20.5 32.7917C23.6748 32.7917 26.8292 32.0669 29.7488 30.6378L35.3899 36.2769C35.775 36.6488 36.2907 36.8545 36.826 36.8499C37.3614 36.8452 37.8734 36.6305 38.252 36.252C38.6305 35.8734 38.8452 35.3614 38.8499 34.826C38.8545 34.2907 38.6487 33.775 38.2768 33.3899L5.61017 0.723266ZM26.6536 27.5406C24.6528 28.3225 22.5703 28.7084 20.5 28.7084C14.4383 28.7084 8.24597 25.4009 4.43213 18.5001C6.10017 15.4804 8.22555 13.1509 10.5939 11.4828L14.9712 15.8602C14.4242 17.0034 14.2453 18.2882 14.4592 19.5374C14.6731 20.7865 15.2692 21.9386 16.1653 22.8348C17.0615 23.7309 18.2136 24.327 19.4627 24.5409C20.7119 24.7548 21.9967 24.5759 23.1399 24.0289L26.6536 27.5406ZM33.8771 22.3711C34.8632 21.2359 35.7676 19.9476 36.568 18.5001C32.7541 11.5992 26.5638 8.29173 20.5 8.29173C20.2714 8.29173 20.0427 8.29649 19.814 8.30602L16.1697 4.66368C17.5933 4.36102 19.0446 4.20842 20.5 4.20839C28.4687 4.20839 36.2944 8.77356 40.7003 17.5874C40.8419 17.8708 40.9156 18.1833 40.9156 18.5001C40.9156 18.8169 40.8419 19.1293 40.7003 19.4127C39.656 21.5285 38.3343 23.4956 36.7701 25.2621L33.8771 22.3711Z" fill="#636B6F" />
|
<path d="M5.61017 0.723266C5.22511 0.35136 4.70938 0.145572 4.17406 0.150224C3.63874 0.154875 3.12667 0.369595 2.74813 0.748137C2.36959 1.12668 2.15487 1.63875 2.15021 2.17407C2.14556 2.70939 2.35135 3.22512 2.72326 3.61018L7.67226 8.55918C4.75267 10.756 2.20467 13.7736 0.299799 17.5874C0.158192 17.8708 0.0844727 18.1833 0.0844727 18.5001C0.0844727 18.8169 0.158192 19.1293 0.299799 19.4127C4.70572 28.2266 12.5294 32.7917 20.5 32.7917C23.6748 32.7917 26.8292 32.0669 29.7488 30.6378L35.3899 36.2769C35.775 36.6488 36.2907 36.8545 36.826 36.8499C37.3614 36.8452 37.8734 36.6305 38.252 36.252C38.6305 35.8734 38.8452 35.3614 38.8499 34.826C38.8545 34.2907 38.6487 33.775 38.2768 33.3899L5.61017 0.723266ZM26.6536 27.5406C24.6528 28.3225 22.5703 28.7084 20.5 28.7084C14.4383 28.7084 8.24597 25.4009 4.43213 18.5001C6.10017 15.4804 8.22555 13.1509 10.5939 11.4828L14.9712 15.8602C14.4242 17.0034 14.2453 18.2882 14.4592 19.5374C14.6731 20.7865 15.2692 21.9386 16.1653 22.8348C17.0615 23.7309 18.2136 24.327 19.4627 24.5409C20.7119 24.7548 21.9967 24.5759 23.1399 24.0289L26.6536 27.5406ZM33.8771 22.3711C34.8632 21.2359 35.7676 19.9476 36.568 18.5001C32.7541 11.5992 26.5638 8.29173 20.5 8.29173C20.2714 8.29173 20.0427 8.29649 19.814 8.30602L16.1697 4.66368C17.5933 4.36102 19.0446 4.20842 20.5 4.20839C28.4687 4.20839 36.2944 8.77356 40.7003 17.5874C40.8419 17.8708 40.9156 18.1833 40.9156 18.5001C40.9156 18.8169 40.8419 19.1293 40.7003 19.4127C39.656 21.5285 38.3343 23.4956 36.7701 25.2621L33.8771 22.3711Z" fill="#636B6F" />
|
||||||
</svg>
|
</svg>
|
||||||
) : (
|
) : (
|
||||||
|
Loading…
x
Reference in New Issue
Block a user