Edit Book - Copy this React, Tailwind Component to your project
Quiero crear un componente en Angular llamado BookEditComponent. No estoy usando standalone: true, por lo que el componente debe incluirse en un módulo convencional. Este componente estará diseñado para editar un libro y debe cumplir con los siguientes requisitos: HTML Un navbar en la parte superior con el título Editar Libro. Una estructura central donde se muestra la información del libro: Una columna para la imagen del libro. Otra columna que contenga los campos editables del formulario. Los campos del formulario deben incluir: Título: Un campo de texto editable para ingresar un nuevo título. Descripción: Un textarea con un placeholder que permita escribir una nueva descripción. Autores: Un campo de búsqueda (input) con autocompletado (datalist) para seleccionar autores de una lista filtrada. Un botón para agregar autores seleccionados. Un área donde se muestren los autores agregados. Género: Un campo select que permita elegir entre opciones como Narrativo, Lírico, Dramático, Didáctico, Poético y Otro. Un botón para subir una nueva imagen del libro (con soporte para archivos .jpg). Un botón para guardar los cambios, con un ícono de disquete. Un mensaje debajo del botón para indicar que subir una nueva imagen sobrescribe la actual. Lógica del Componente Debe estar basado en formularios reactivos (ReactiveFormsModule) y contener lo siguiente: Formulario Reactivo (FormGroup) Nombre: editBookForm. Controles: titleInput: Cadena vacía inicial. descriptionInput: Cadena vacía inicial. authorFilter: Para buscar autores. genderInput: Para seleccionar género. Funciones del Componente ngOnInit: Cargar los datos del libro actual utilizando el ID desde la URL. getBook(id: number): Obtener los datos del libro desde un servicio (BookService) y mostrarlos en el formulario. getAuthors(): Filtrar autores según lo escrito en el campo authorFilter y cargar una lista en un datalist. addAuthor(): Agregar un autor a la lista de autores seleccionados. uploadImage(event: any): Manejar la subida de imágenes. save(): Consola los datos actuales del formulario. CSS El diseño debe ser limpio y moderno. Instrucciones de estilo: Estilo general Fondo blanco con bordes redondeados y sombras suaves. Uso de colores claros para fondo y acentos de color verde para los botones. Estilo de la tarjeta del libro La imagen del libro debe ser centrada y tener bordes redondeados con una sombra ligera. Los campos del formulario deben estar alineados verticalmente con espacio uniforme. Botones Los botones deben ser grandes, con bordes redondeados. Iconos alineados correctamente a la izquierda del texto. Navbar Fondo gris claro con acentos de color verde. Íconos grandes y centrados. Servicios y Dependencias BookService: Servicio para obtener los datos de un libro por su ID. AuthorsService: Servicio para buscar autores por nombre o apellido y obtener autores seleccionados. Router (ActivatedRoute): Para obtener el ID del libro desde la URL.
