Cambios para realizar en los archivos de la branch feature/add-item

Actividades

- Cambiar la extensión de los archivos que son componentes, de .js a .jsx (AddItem.jsx, ReservationList.jsx)
- Mover el archivo AddItem.css de la carperta componentes a la carpeta styles.
- Cambiar el nombre de la imagen 'background add' por 'background-add', sin espacios.
- Eliminar los estilos agregados al index.css:
            body,
            #root {
              width: 100%;
              height: 100vh;
            }
- Reemplazar el contenido de los archivos 'AddItem.jsx', 'AddItem.css' y 'App.jsx' por los que se encuentran en este gist. Se modifico principalmente los estilos (y por ende algunas clases y etiquetas dentro del componente) y la ubicación de la ruta en el browser.

src-App.jsx

import React from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

// Elements for the router.
import Root from './routes/root';
import ErrorPage from './routes/error-page';
import Splash from './components/Splash';
// import Item from './components/ItemList';
import ReservationsList from './components/ReservationsList';
import AddItem from './components/AddItem';
import AddReserve from './components/AddReserve';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: '/',
        element: <Splash />,
      },
      // {
      //   path: 'items',
      //   element: <Item />,
      // },
      // {
      //   path: 'registration',
      //   element: <Registration />,
      // },
      //   {
      //     path: 'login',
      //     element: <Login />,
      //   },
      //   {
      //     path: 'delete_item',
      //     element: <DeleteItem />,
      //   },
      {
        path: 'add_item',
        element: <AddItem />,
      },
      {
        path: 'add_reserve',
        element: <AddReserve />,
      },
      {
        path: 'reservation_list',
        element: <ReservationsList />,
      },
    ],
  },
]);

function App() {
  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

export default App;

src-components-AddItem.jsx

import { useState } from 'react';
import '../styles/AddItem.css';

export default function AddItem() {
  const [message, setMessage] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault();

    const form = event.target;
    const formData = new FormData(form);

    formData.append('item[name]', form.name.value);
    formData.append('item[city]', form.city.value);
    formData.append('item[description]', form.description.value);
    formData.append('item[price]', form.price.value);
    formData.append('item[image]', form.image.files[0]);

    try {
      const response = await fetch('http://localhost:3000/api/v1/items', {
        method: 'POST',
        headers: {},
        body: formData,
      });

      if (response.ok) {
        // Manejar la respuesta si la solicitud fue exitosa
        setMessage('Item added successfully!');
        event.target.reset();
      } else {
        // Manejar errores si la solicitud falla
        setMessage('Failed to add item');
      }
    } catch (error) {
      setMessage(`Error: ${error.message}`);
    }
  };

  return (
    <>
      <div className="addItemCotent d-flex flex-column justify-content-center align-items-center">
        <div className="div-form d-flex flex-column justify-content-center align-items-center gap-2">
          <h1 className="formTitle">New Item</h1>
          <div className="d-flex p-3">
            <form action="/api/v1/items" method="post" onSubmit={handleSubmit} className="div-form d-flex flex-column justify-content-center align-items-center gap-1">
              <div>
                <label htmlFor="name" className="form-label" aria-label="Name">
                  <input type="text" id="name" name="name" placeholder="Name" className="form-control" />
                </label>
              </div>
              <div>
                <label htmlFor="city" className="form-label" aria-label="City">
                  <input type="text" id="city" name="city" placeholder="City" className="form-control" />
                </label>
              </div>
              <div>
                <label htmlFor="description" className="form-label" aria-label="Description">
                  <input type="text" id="description" name="description" placeholder="Description" className="form-control" />
                </label>
              </div>
              <div>
                <label htmlFor="price" className="form-label" aria-label="Price">
                  <input type="text" id="price" name="price" placeholder="Price" className="form-control" />
                </label>
              </div>
              <div>
                <label htmlFor="image" className="form-label">
                  Image
                  <input type="file" id="image" name="image" className="form-control" />
                </label>
              </div>
              <button type="submit" className="btn btn-primary">Add Item</button>
            </form>
          </div>
        </div>
        <div>
          {message && <p>{message}</p>}
        </div>
      </div>
    </>
  );
}

src-styles-AddItem.css

.addItemCotent {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: -1;
  background: url('/src/assets/background-add.png') center center no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
}

.div-form {
  max-width: 35rem;
  border-radius: 1rem;
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(10px);
  padding: 1rem;
  animation: appear 0.2s ease-in-out 0.1s forwards;
}

form div,
form div label {
  width: 100%;
}

label.form-label {
  color: white;
}

.div-form button {
  border: 2px solid var(--green);
  background-color: rgba(153, 194, 16, 0.3);
  margin-top: 0.8rem;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  transition: all 0.3s ease-in-out;
  text-shadow: 0.3rem 0.3rem 0.3rem rgba(0, 0, 0, 0.5);
  filter: drop-shadow(-0.1rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1));
}

.div-form button:hover {
  transform: scale(1.1);
  border: 2px solid var(--green-hover);
  background-color: var(--green-hover);
  animation: fadeInTop 0.2s ease-in-out 0.7s forwards;
}