mirror of https://github.com/arc53/DocsGPT
commit
ae2efc7f7b
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19.35 6.04C18.67 2.59 15.64 0 12 0C9.11 0 6.6 1.64 5.35 4.04C2.34 4.36 0 6.91 0 10C0 13.31 2.69 16 6 16H19C21.76 16 24 13.76 24 11C24 8.36 21.95 6.22 19.35 6.04ZM14 9V13H10V9H7L12 4L17 9H14Z" fill="black" fill-opacity="0.54"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 340 B |
@ -0,0 +1,81 @@
|
|||||||
|
import { useCallback, useState } from 'react';
|
||||||
|
import { useDropzone } from 'react-dropzone';
|
||||||
|
import { ActiveState } from '../models/misc';
|
||||||
|
|
||||||
|
export default function Upload({
|
||||||
|
modalState,
|
||||||
|
setModalState,
|
||||||
|
}: {
|
||||||
|
modalState: ActiveState;
|
||||||
|
setModalState: (state: ActiveState) => void;
|
||||||
|
}) {
|
||||||
|
const [docName, setDocName] = useState('');
|
||||||
|
const [files, setfiles] = useState<File[]>([]);
|
||||||
|
|
||||||
|
const onDrop = useCallback((acceptedFiles: File[]) => {
|
||||||
|
setfiles(acceptedFiles);
|
||||||
|
setDocName(acceptedFiles[0]?.name);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const doNothing = () => undefined;
|
||||||
|
|
||||||
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||||
|
onDrop,
|
||||||
|
multiple: true,
|
||||||
|
onDragEnter: doNothing,
|
||||||
|
onDragOver: doNothing,
|
||||||
|
onDragLeave: doNothing,
|
||||||
|
});
|
||||||
|
return (
|
||||||
|
<article
|
||||||
|
className={`${
|
||||||
|
modalState === 'ACTIVE' ? 'visible' : 'hidden'
|
||||||
|
} absolute z-30 h-screen w-screen bg-gray-alpha`}
|
||||||
|
>
|
||||||
|
<article className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
|
||||||
|
<p className="mb-7 text-xl text-jet">Upload New Documentation</p>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="h-10 w-[60%] rounded-md border-2 border-gray-5000 px-3 outline-none"
|
||||||
|
value={docName}
|
||||||
|
onChange={(e) => setDocName(e.target.value)}
|
||||||
|
></input>
|
||||||
|
<div className="relative bottom-12 left-2 mt-[-18.39px]">
|
||||||
|
<span className="bg-white px-2 text-xs text-gray-4000">Name</span>
|
||||||
|
</div>
|
||||||
|
<div {...getRootProps()}>
|
||||||
|
<label className="rounded-md border border-blue-2000 px-4 py-2 font-medium text-blue-2000 hover:cursor-pointer">
|
||||||
|
<input type="button" {...getInputProps()} />
|
||||||
|
Choose Files
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="mt-9">
|
||||||
|
<p className="mb-5 font-medium text-eerie-black">Uploaded Files</p>
|
||||||
|
{files.map((file) => (
|
||||||
|
<p key={file.name} className="text-gray-6000">
|
||||||
|
{file.name}
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
{files.length === 0 && <p className="text-gray-6000">None</p>}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row-reverse">
|
||||||
|
<button className="ml-6 rounded-md bg-blue-3000 py-2 px-6 text-white">
|
||||||
|
Train
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setDocName('');
|
||||||
|
setfiles([]);
|
||||||
|
setModalState('INACTIVE');
|
||||||
|
}}
|
||||||
|
className="font-medium"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: sanitize all inputs
|
Loading…
Reference in New Issue