104 lines
4.7 KiB
TypeScript
104 lines
4.7 KiB
TypeScript
"use client"
|
||
|
||
import type React from "react"
|
||
import { useHistory } from "react-router-dom"
|
||
import BottomNavigation from "../components/BottomNavigation"
|
||
|
||
const Settings: React.FC = () => {
|
||
const history = useHistory()
|
||
|
||
const handleLogout = () => {
|
||
// Simulate logout
|
||
history.push("/login")
|
||
}
|
||
|
||
return (
|
||
<div className=" bg-gray-50 min-h-screen mx-auto pb-50" style={{ overflow: 'auto' }}>
|
||
{/* Header */}
|
||
<div className="bg-gradient-to-r from-gray-600 to-gray-800 px-4 pt-20 pb-16 w-full ">
|
||
<div className="flex items-center justify-between mb-4 max-w-4xl mx-auto">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-white">Настройки</h1>
|
||
<p className="text-gray-300">Профиль пациента</p>
|
||
</div>
|
||
<div className="w-16 h-16 bg-white/20 backdrop-blur-lg rounded-full flex items-center justify-center border border-white/30">
|
||
<span className="text-2xl font-bold text-white">+
|
||
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="max-w-4xl mx-auto">
|
||
{/* Profile Information */}
|
||
<div className="px-4 -mt-6 mb-6 ">
|
||
<div className="bg-white/80 backdrop-blur-lg rounded-2xl p-6 border border-gray-200/50 shadow-lg glass-morphism">
|
||
<h2 className="text-lg font-semibold text-gray-800 mb-4">Личная информация</h2>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-600 mb-1">Логин</label>
|
||
<div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
|
||
<span className="text-gray-800">alex_petrov</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-600 mb-1">Дата регистрации</label>
|
||
<div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
|
||
<span className="text-gray-800">15 марта 2024</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* Medical Information */}
|
||
{/* <div className="px-4 mb-6">
|
||
<div className="bg-white/80 backdrop-blur-lg rounded-2xl p-6 border border-gray-200/50 shadow-lg ">
|
||
<h2 className="text-lg font-semibold text-gray-800 mb-4">Медицинская информация</h2>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-600 mb-1">Описание травмы</label>
|
||
<div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
|
||
<p className="text-gray-800 text-sm leading-relaxed">
|
||
Повреждение передней крестообразной связки левого колена. Получена во время игры в футбол 12 февраля
|
||
2024 года. Проведена артроскопическая операция 20 февраля 2024 года.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-600 mb-1">Лечащий врач</label>
|
||
<div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
|
||
<span className="text-gray-800">Доктор Иванов И.И.</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-600 mb-1">Стадия восстановления</label>
|
||
<div className="bg-cyan-50 rounded-lg p-3 border border-cyan-200">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-cyan-800 font-medium">Активная реабилитация</span>
|
||
<span className="text-cyan-600 text-sm">75% завершено</span>
|
||
</div>
|
||
<div className="mt-2 bg-cyan-200 rounded-full h-2">
|
||
<div className="bg-cyan-500 h-2 rounded-full" style={{ width: "75%" }}></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> */}
|
||
{/* Logout Button */}
|
||
<div className="px-4 mb-8">
|
||
<button
|
||
onClick={handleLogout}
|
||
className="w-full bg-gray-400 hover:bg-gray-500 text-white font-semibold py-4 px-6 rounded-2xl transition-all duration-200 transform hover:scale-105 shadow-lg"
|
||
>
|
||
Выйти из аккаунта
|
||
</button>
|
||
</div>
|
||
<BottomNavigation />
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Settings
|