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/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 +- 8 files changed, 260 insertions(+), 62 deletions(-) create mode 100644 src/components/settings/ProfilePage.tsx create mode 100644 src/components/settings/SecurityPage.tsx create mode 100644 src/components/settings/SettingsMenu.tsx (limited to 'src/components') 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 ( - + + ); } 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 && (