summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/footer/Footer.tsx116
-rw-r--r--src/components/header/Header.tsx8
-rw-r--r--src/components/settings/ProfilePage.tsx84
-rw-r--r--src/components/settings/SecurityPage.tsx60
-rw-r--r--src/components/settings/SettingsMenu.tsx43
-rw-r--r--src/components/ui/button.tsx5
-rw-r--r--src/components/ui/index.ts1
-rw-r--r--src/components/ui/input.tsx5
8 files changed, 260 insertions, 62 deletions
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 (
- <footer className="flex w-full justify-between py-[50px]">
- <div className="flex flex-col justify-between w-[259px] h-[192px]">
- <div className="text-right">
- <div className="flex items-center gap-2.5 w-full">
- <Logo />
- <ArtberryIcon />
+ <div className="w-full bg-dark-indigo">
+ <footer className="mx-auto w-full xl:max-w-[1200px] 2xl:max-w-[1500px] flex justify-between py-[50px]">
+ <div className="flex flex-col justify-between w-[259px] h-[192px]">
+ <div className="text-right">
+ <div className="flex items-center gap-2.5 w-full">
+ <Logo />
+ <ArtberryIcon />
+ </div>
+ <span className="font-medium">Лучшее — здесь.</span>
+ </div>
+ <div className="flex flex-col gap-1.25">
+ <span className="underline text-sm">
+ Terms and Conditions · Privacy Policy
+ </span>
+ <span className="text-xs">
+ © {new Date().getFullYear()} artberry.xyz
+ </span>
</div>
- <span className="font-medium">Лучшее — здесь.</span>
- </div>
- <div className="flex flex-col gap-1.25">
- <span className="underline text-sm">
- Terms and Conditions · Privacy Policy
- </span>
- <span className="text-xs">
- © {new Date().getFullYear()} artberry.xyz
- </span>
</div>
- </div>
- <div className="flex justify-between gap-48.75">
- <div className="flex-row flex gap-25 h-32.5 w-88.5">
- <div className=" leading-5.5 h-29.5 flex flex-col gap-2.5 w-41.25">
- <Link
- href="/upload"
- className="flex gap-1.25 flex-row items-center"
- >
- <Download className="w-4.75 h-4.75" />
- <span className="">Загрузить контент</span>
- </Link>
- <Link className="flex gap-1.25" href="/faq">
- <Faq />
- <span>FAQ</span>
- </Link>
- <Link
- className="flex gap-1.25 flex-row items-center"
- href="/premium"
- >
- <Premium />
- <span>Премиум</span>
- </Link>
- <Link
- className="flex gap-1.25 flex-row items-center"
- target="_blank"
- href="https://discord.gg/pJ66ZFpQQK"
- >
- <DiscordFooter />
+ <div className="flex justify-between gap-48.75">
+ <div className="flex-row flex gap-25 h-32.5 w-88.5">
+ <div className=" leading-5.5 h-29.5 flex flex-col gap-2.5 w-41.25">
+ <Link
+ href="/upload"
+ className="flex gap-1.25 flex-row items-center"
+ >
+ <Download className="w-4.75 h-4.75" />
+ <span className="">Загрузить контент</span>
+ </Link>
+ <Link className="flex gap-1.25" href="/faq">
+ <Faq />
+ <span>FAQ</span>
+ </Link>
+ <Link
+ className="flex gap-1.25 flex-row items-center"
+ href="/premium"
+ >
+ <Premium />
+ <span>Премиум</span>
+ </Link>
+ <Link
+ className="flex gap-1.25 flex-row items-center"
+ target="_blank"
+ href="https://discord.gg/pJ66ZFpQQK"
+ >
+ <DiscordFooter />
- <span>Сообщество</span>
- </Link>
+ <span>Сообщество</span>
+ </Link>
+ </div>
+ <div className=" flex flex-col leading-5.5 gap-1.25">
+ <span>Теги</span>
+ <span>Персонажи</span>
+ <span>Категории</span>
+ <span>Коллекции</span>
+ <span>Рандом</span>
+ </div>
</div>
- <div className=" flex flex-col leading-5.5 gap-1.25">
- <span>Теги</span>
- <span>Персонажи</span>
- <span>Категории</span>
- <span>Коллекции</span>
- <span>Рандом</span>
+ <div className="w-42.5 h-4.75 bg-violet gap-1.25 flex flex-row items-center items-center justify-center w-37.5 h-10.5 px-7.5 py-2.5 rounded-[20px]">
+ <span>English</span>
+ <English />
</div>
</div>
- <div className="w-42.5 h-4.75 bg-violet gap-1.25 flex flex-row items-center items-center justify-center w-37.5 h-10.5 px-7.5 py-2.5 rounded-[20px]">
- <span>English</span>
- <English />
- </div>
- </div>
- </footer>
+ </footer>
+ </div>
);
}
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 (
- <div className="flex flex-col w-full">
- <NavBar />
- <SubNav />
+ <div className="w-full">
+ <div className="mx-auto w-full xl:max-w-[1200px] 2xl:max-w-[1500px] flex flex-col">
+ <NavBar />
+ <SubNav />
+ </div>
</div>
);
}
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>
+ );
+}
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) {
<input
{...props}
type={isPassword ? (show ? 'text' : 'password') : props.type}
- className={cn('w-full outline-none', className)}
+ className={cn(
+ 'w-full outline-none placeholder-light-violet',
+ className,
+ )}
/>
{isPassword && (
<span
generated by cgit v1.3-3-g829e (git 2.53.0) at 2026-05-05 17:04:40 +0000