43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import {useState} from "react";
|
|
import {useNavigate} from "react-router-dom";
|
|
import BlueButton from "../components/buttons/BlueButton.tsx";
|
|
import Box from "../components/Box.tsx";
|
|
|
|
const ClipUpload = () => {
|
|
const [file, setFile] = useState<File | null>(null);
|
|
const navigate = useNavigate();
|
|
const [error, setError] = useState<null | string>(null);
|
|
|
|
const press = () => {
|
|
if (!file) {
|
|
setError("Please choose a file");
|
|
return;
|
|
}
|
|
navigate('/create/new', { state: { file } });
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-start justify-center p-8 min-h-full">
|
|
<Box className="flex flex-col gap-4 p-6 w-full max-w-md">
|
|
<h1 className="text-lg font-semibold text-gray-900">Upload Clip</h1>
|
|
|
|
<input
|
|
type="file"
|
|
onChange={(e) => {
|
|
const selected = e.target.files?.[0] ?? null;
|
|
setFile(selected);
|
|
setError(null);
|
|
}}
|
|
className="h-36 cursor-pointer rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-4 text-center text-sm text-gray-500 hover:bg-gray-100 hover:border-primary transition-colors duration-150"
|
|
/>
|
|
|
|
<BlueButton onClick={press}>Upload</BlueButton>
|
|
|
|
{error && <p className="text-sm text-red-500 text-center">{error}</p>}
|
|
</Box>
|
|
</div>
|
|
)
|
|
};
|
|
|
|
export default ClipUpload;
|