57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import { Cancion } from '@/types/types';
|
|
import { Input } from '@headlessui/react';
|
|
import { FormEvent } from 'react';
|
|
import InputLabel from './InputLabel';
|
|
import Modal from './Modal';
|
|
import PrimaryButton from './PrimaryButton';
|
|
|
|
export default function ModalEditarCancion({
|
|
showEditModal,
|
|
UpdateCallback,
|
|
setShowEditModal,
|
|
song,
|
|
}: {
|
|
song: Cancion;
|
|
showEditModal: boolean;
|
|
UpdateCallback: (event: FormEvent<HTMLFormElement>) => void;
|
|
setShowEditModal: (arg0: boolean) => void;
|
|
}) {
|
|
return (
|
|
<Modal
|
|
show={showEditModal}
|
|
onClose={() => setShowEditModal(false)}
|
|
closeable={true}
|
|
maxWidth="md"
|
|
>
|
|
<form onSubmit={UpdateCallback} className="p-6">
|
|
<h2 className="mb-2 text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
Editando Datos Cancion
|
|
</h2>
|
|
<hr />
|
|
<div className="mt-2">
|
|
<InputLabel>Titulo</InputLabel>
|
|
<Input
|
|
type="text"
|
|
name="title"
|
|
defaultValue={song.title}
|
|
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm hover:bg-gray-700 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"
|
|
/>
|
|
<InputLabel>Artista</InputLabel>
|
|
<Input
|
|
type="text"
|
|
name="artist"
|
|
defaultValue={song.artist}
|
|
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm hover:bg-gray-700 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">
|
|
Subir Cambios
|
|
</PrimaryButton>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
}
|