From cdc736b4823a3dda97f2b49c04b8ef7321e7a254 Mon Sep 17 00:00:00 2001 From: l3wdfut4pwr Date: Thu, 19 Mar 2026 16:03:55 +0200 Subject: add settings page --- src/app/globals.css | 2 + src/app/layout.tsx | 12 ++-- src/app/profile/page.tsx | 3 + src/app/settings/page.tsx | 21 ++++++ src/components/footer/Footer.tsx | 116 ++++++++++++++++--------------- src/components/header/Header.tsx | 8 ++- src/components/settings/ProfilePage.tsx | 84 ++++++++++++++++++++++ src/components/settings/SecurityPage.tsx | 60 ++++++++++++++++ src/components/settings/SettingsMenu.tsx | 43 ++++++++++++ src/components/ui/button.tsx | 5 +- src/components/ui/index.ts | 1 + src/components/ui/input.tsx | 5 +- 12 files changed, 292 insertions(+), 68 deletions(-) create mode 100644 src/app/profile/page.tsx create mode 100644 src/app/settings/page.tsx create mode 100644 src/components/settings/ProfilePage.tsx create mode 100644 src/components/settings/SecurityPage.tsx create mode 100644 src/components/settings/SettingsMenu.tsx diff --git a/src/app/globals.css b/src/app/globals.css index 2422d8f..5ca3a6b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -23,6 +23,7 @@ --foreground: #ffffff; --violet: #464199; + --violet-darker: #191635; --light-violet: #8784c9; --dark-indigo: #0d0c1c; --red: #e64c4f; @@ -62,6 +63,7 @@ --color-background: var(--background); --color-foreground: var(--foreground); --color-violet: var(--violet); + --color-violet-darker: var(--violet-darker); --color-light-violet: var(--light-violet); --color-dark-indigo: var(--dark-indigo); --color-red: var(--red); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index e81e45b..1c24fe8 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -20,14 +20,14 @@ export default function RootLayout({ }>) { return ( - -
+ +
-
- {children} +
+
+ {children} +
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx new file mode 100644 index 0000000..17e3f62 --- /dev/null +++ b/src/app/profile/page.tsx @@ -0,0 +1,3 @@ +export default function Profile() { + return <>; +} diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx new file mode 100644 index 0000000..7237d57 --- /dev/null +++ b/src/app/settings/page.tsx @@ -0,0 +1,21 @@ +'use client'; + +import { useState } from 'react'; +import SettingsMenu from '@/components/settings/SettingsMenu'; +import SecurityPage from '@/components/settings/SecurityPage'; +import ProfilePage from '@/components/settings/ProfilePage'; + +export default function Settings() { + const [tab, setTab] = useState('profile'); + + return ( +
+ + +
+ {tab === 'profile' && } + {tab === 'security' && } +
+
+ ); +} diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index 63dde1e..7262ddc 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -10,68 +10,70 @@ import ArtberryIcon from '@icons/artberry.svg'; export function Footer() { return ( -
-
-
-
- - +
+
+
+
+
+ + +
+ Лучшее — здесь. +
+
+ + Terms and Conditions · Privacy Policy + + + © {new Date().getFullYear()} artberry.xyz +
- Лучшее — здесь. -
-
- - Terms and Conditions · Privacy Policy - - - © {new Date().getFullYear()} artberry.xyz -
-
-
-
-
- - - Загрузить контент - - - - FAQ - - - - Премиум - - - +
+
+
+ + + Загрузить контент + + + + FAQ + + + + Премиум + + + - Сообщество - + Сообщество + +
+
+ Теги + Персонажи + Категории + Коллекции + Рандом +
-
- Теги - Персонажи - Категории - Коллекции - Рандом +
+ English +
-
- English - -
-
-
+
+
); } diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index b096bdb..dd15bd4 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -2,9 +2,11 @@ import { NavBar, SubNav } from '.'; export function Header() { return ( -
- - +
+
+ + +
); } diff --git a/src/components/settings/ProfilePage.tsx b/src/components/settings/ProfilePage.tsx new file mode 100644 index 0000000..60ff41f --- /dev/null +++ b/src/components/settings/ProfilePage.tsx @@ -0,0 +1,84 @@ +import { InputField } from '@/components/ui/inputfield'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui'; +import { Separator } from '@/components/ui'; + +const gradients = [ + 'linear-gradient(89.91deg, #8784C9 0%, #464199 99.92%)', + 'linear-gradient(284.32deg, #FFAFBD 20.33%, #DAE2F8 79.67%)', + 'linear-gradient(267.9deg, #473B7B 0%, #30D2BE 100%)', + 'linear-gradient(88.87deg, #C33764 0%, #1D2671 100%)', + 'linear-gradient(267.9deg, #134E5E 0%, #71B280 100%)', + 'linear-gradient(87.9deg, #423AA2 0%, #100626 100%)', + 'linear-gradient(87.9deg, #EDF3F6 0%, #D9EAF4 100%)', + 'linear-gradient(284.32deg, #212121 20.33%, #454545 79.67%)', + 'linear-gradient(88.87deg, #610000 0%, #190A05 100%)', + 'linear-gradient(87.9deg, #FFC500 0%, #C21500 100%)', + 'linear-gradient(270deg, #6A11CB 0%, #69A1FF 100%)', + 'linear-gradient(267.9deg, #182848 0%, #4B6CB7 100%)', +]; + +export default function ProfilePage() { + return ( +
+
+

НИКНЕЙМ

+ + +
+ +
+

+ ОБО МНЕ +

+
+ +

+ 250 +

+
+ +
+ +
+

+ АВАТАР +

+
+ + +
+
+ +
+

+ ТЕМА БАННЕРА +

+ +
+ {gradients.map((gradient, index) => ( +
+ ))} +
+
+ + +
+
+ +
+

+ БАННЕР +

+
+ + +
+
+
+ ); +} diff --git a/src/components/settings/SecurityPage.tsx b/src/components/settings/SecurityPage.tsx new file mode 100644 index 0000000..9d158dd --- /dev/null +++ b/src/components/settings/SecurityPage.tsx @@ -0,0 +1,60 @@ +import { InputField } from '@/components/ui/inputfield'; +import { Button } from '@/components/ui'; +import { Separator } from '@/components/ui'; +export default function SecurityPage() { + return ( + <> +
+
+
+

+ ЗАДАТЬ ПАРОЛЬ +

+
+ + + +
+ +
+ +
+

+ СМЕНА ПОЧТЫ +

+
+ + +
+ +
+ + +
+
+ + ); +} diff --git a/src/components/settings/SettingsMenu.tsx b/src/components/settings/SettingsMenu.tsx new file mode 100644 index 0000000..e5e1cf5 --- /dev/null +++ b/src/components/settings/SettingsMenu.tsx @@ -0,0 +1,43 @@ +'use client'; + +import { Button } from '@/components/ui'; + +export default function SettingsMenu({ + tab, + setTab, +}: { + tab: string; + setTab: (tab: string) => void; +}) { + return ( +
+ + + + + + + +
+ ); +} diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 65c1e84..fd25d3c 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -14,7 +14,10 @@ const buttonVariants = cva( ghost: '', link: 'hover:text-light-violet', icon: 'bg-violet hover:bg-light-violet rounded-[10px] cursor-pointer', - menu: 'w-[350px] hover:bg-light-violet active:bg-violet active:border-violet rounded-4xl border-2 border-light-violet justify-start', + menu: 'w-[350px] h-[42px] hover:bg-light-violet active:bg-violet active:border-violet rounded-4xl border-2 border-light-violet justify-start', + menuActive: + 'w-[350px] h-[42px] bg-violet border-violet rounded-4xl justify-start', + danger: 'bg-violet-darker rounded-4xl hover:bg-light-violet', }, size: { sm: 'py-1.75 px-3.75', diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts index 4d2a1a0..400f155 100644 --- a/src/components/ui/index.ts +++ b/src/components/ui/index.ts @@ -1,2 +1,3 @@ export * from './input'; export * from './button'; +export * from './separator'; diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index 7dd5b62..f645f98 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -12,7 +12,10 @@ export function Input({ className, isPassword, ...props }: any) { {isPassword && (