sergey/anti-hvost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: profile styles

Browse Source
This commit is contained in:
Sergey Elpashev
2025-04-07 15:59:04 +03:00
parent 04347f4cd9
commit 554ee083ab
2 changed files with 25 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/profile_settings.module.scss
View File

@@ -9,8 +9,8 @@
} }
.header_block__name { .header_block__name {
@apply mt-5 flex w-full flex-col items-center justify-start gap-3; @apply mt-5 flex h-fit w-full flex-col items-center justify-start gap-3;
} }
.settings_block { .settings_block {
@apply flex h-full w-full flex-col items-center justify-center; @apply mt-12 flex h-full w-full flex-col items-center justify-start md:mt-0 md:justify-center;
} }

43
src/pages/profile_settings.tsx
View File

@@ -9,27 +9,30 @@ const ProfileSettings: FunctionComponent = () => {
const { route } = useLocation(); const { route } = useLocation();
return ( return (
<div class={classes.container}> <div class={classes.container}>
<div class={classes.header_block}> <div class="flex h-full w-full flex-col items-center md:flex-row md:items-start">
{/* Вынести классы в стили */} {/* Вынести классы в стили */}
<div class="flex aspect-square h-full flex-col items-center justify-center rounded-md border">Аватар</div> <div class="flex aspect-square h-40 flex-col items-center justify-center rounded-md border">Аватар</div>
<div class={classes.header_block__name}> <div className="flex h-full w-full flex-col items-center">
<p class="text-5xl font-semibold">Никнейм</p> <div class={classes.header_block__name}>
<p class="text-2xl font-light">Статус</p> <p class="text-5xl font-semibold">Никнейм</p>
</div> <p class="text-2xl font-light">Статус</p>
</div> </div>
<div class={classes.settings_block}>
<div class="flex w-[300px] flex-col gap-10"> <div class={classes.settings_block}>
<Button>Сменить тему</Button> <div class="flex w-[300px] flex-col gap-10">
<Button>Настройки</Button> <Button>Сменить тему</Button>
<Button <Button>Настройки</Button>
color="secondary" <Button
onClick={() => { color="secondary"
isLoggedIn.value = false; onClick={() => {
route("/login", true); isLoggedIn.value = false;
}} route("/login", true);
> }}
Выйти >
</Button> Выйти
</Button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>