add settings page

3 files changed, 187 insertions, 0 deletions

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 (
+        <div className="flex flex-col flex-start gap-[20px] w-[900px] h-[804px]">
+            <div className="flex flex-col flex-start gap-[10px] w-[310px] h-[123px]">
+                <p className="font-medium gap-[10px] ml-[20px]">НИКНЕЙМ</p>
+                <InputField placeholder="Введите никнейм" />
+                <Button className="w-[105px]">Сменить</Button>
+            </div>
+            <Separator className="bg-violet/50 h-[1px]" />
+            <div className="flex flex-col flex-start gap-[10px] w-[600px] h-[284px]">
+                <p className="font-medium text-light-violet gap-[10px] ml-[20px]">
+                    ОБО МНЕ
+                </p>
+                <div className="flex flex-row flex-end p-[20px]  w-[600px] h-[120px] border-solid border-[1px] rounded-[20px]">
+                    <Input placeholder="Введите описание о себе" />
+                    <p className="font-regular flex flex-row justify-center items-end ml-[10px] text-light-violet">
+                        250
+                    </p>
+                </div>
+                <Button className="w-[105px]">Сменить</Button>
+            </div>
+            <Separator className="bg-violet/50 h-[1px]" />
+            <div className="flex flex-col flex-start gap-[10px] w-[219px] h-[74px]">
+                <p className="font-medium text-light-violet ml-[20px]">
+                    АВАТАР
+                </p>
+                <div className="flex flex-row gap-[10px]">
+                    <Button className="w-[105px]">Сменить</Button>
+                    <Button variant={'danger'}>Удалить</Button>
+                </div>
+            </div>
+            <Separator className="bg-violet/50 h-[1px]" />
+            <div className="flex flex-col flex-start gap-[10px] w-[219px] h-[169px]">
+                <p className="font-medium text-light-violet ml-[20px]">
+                    ТЕМА БАННЕРА
+                </p>
+
+                <div className="flex flex-row flex-wrap items-center content-start gap-[5px] w-[265px] h-[85px]">
+                    {gradients.map((gradient, index) => (
+                        <div
+                            key={index}
+                            style={{ background: gradient }}
+                            className="w-[40px] h-[40px] rounded-full cursor-pointer"
+                        />
+                    ))}
+                </div>
+                <div className="flex flex-row gap-[10px]">
+                    <Button className="w-[105px]">Сменить</Button>
+                    <Button variant={'danger'}>Удалить</Button>
+                </div>
+            </div>
+            <Separator className="bg-violet/50 h-[1px]" />
+            <div className="flex flex-col flex-start gap-[10px] w-[219px] h-[74px]">
+                <p className="font-medium text-light-violet ml-[20px]">
+                    БАННЕР
+                </p>
+                <div className="flex flex-row gap-[10px]">
+                    <Button className="w-[105px]">Сменить</Button>
+                    <Button variant={'danger'}>Удалить</Button>
+                </div>
+            </div>
+        </div>
+    );
+}
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 (
+        <>
+            <div className="flex flex-col flex-start gap-[40px] w-[900px] h-[575px]">
+                <div className="flex flex-col gap-[20px] w-[900px] h-[493px]">
+                    <div className="flex flex-col flex-start gap-[20px] w-[310px] h-[241px]">
+                        <p className="text-light-violet font-medium">
+                            ЗАДАТЬ ПАРОЛЬ
+                        </p>
+                        <div className="flex flex-col flex-start gap-[10px] w-[310px] h-[137px]">
+                            <InputField
+                                placeholder="Почта аккаунта"
+                                type="password"
+                                name="password"
+                            />
+                            <InputField
+                                isPassword
+                                placeholder="Введите пароль"
+                                type="password"
+                                name="password"
+                            />
+                            <InputField
+                                isPassword
+                                placeholder="Повторите пароль"
+                                type="password"
+                                name="password"
+                            />
+                        </div>
+                        <Button>Сменить</Button>
+                    </div>
+                    <Separator className="bg-violet/30 h-[1px]" />
+                    <div className="flex flex-col flex-start gap-[20px] w-[310px] h-[192px]">
+                        <p className="text-light-violet font-medium">
+                            СМЕНА ПОЧТЫ
+                        </p>
+                        <div className="flex flex-col flex-start gap-[10px] w-[310px] h-[137px]">
+                            <InputField
+                                placeholder="Почта аккаунта"
+                                type="password"
+                                name="password"
+                            />
+                            <InputField
+                                isPassword
+                                placeholder="Введите пароль"
+                                type="password"
+                                name="password"
+                            />
+                        </div>
+                        <Button>Сменить</Button>
+                    </div>
+                    <Separator className="bg-violet/30 h-[1px]" />
+                    <Button className="w-[310px]">Выйти из аккаунта</Button>
+                </div>
+            </div>
+        </>
+    );
+}
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 (
+        <div className="flex flex-col gap-2.5">
+            <Button
+                variant={tab === 'profile' ? 'menuActive' : 'menu'}
+                onClick={() => setTab('profile')}
+            >
+                ПРОФИЛЬ
+            </Button>
+
+            <Button
+                variant={tab === 'subscriptions' ? 'menuActive' : 'menu'}
+                onClick={() => setTab('subscriptions')}
+            >
+                ПОДПИСКИ
+            </Button>
+
+            <Button
+                variant={tab === 'security' ? 'menuActive' : 'menu'}
+                onClick={() => setTab('security')}
+            >
+                БЕЗОПАСНОСТЬ
+            </Button>
+
+            <Button
+                variant={tab === 'privacy' ? 'menuActive' : 'menu'}
+                onClick={() => setTab('privacy')}
+            >
+                ПРИВАТНОСТЬ
+            </Button>
+        </div>
+    );
+}