feat!: agregar página Not found

src/App.css

@@ -1 +0,0 @@
-

src/App.jsx

@@ -1,11 +1,13 @@
-import { useState } from "react";
-import heroImg from "./assets/hero.png";
-import Cart from "./pages/Cart";
-import Footer from "./Footer";
-import Home from "./pages/Home";
-import Navbar from "./Navbar";
 import { Route, Routes } from "react-router-dom";
+import Footer from "./Footer";
+import Navbar from "./Navbar";
+import Cart from "./pages/Cart";
+import Home from "./pages/Home";
+import Login from "./pages/Login";
+import Register from "./pages/Register";
 import "./App.css";
+import NotFound from "./pages/NotFound";
+import Pizza from "./pages/Pizza";
 
 function App() {
   return (
@@ -14,7 +16,11 @@ function App() {
       <main className="pb-4">
         <Routes>
           <Route path="/" element={<Home />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/register" element={<Register />} />
+          <Route path="/pizza/p001" element={<Pizza />} />
           <Route path="/cart" element={<Cart />} />
+          <Route path="*" element={<NotFound />} />
         </Routes>
       </main>
       <Footer />

src/Navbar.jsx

@@ -8,8 +8,9 @@ const Navbar = () => {
   return (
     <nav className="bg-green-700 text-white flex items-center justify-between gap-4">
       <div className="flex items-center">
-        <p className="font-bold">Pizzería Mamma Mía!</p>
+        <Link to="/" className="font-bold">
-        <button>Home</button>
+          Pizzería Mamma Mía!
+        </Link>
         {token ? (
           <>
             <button>Profile</button>
@@ -17,8 +18,8 @@ const Navbar = () => {
           </>
         ) : (
           <>
-            <button>Login</button>
+            <Link to="/login">Login</Link>
-            <button>Register</button>
+            <Link to="/register">Register</Link>
           </>
         )}
       </div>

src/components/CardPizza.jsx

@@ -1,4 +1,5 @@
 import "./CardPizza.css";
+import { Link } from "react-router-dom";
 
 /**
  *
@@ -23,7 +24,12 @@ const CardPizza = (props) => (
     </p>
     <div className="flex gap-4">
       <button className="border-black border-2 rounded-md px-4">Ver más</button>
-      <button className="bg-black text-white rounded-md px-4">Añadir</button>
+      <Link
+        to={`/pizza/${props.id}`}
+        className="bg-black text-white rounded-md px-4"
+      >
+        Añadir
+      </Link>
     </div>
   </article>
 );

src/pages/Home.jsx

@@ -3,7 +3,7 @@ import española from "../assets/española.jpg";
 import napolitana from "../assets/napolitana.jpg";
 import pepperoni from "../assets/pepperoni.jpg";
 import CardPizza from "../components/CardPizza";
-import Header from "../Header"
+import Header from "../Header";
 import { useEffect } from "react";
 
 const Home = () => {
@@ -18,11 +18,11 @@ const Home = () => {
     fetchPizzas();
   }, []);
   return (
-    <section id="home" className="w-full flex flex-col gap-4 pb-4">
+    <section id="home" className="w-dvw flex flex-col overflow-auto gap-4 pb-4">
       <Header />
       <div className="flex gap-4">
-        {pizzas.map(({ id, ...pizza }) => (
+        {pizzas.map((pizza) => (
-          <CardPizza key={id} {...pizza} />
+          <CardPizza key={pizza.id} {...pizza} />
         ))}
       </div>
     </section>

src/pages/Login.jsx

@@ -0,0 +1,40 @@
+import { useState } from "react";
+
+const Login = () => {
+  const [user, setUser] = useState("");
+  const [pass, setPass] = useState("");
+  return (
+    <div>
+      <p>Usuario</p>
+      <input
+        type="text"
+        className="bg-gray-200"
+        onChange={(ev) => setUser(ev.target.value)}
+      />
+      <p>Contraseña</p>
+      <input
+        type="password"
+        className="bg-gray-200"
+        onChange={(ev) => setPass(ev.target.value)}
+      />
+      <p>Confirmar contraseña</p>
+      <button
+        className="p-2 rounded-md bg-teal-400"
+        onClick={() => {
+          if (pass.length < 6) {
+            alert("La contraseña debe tener por lo menos 6 caracteres");
+            return;
+          }
+          if (user.length === 0) {
+            alert("Se requiere un nombre de usuario");
+          }
+          alert("Autenticacion exitosa");
+        }}
+      >
+        Iniciar sesión
+      </button>
+    </div>
+  );
+};
+
+export default Login;

src/pages/NotFound.jsx

@@ -0,0 +1,21 @@
+import { Link } from "react-router-dom";
+
+const NotFound = () => {
+  return (
+    <section className="flex gap-4 flex-col w-fit">
+      <h1 className="text-4xl">Error 404</h1>
+      <p>
+        ¿No sabes qué es eso? Significa que esta página no existe. Vamos,
+        volvamos a la página principal
+      </p>
+      <Link
+        to="/"
+        className="p-2 bg-green-700 text-white w-fit hover:bg-green-300 hover:text-black"
+      >
+        Ir al inicio
+      </Link>
+    </section>
+  );
+};
+
+export default NotFound;

src/pages/Pizza.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 
 const Pizza = () => {
   const [pizza, setPizza] = useState(null);
+  const [error, setError] = useState(null);
   const fetchPizza = async () => {
     const url = "http://localhost:5000/api/pizzas/p001";
     const res = await fetch(url);
@@ -9,28 +10,30 @@ const Pizza = () => {
     setPizza(data);
   };
   useEffect(() => {
-    fetchPizza();
+    fetchPizza().catch(setError);
   });
-  return (
+  return pizza && !error ? (
-    pizza && (
+    <section id="pizza">
-      <section id="pizza">
+      <h1 className="text-4xl font-bold">Pizza {pizza.name}</h1>
-        <h1 className="text-4xl font-bold">Pizza {pizza.name}</h1>
+      <p className="text-green-700 font-bold text-2xl">
-        <p className="text-green-700 font-bold text-2xl">
+        ${pizza.price.toLocaleString("es-CL")}
-          ${pizza.price.toLocaleString("es-CL")}
+      </p>
-        </p>
+      <img src={pizza.img} className="rounded-md" />
-        <img src={pizza.img} className="rounded-md" />
+      <p>{pizza.desc}</p>
-        <p>{pizza.desc}</p>
+      <h2 className="text-3xl">Ingredientes</h2>
-        <h2 className="text-3xl">Ingredientes</h2>
+      <ul>
-        <ul>
+        {pizza.ingredients.map((i, index) => (
-          {pizza.ingredients.map((i, index) => (
+          <li key={index}>- {i}</li>
-            <li key={index}>- {i}</li>
+        ))}
-          ))}
+      </ul>
-        </ul>
+      <button className="text-white bg-black p-2 rounded-md">
-        <button className="text-white bg-black p-2 rounded-md">
+        Añadir al carrito
-          Añadir al carrito
+      </button>
-        </button>
+    </section>
-      </section>
+  ) : (
-    )
+    <>
+      <h1 className="text-red font-bold">Error al obtener pizza: {error}</h1>
+    </>
   );
 };
 

src/pages/Register.jsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+
+const Register = () => {
+  const [user, setUser] = useState("");
+  const [pass, setPass] = useState("");
+  const [confirmPass, setConfirmPass] = useState("");
+  return (
+    <div>
+      <p>Usuario</p>
+      <input
+        type="text"
+        className="bg-gray-200"
+        onChange={(ev) => setUser(ev.target.value)}
+      />
+      <p>Contraseña</p>
+      <input
+        type="password"
+        className="bg-gray-200"
+        onChange={(ev) => setPass(ev.target.value)}
+      />
+      <p>Confirmar contraseña</p>
+      <input
+        type="password"
+        className="bg-gray-200"
+        onChange={(ev) => setConfirmPass(ev.target.value)}
+      />
+      <br />
+      <button
+        className="p-2 rounded-md bg-teal-400"
+        onClick={() => {
+          if (pass.length < 6) {
+            alert("La contraseña debe tener por lo menos 6 caracteres");
+            return;
+          }
+          if (pass !== confirmPass) {
+            alert("Las contraseñas no coinciden");
+            return;
+          }
+          if (user.length === 0) {
+            alert("Se requiere un nombre de usuario");
+          }
+          alert("Autenticacion exitosa");
+        }}
+      >
+        Registrarse
+      </button>
+    </div>
+  );
+};
+
+export default Register;