110 lines
3.9 KiB
JavaScript
110 lines
3.9 KiB
JavaScript
"use client";
|
||
|
||
import React from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import { FaUserCircle, FaStar } from "react-icons/fa";
|
||
import TabBar from "../components/TabBar";
|
||
|
||
const ValounterProfilePage = () => {
|
||
const router = useRouter();
|
||
|
||
const fullName = "Иванов Александр Сергеевич";
|
||
const birthDate = "12.03.1990";
|
||
const rating = 4.8;
|
||
|
||
return (
|
||
<div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
|
||
<div className="relative w-full max-w-md flex flex-col pb-20 pt-4">
|
||
{/* Header с кнопкой назад и заголовком по центру */}
|
||
<header className="flex items-center mb-4">
|
||
<button
|
||
type="button"
|
||
onClick={() => router.back()}
|
||
className="text-white w-8 h-8 rounded-full flex items-center justify-center text-lg"
|
||
>
|
||
←
|
||
</button>
|
||
<h1 className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
|
||
Профиль
|
||
</h1>
|
||
<span className="w-8" />
|
||
</header>
|
||
|
||
{/* Карточка профиля */}
|
||
<main className="bg-white rounded-3xl p-4 flex flex-col items-center gap-4 shadow-lg">
|
||
{/* Аватар */}
|
||
<FaUserCircle className="text-[#72B8E2] w-20 h-20" />
|
||
|
||
{/* ФИО и рейтинг */}
|
||
<div className="text-center space-y-1">
|
||
{/* <p className="font-montserrat font-extrabold text-[16px] text-black">
|
||
ФИО
|
||
</p> */}
|
||
<p className="font-montserrat font-bold text-[20px] text-black">
|
||
{fullName}
|
||
</p>
|
||
|
||
{/* Рейтинг + звезды */}
|
||
<div className="mt-2 flex items-center justify-center gap-2">
|
||
<span className="font-montserrat font-semibold text-[14px] text-black">
|
||
Рейтинг: {rating.toFixed(1)}
|
||
</span>
|
||
<div className="flex gap-1">
|
||
{[1, 2, 3, 4, 5].map((star) => (
|
||
<FaStar
|
||
key={star}
|
||
size={18}
|
||
className={
|
||
star <= Math.round(rating)
|
||
? "text-[#F6E168] fill-[#F6E168]"
|
||
: "text-[#F6E168] fill-[#F6E168]/30"
|
||
}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Контакты и день рождения */}
|
||
<div className="w-full bg-[#72B8E2] rounded-2xl p-3 text-white space-y-1">
|
||
<p className="font-montserrat text-[12px]">
|
||
Дата рождения: {birthDate}
|
||
</p>
|
||
<p className="font-montserrat text-[12px]">
|
||
Почта: example@mail.com
|
||
</p>
|
||
<p className="font-montserrat text-[12px]">
|
||
Телефон: +7 (900) 000-00-00
|
||
</p>
|
||
</div>
|
||
|
||
{/* Кнопки */}
|
||
<div className="w-full flex flex-col gap-2 mt-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => router.push("/valounterProfileSettings")}
|
||
className="w-full bg-[#E0B267] rounded-full py-2 flex items-center justify-center"
|
||
>
|
||
<span className="font-montserrat font-extrabold text-[14px] text-white">
|
||
Редактировать профиль
|
||
</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="w-full bg-[#E07567] rounded-full py-2 flex items-center justify-center"
|
||
>
|
||
<span className="font-montserrat font-extrabold text-[14px] text-white">
|
||
Выйти из аккаунта
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</main>
|
||
|
||
<TabBar />
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ValounterProfilePage;
|