feat: title y artist edit

resources/js/Components/ModalEditarCancion.tsx

@@ -0,0 +1,56 @@
+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>
+  );
+}