summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/footer/Footer.tsx24
-rw-r--r--src/components/footer/index.ts1
-rw-r--r--src/components/header/Header.tsx10
-rw-r--r--src/components/header/NavBar.tsx75
-rw-r--r--src/components/header/ProfileOrLogin.tsx25
-rw-r--r--src/components/header/SubNav.tsx43
-rw-r--r--src/components/header/index.ts4
-rw-r--r--src/components/ui/button.tsx57
-rw-r--r--src/components/ui/index.ts2
-rw-r--r--src/components/ui/input.tsx9
-rw-r--r--src/components/ui/switch.tsx30
-rw-r--r--src/components/upload/Dropzone.tsx45
-rw-r--r--src/components/upload/SourceInput.tsx20
-rw-r--r--src/components/upload/TagsInput.tsx83
-rw-r--r--src/components/upload/UploadMenu.tsx11
-rw-r--r--src/components/upload/index.ts4
16 files changed, 443 insertions, 0 deletions
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
new file mode 100644
index 0000000..9b2a3f2
--- /dev/null
+++ b/src/components/footer/Footer.tsx
@@ -0,0 +1,24 @@
+import Logo from '@icons/logo.svg';
+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>
+ <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">© 2025 artberry.xyz</span>
+ </div>
+ </div>
+ </footer>
+ );
+}
diff --git a/src/components/footer/index.ts b/src/components/footer/index.ts
new file mode 100644
index 0000000..ddcc5a9
--- /dev/null
+++ b/src/components/footer/index.ts
@@ -0,0 +1 @@
+export * from './Footer';
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
new file mode 100644
index 0000000..b096bdb
--- /dev/null
+++ b/src/components/header/Header.tsx
@@ -0,0 +1,10 @@
+import { NavBar, SubNav } from '.';
+
+export function Header() {
+ return (
+ <div className="flex flex-col w-full">
+ <NavBar />
+ <SubNav />
+ </div>
+ );
+}
diff --git a/src/components/header/NavBar.tsx b/src/components/header/NavBar.tsx
new file mode 100644
index 0000000..f186904
--- /dev/null
+++ b/src/components/header/NavBar.tsx
@@ -0,0 +1,75 @@
+//import { ShuffleIcon } from 'lucide-react';
+import ShuffleIcon from '@icons/ShuffleIcon.svg';
+import Image from 'next/image';
+import { Button, Input } from '../ui';
+import { ProfileOrLogin } from './ProfileOrLogin';
+import Link from 'next/link';
+import DiscordIcon from '@icons/discord.svg';
+import { Switch } from '@/components/ui/switch';
+export function NavBar() {
+ return (
+ <div className="flex w-full justify-between py-7.5 h-[110] items-center">
+ <div className="flex min-w-[267] max-w-[750] grow items-center gap-7.5">
+ <Link href="/" className="shrink-0 ">
+ <Image
+ src="/icons/logo.svg"
+ alt="ARTBERRY"
+ width={46}
+ height={50}
+ className="h-[50]"
+ />
+ </Link>
+ <div className="flex gap-3.75 grow items-center">
+ <Search />
+ <Button variant={'icon'} size={'icon'} asChild>
+ <ShuffleIcon width={20} height={19} strokeWidth={2} />
+ </Button>
+ <div className="gap-[20] flex items-center shrink-0 w-[185]">
+ <div className="flex h-[22] gap-2.5 opacity-100 items-center w-[66]">
+ <span>AI</span>
+ <Switch />
+ </div>
+ <div className="flex h-[22] gap-2.5 opacity-100 items-center w-[66]">
+ <span>NSFW</span>
+ <Switch />
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <Sections />
+ <div className="flex gap-3.75 items-center shrink-0">
+ <Link href={'#'} className="hover:[&_path]:fill-light-violet">
+ <DiscordIcon />
+ </Link>
+ <ProfileOrLogin />
+ </div>
+ </div>
+ );
+}
+
+function Search() {
+ return (
+ <div className="flex w-[409] h-[50] border-2 items-center rounded-4xl p-3.75">
+ <div className="flex w-full gap-1.25">
+ <Image
+ src="/icons/search.svg"
+ alt=""
+ width={24}
+ height={24}
+ className="h-[24] w-[24]"
+ />
+ <Input
+ placeholder="Поиск"
+ className="text-light-violet placeholder:text-light-violet text-sm"
+ />
+ </div>
+ </div>
+ );
+}
+
+function Sections() {
+ return (
+ <div className="flex grow min-w-75 max-w-[450] justify-between px-7.5 font-medium"></div>
+ );
+}
diff --git a/src/components/header/ProfileOrLogin.tsx b/src/components/header/ProfileOrLogin.tsx
new file mode 100644
index 0000000..38c1eb1
--- /dev/null
+++ b/src/components/header/ProfileOrLogin.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import Image from 'next/image';
+import { useUser } from '../../lib/contexts';
+import { Button } from '../ui';
+import Link from 'next/link';
+
+export function ProfileOrLogin() {
+ const user = useUser();
+
+ if (!user) {
+ return <Button className="py-2.5 px-3.75">ВОЙТИ</Button>;
+ }
+
+ return (
+ <Link href={'/profile'}>
+ <Image
+ src={user?.avatar ?? 'icons/avatar.svg'}
+ alt=""
+ width={60}
+ height={60}
+ />
+ </Link>
+ );
+}
diff --git a/src/components/header/SubNav.tsx b/src/components/header/SubNav.tsx
new file mode 100644
index 0000000..a446ff0
--- /dev/null
+++ b/src/components/header/SubNav.tsx
@@ -0,0 +1,43 @@
+import Link from 'next/link';
+import { Button } from '../ui';
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export function SubNav() {
+ return (
+ <div className="flex justify-between w-full">
+ <SectionLink href="#" className="rounded-tl-[5px] rounded-bl-4xl">
+ ТЕГИ
+ </SectionLink>
+ <SectionLink href="#" className="border-x border-light-violet">
+ КАТЕГОРИИ
+ </SectionLink>
+ <SectionLink href="#" className="border-x border-light-violet">
+ ПЕРСОНАЖИ
+ </SectionLink>
+ <SectionLink href="#" className="rounded-tr-[5px] rounded-br-4xl">
+ КОЛЛЕКЦИИ
+ </SectionLink>
+ </div>
+ );
+}
+
+function SectionLink({
+ children,
+ href,
+ className,
+}: React.PropsWithChildren & { href: string; className?: string }) {
+ return (
+ <Button
+ asChild
+ className={cn(
+ 'bg-violet grow py-3.5 w-full hover:bg-light-violet',
+ className,
+ )}
+ variant={'ghost'}
+ size={'text'}
+ >
+ <Link href={href}>{children}</Link>
+ </Button>
+ );
+}
diff --git a/src/components/header/index.ts b/src/components/header/index.ts
new file mode 100644
index 0000000..3a75160
--- /dev/null
+++ b/src/components/header/index.ts
@@ -0,0 +1,4 @@
+export * from './Header';
+export * from './ProfileOrLogin';
+export * from './NavBar';
+export * from './SubNav';
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..65c1e84
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+ 'inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors duration-200 ease-out',
+ {
+ variants: {
+ variant: {
+ default: 'bg-violet rounded-4xl hover:bg-light-violet',
+ outline: '',
+ 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',
+ },
+ size: {
+ sm: 'py-1.75 px-3.75',
+ default: 'py-2.5 px-7.5',
+ lg: 'py-2.5 px-7.5 w-full',
+ icon: 'size-12.5 p-3.75',
+ text: '',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ },
+);
+
+function Button({
+ className,
+ variant = 'default',
+ size = 'default',
+ asChild = false,
+ ...props
+}: React.ComponentProps<'button'> &
+ VariantProps<typeof buttonVariants> & {
+ asChild?: boolean;
+ }) {
+ const Comp = asChild ? Slot : 'button';
+
+ return (
+ <Comp
+ data-slot="button"
+ data-variant={variant}
+ data-size={size}
+ className={cn(buttonVariants({ variant, size, className }))}
+ {...props}
+ />
+ );
+}
+
+export { Button, buttonVariants };
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
new file mode 100644
index 0000000..4d2a1a0
--- /dev/null
+++ b/src/components/ui/index.ts
@@ -0,0 +1,2 @@
+export * from './input';
+export * from './button';
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..0424772
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,9 @@
+import { cn } from '@/lib/utils';
+import React from 'react';
+
+export function Input({
+ className,
+ ...props
+}: React.InputHTMLAttributes<HTMLInputElement>) {
+ return <input className={cn('outline-none', className)} {...props} />;
+}
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 0000000..26fe2c3
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+import { cn } from '@/lib/utils';
+
+function Switch({
+ className,
+ ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+ return (
+ <SwitchPrimitive.Root
+ data-slot="switch"
+ className={cn(
+ 'peer data-[state=checked]:bg-violet data-[state=unchecked]:bg-light-violet focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[18px] w-10 shrink-0 items-center rounded-full border border-transparent transition-all duration-200 ease-out outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+ className,
+ )}
+ {...props}
+ >
+ <SwitchPrimitive.Thumb
+ data-slot="switch-thumb"
+ className={cn(
+ 'bg-light-violet data-[state=unchecked]:bg-violet dark:data-[state=checked]:bg-light-violet pointer-events-none block size-3.5 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[2px]',
+ )}
+ />{' '}
+ </SwitchPrimitive.Root>
+ );
+}
+export { Switch };
diff --git a/src/components/upload/Dropzone.tsx b/src/components/upload/Dropzone.tsx
new file mode 100644
index 0000000..6980f5c
--- /dev/null
+++ b/src/components/upload/Dropzone.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import Dropzone from 'react-dropzone';
+import UploadIcon from '@icons/upload.svg';
+import { Button } from '@/components/ui';
+import { useRef, useState } from 'react';
+
+export function FileDropzone() {
+ // const [files, setFiles] = useState<File[]>([]);
+ const hiddenInputRef = useRef<HTMLInputElement | null>(null);
+ return (
+ <Dropzone
+ multiple
+ onDrop={(acceptedFiles: File[]) => {
+ // setFiles((prev) => [...prev, ...acceptedFiles]);
+ }}
+ >
+ {({ getRootProps, getInputProps }) => (
+ <div
+ {...getRootProps({
+ className:
+ 'w-full h-[460px] justify-between p-7.5 border flex flex-col text-sm items-center rounded-[10px]',
+ })}
+ >
+ <input name="files" type="file" ref={hiddenInputRef} />
+ <input {...getInputProps()} />
+
+ <div className="flex flex-col justify-center items-center h-full w-full gap-2.5">
+ <UploadIcon />
+ <span>
+ Выбери файлы на компьютере или перетащи сюда. JPG,
+ PNG до 20MB.
+ </span>
+ <span>
+ {hiddenInputRef.current?.files?.length ?? 0}
+ </span>
+ </div>
+ <Button size={'lg'} className="justify-self-end">
+ Выбрать
+ </Button>
+ </div>
+ )}
+ </Dropzone>
+ );
+}
diff --git a/src/components/upload/SourceInput.tsx b/src/components/upload/SourceInput.tsx
new file mode 100644
index 0000000..c93c4b6
--- /dev/null
+++ b/src/components/upload/SourceInput.tsx
@@ -0,0 +1,20 @@
+'use client';
+import { Input } from '@/components/ui';
+
+export function SourceInput() {
+ return (
+ <div className="flex flex-col gap-2.5 w-full">
+ <span>ИСТОЧНИК</span>
+ <Input
+ name="source"
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ }
+ }}
+ className="w-full h-10 py-2.5 px-5 border rounded-4xl"
+ type="text"
+ />
+ </div>
+ );
+}
diff --git a/src/components/upload/TagsInput.tsx b/src/components/upload/TagsInput.tsx
new file mode 100644
index 0000000..1b88fa2
--- /dev/null
+++ b/src/components/upload/TagsInput.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Tag, WithContext } from 'react-tag-input';
+import ExclamationIcon from '@icons/exclamation.svg';
+import XIcon from '@icons/x.svg';
+import { Button } from '@/components/ui';
+
+export function TagsInput() {
+ const [tags, setTags] = useState<Tag[]>([]);
+
+ return (
+ <div className="flex flex-col w-full gap-2.5">
+ <div className="flex gap-2.5 font-semibold">
+ <span>ТЕГИ</span>
+ <span className="text-light-violet">{tags.length}/50</span>
+ <span className="flex gap-1.25 items-center text-light-violet">
+ <ExclamationIcon /> Введите минимум 5 тегов через пробел
+ </span>
+ </div>
+ <div
+ id="tags-container"
+ className="w-full min-h-[100px] border p-5 rounded-4xl"
+ >
+ <input
+ name="tags"
+ className="hidden"
+ defaultValue={tags.map((tag) => tag.id)}
+ />
+ <WithContext
+ id="tags-input"
+ tags={tags}
+ placeholder={'Введите теги'}
+ maxTags={50}
+ handleAddition={(tag) => {
+ setTags((prev) => {
+ return [...prev, tag];
+ });
+ }}
+ handleDelete={(index: number, e) => {
+ setTags(tags.filter((_, i) => i !== index));
+ }}
+ handleDrag={(tag: Tag, currPos: number, newPos: number) => {
+ const newTags = tags.slice();
+
+ newTags.splice(currPos, 1);
+ newTags.splice(newPos, 0, tag);
+
+ setTags(newTags);
+ }}
+ inputFieldPosition="inline"
+ classNames={{
+ tagInputField: 'outline-none text-light-violet',
+ tag: 'bg-violet px-2.5 py-1.25 flex gap-1.25 rounded-[10px] w-fit items-center',
+ selected: 'flex gap-2.5 flex-wrap items-center',
+ }}
+ removeComponent={RemoveTag}
+ />
+ </div>
+ </div>
+ );
+}
+
+class RemoveTag extends React.Component {
+ render(): React.ReactNode {
+ // @ts-expect-error ...
+ const { className, onRemove } = this.props;
+ return (
+ <Button
+ variant={'ghost'}
+ size={'text'}
+ onClick={onRemove}
+ className={className}
+ onFocus={(e) => {
+ // Это говно здесь из-за того, что без него после удаления бэкспейсом, фокусится крестик
+ document.getElementById('tags-input')?.focus();
+ }}
+ >
+ <XIcon />
+ </Button>
+ );
+ }
+}
diff --git a/src/components/upload/UploadMenu.tsx b/src/components/upload/UploadMenu.tsx
new file mode 100644
index 0000000..22ebafd
--- /dev/null
+++ b/src/components/upload/UploadMenu.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import { Button } from '@/components/ui';
+
+export function UploadMenu() {
+ return (
+ <div className="">
+ <Button variant={'menu'}>АРТЫ</Button>
+ </div>
+ );
+}
diff --git a/src/components/upload/index.ts b/src/components/upload/index.ts
new file mode 100644
index 0000000..022fe11
--- /dev/null
+++ b/src/components/upload/index.ts
@@ -0,0 +1,4 @@
+export * from './UploadMenu';
+export * from './Dropzone';
+export * from './TagsInput';
+export * from './SourceInput';
generated by cgit v1.3-3-g829e (git 2.53.0) at 2026-05-05 15:50:57 +0000