53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
import { Input } from '@headlessui/react';
|
|
import { FormEvent, useState } from 'react';
|
|
import InputLabel from './InputLabel';
|
|
import Modal from './Modal';
|
|
import PrimaryButton from './PrimaryButton';
|
|
|
|
export default function ModalAñadirCancion({
|
|
showaddmodal,
|
|
addcancion,
|
|
setShowaddmodal,
|
|
}: {
|
|
showaddmodal: boolean;
|
|
addcancion: (event: FormEvent<HTMLFormElement>) => void;
|
|
setShowaddmodal: (arg0: boolean) => void;
|
|
}) {
|
|
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
|
|
|
return (
|
|
<Modal
|
|
show={showaddmodal}
|
|
onClose={() => setShowaddmodal(false)}
|
|
closeable={true}
|
|
maxWidth="md"
|
|
>
|
|
<form onSubmit={addcancion} className="p-6">
|
|
<h2 className="mb-2 text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
Añadiendo Cancion
|
|
</h2>
|
|
<hr />
|
|
<div className="mt-2">
|
|
<InputLabel>Cancion a añadir. máximo 50MB</InputLabel>
|
|
<Input
|
|
type="file"
|
|
onChange={(e: any) => setSelectedFile(e.target.files[0])}
|
|
name="song"
|
|
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm file:mr-4 file:rounded-md file:border-0 file:bg-indigo-100 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
|
|
/>
|
|
<hr className="mt-2" />
|
|
<div className="flex place-content-center">
|
|
<PrimaryButton
|
|
className="mt-2"
|
|
type="submit"
|
|
disabled={!selectedFile}
|
|
>
|
|
Subir
|
|
</PrimaryButton>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
}
|