minor upload update

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';