diff options
Diffstat (limited to 'src/components/upload')
| -rw-r--r-- | src/components/upload/Dropzone.tsx | 68 | ||||
| -rw-r--r-- | src/components/upload/SourceInput.tsx | 3 | ||||
| -rw-r--r-- | src/components/upload/Switches.tsx | 24 | ||||
| -rw-r--r-- | src/components/upload/TagsInput.tsx | 12 | ||||
| -rw-r--r-- | src/components/upload/index.ts | 1 |
5 files changed, 82 insertions, 26 deletions
diff --git a/src/components/upload/Dropzone.tsx b/src/components/upload/Dropzone.tsx index 6980f5c..5c882be 100644 --- a/src/components/upload/Dropzone.tsx +++ b/src/components/upload/Dropzone.tsx @@ -3,40 +3,70 @@ import Dropzone from 'react-dropzone'; import UploadIcon from '@icons/upload.svg'; import { Button } from '@/components/ui'; -import { useRef, useState } from 'react'; +import { useEffect, useState } from 'react'; export function FileDropzone() { - // const [files, setFiles] = useState<File[]>([]); - const hiddenInputRef = useRef<HTMLInputElement | null>(null); + const [file, setFile] = useState<File | null>(null); + const [preview, setPreview] = useState<string | null>(null); + + useEffect(() => { + return () => { + if (preview) URL.revokeObjectURL(preview); + }; + }, [preview]); + return ( <Dropzone - multiple - onDrop={(acceptedFiles: File[]) => { - // setFiles((prev) => [...prev, ...acceptedFiles]); + multiple={false} + accept={{ 'image/*': [] }} + onDrop={(acceptedFiles) => { + const f = acceptedFiles[0]; + if (!f) return; + + const url = URL.createObjectURL(f); + + setFile(f); + setPreview(url); }} > {({ getRootProps, getInputProps }) => ( <div {...getRootProps({ className: - 'w-full h-[460px] justify-between p-7.5 border flex flex-col text-sm items-center rounded-[10px]', + 'w-[900px] h-[508px] flex flex-col gap-[20px]', })} > - <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 + className={` + w-full + flex-1 + relative + overflow-hidden + rounded-[10px] + border border-violet + ${preview ? 'bg-violet/30' : 'bg-background'} + `} + > + {!preview ? ( + <div className="w-full h-full flex flex-col justify-center items-center gap-[60px] p-[30px]"> + <UploadIcon /> + <span className="text-center"> + Выбери файлы на компьютере или перетащи + сюда. JPG, PNG до 20MB. + </span> + </div> + ) : ( + <img + src={preview} + alt="preview" + className="w-full h-full object-contain" + /> + )} </div> - <Button size={'lg'} className="justify-self-end"> - Выбрать + <Button size="lg"> + {preview ? 'Заменить' : 'Выбрать'} </Button> </div> )} diff --git a/src/components/upload/SourceInput.tsx b/src/components/upload/SourceInput.tsx index fbc8f52..c93c4b6 100644 --- a/src/components/upload/SourceInput.tsx +++ b/src/components/upload/SourceInput.tsx @@ -1,6 +1,5 @@ 'use client'; import { Input } from '@/components/ui'; -import React from 'react'; export function SourceInput() { return ( @@ -8,7 +7,7 @@ export function SourceInput() { <span>ИСТОЧНИК</span> <Input name="source" - onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => { + onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); } diff --git a/src/components/upload/Switches.tsx b/src/components/upload/Switches.tsx new file mode 100644 index 0000000..76f9d6d --- /dev/null +++ b/src/components/upload/Switches.tsx @@ -0,0 +1,24 @@ +'use client'; + +import { Switch } from '@/components/ui/switch'; + +export function Switches() { + return ( + <div className="flex flex-row gap-[20px]"> + <div className="flex items-center gap-[10px]"> + <p className="font-medium">NSFW</p> + <Switch /> + </div> + + <div className="flex items-center gap-[10px]"> + <p className="font-medium">СГЕНЕРИРОВАНО ИИ</p> + <Switch /> + </div> + + <div className="flex items-center gap-[10px]"> + <p className="font-medium">Я ЯВЛЯЮСЬ АВТОРОМ</p> + <Switch /> + </div> + </div> + ); +} diff --git a/src/components/upload/TagsInput.tsx b/src/components/upload/TagsInput.tsx index cdff794..4dcc595 100644 --- a/src/components/upload/TagsInput.tsx +++ b/src/components/upload/TagsInput.tsx @@ -1,11 +1,10 @@ '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'; - +import { WithContext, Tag, SEPARATORS } from 'react-tag-input'; export function TagsInput() { const [tags, setTags] = useState<Tag[]>([]); @@ -30,8 +29,9 @@ export function TagsInput() { <WithContext id="tags-input" tags={tags} - placeholder={'Введите теги'} + placeholder={tags.length ? '' : 'Введите теги'} maxTags={50} + separators={[SEPARATORS.ENTER, SEPARATORS.SPACE]} handleAddition={(tag) => { setTags((prev) => { return [...prev, tag]; @@ -51,7 +51,7 @@ export function TagsInput() { 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', + tag: 'bg-violet px-2.5 py-0 h-[29px] flex gap-1.25 rounded-[10px] w-fit items-center', selected: 'flex gap-2.5 flex-wrap items-center', }} removeComponent={RemoveTag} @@ -75,7 +75,9 @@ class RemoveTag extends React.Component { document.getElementById('tags-input')?.focus(); }} > - <XIcon /> + <div className="w-[12px] h-[19px] flex items-center justify-center"> + <XIcon className="w-[7px] h-[7px]" /> + </div> </Button> ); } diff --git a/src/components/upload/index.ts b/src/components/upload/index.ts index 022fe11..6eb84f6 100644 --- a/src/components/upload/index.ts +++ b/src/components/upload/index.ts @@ -2,3 +2,4 @@ export * from './UploadMenu'; export * from './Dropzone'; export * from './TagsInput'; export * from './SourceInput'; +export * from './Switches'; |