indicaciones hans

Raul-Reyes2 · Raul-Reyes2 · commit d40bd2c86ec3 · 2025-11-29T21:10:23.000+01:00
diff --git a/.learn/config.json b/.learn/config.json
@@ -0,0 +1,9 @@
+{
+  "config": {
+    "editor": {
+      "agent": "vscode"
+    },
+    "autoPlay": true
+  },
+  "currentExercise": null
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/img/iconosw.png b/src/assets/img/iconosw.png
diff --git a/src/assets/img/rigo-baby.jpg b/src/assets/img/rigo-baby.jpg
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
@@ -0,0 +1,21 @@
+export const Card = ({ imgURL, title, children }) => {
+  return (
+    <>
+      <div className="card">
+        <img src={imgURL} className="card-img-top" alt="Luke Skywalker" />
+        <div className="card-body">
+          <h5 className="card-title">{title}</h5>
+          {children}
+          <div className="d-flex gap-5">
+            <a href="#" className="btn btn-primary me-5">
+              Learn more
+            </a>
+            <a href="like" className="btn btn-primary">
+              <i className="fa-regular fa-bookmark"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Favorites.jsx b/src/components/Favorites.jsx
@@ -0,0 +1,28 @@
+const favoriteList = ["Gustavo", "kilian", "Pepito"];
+export const Favorites = () => {
+  return (
+    <>
+      <div className="dropdown">
+        <a
+          className="btn btn-primary dropdown-toggle"
+          href="#"
+          role="button"
+          data-bs-toggle="dropdown"
+          aria-expanded="false"
+        >
+          Favorites
+        </a>
+
+        <ul className="dropdown-menu">
+          {favoriteList.map((item) => (
+            <li>
+              <a className="dropdown-item" href="#">
+                {item}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,19 +1,27 @@
+import React from "react";
 import { Link } from "react-router-dom";
+import starWarsLogo from "../assets/img/iconosw.png";
+import { Favorites } from "./Favorites";
 
-export const Navbar = () => {
+// ... el resto del componente
 
-	return (
-		<nav className="navbar navbar-light bg-light">
-			<div className="container">
-				<Link to="/">
-					<span className="navbar-brand mb-0 h1">React Boilerplate</span>
-				</Link>
-				<div className="ml-auto">
-					<Link to="/demo">
-						<button className="btn btn-primary">Check the Context in action</button>
-					</Link>
-				</div>
-			</div>
-		</nav>
-	);
-};
+export const Navbar = () => {
+  return (
+    <nav className="navbar navbar-light bg-light">
+      <div className="container">
+        <Link to="/">
+          <img
+            src={starWarsLogo}
+            alt="Star Wars Logo"
+            style={{ height: "100px", marginRight: "10px" }}
+          />
+        </Link>
+        <div className="ml-auto">
+          <Link to="/demo">
+            <Favorites />
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+};
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,3 @@
+.card {
+    width: 18rem;
+}
diff --git a/src/pages/Character.jsx b/src/pages/Character.jsx
@@ -0,0 +1,3 @@
+export const Character = () => {
+  return <>Character</>;
+};
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -1,16 +1,35 @@
-import rigoImageUrl from "../assets/img/rigo-baby.jpg";
 import useGlobalReducer from "../hooks/useGlobalReducer.jsx";
+import { Card } from "../components/Card";
+import { useEffect } from "react";
+import { getCharacterList } from "../swapiFetch.js";
+
+const MOCK_IMG_SRC =
+  "https://lumiere-a.akamaihd.net/v1/images/luke-skywalker-main_7ffe21c7.jpeg?region=130%2C147%2C1417%2C796";
 
 export const Home = () => {
+  const { store, dispatch } = useGlobalReducer();
+
+  const updateData = async () => {
+    const characterList = await getCharacterList();
+    dispatch({ type: "update_character_list", payload: characterList });
+  };
 
-  const {store, dispatch} =useGlobalReducer()
+  useEffect(() => {
+    updateData();
+  }, []);
 
-	return (
-		<div className="text-center mt-5">
-			<h1>Hello Rigo!!</h1>
-			<p>
-				<img src={rigoImageUrl} />
-			</p>
-		</div>
-	);
-}; 
+  return (
+    <>
+      Home
+      {store.characterList.map((character) => (
+        <Card imgURL={MOCK_IMG_SRC} title={character.name}>
+          <ul>
+            <li>eye color: blue</li>
+            <li>hair Color: green</li>
+            <li>size: 6feet</li>
+          </ul>
+        </Card>
+      ))}
+    </>
+  );
+};
diff --git a/src/pages/Layout.jsx b/src/pages/Layout.jsx
@@ -1,15 +1,14 @@
-import { Outlet } from "react-router-dom/dist"
-import ScrollToTop from "../components/ScrollToTop"
-import { Navbar } from "../components/Navbar"
-import { Footer } from "../components/Footer"
+import { Outlet } from "react-router-dom/dist";
+import ScrollToTop from "../components/ScrollToTop";
+import { Navbar } from "../components/Navbar";
+import { Footer } from "../components/Footer";
 
 // Base component that maintains the navbar and footer throughout the page and the scroll to top functionality.
 export const Layout = () => {
-    return (
-        <ScrollToTop>
-            <Navbar />
-                <Outlet />
-            <Footer />
-        </ScrollToTop>
-    )
-}
+  return (
+    <ScrollToTop>
+      <Navbar />
+      <Outlet />
+    </ScrollToTop>
+  );
+};
diff --git a/src/pages/Planet.jsx b/src/pages/Planet.jsx
@@ -0,0 +1,3 @@
+export const Planet = () => {
+  return <>Planet</>;
+};
diff --git a/src/pages/Vehicle.jsx b/src/pages/Vehicle.jsx
@@ -0,0 +1,3 @@
+export const Vehicle = () => {
+  return <>Vehicle</>;
+};
diff --git a/src/routes.jsx b/src/routes.jsx
@@ -1,30 +1,31 @@
 // Import necessary components and functions from react-router-dom.
 
 import {
-    createBrowserRouter,
-    createRoutesFromElements,
-    Route,
+  createBrowserRouter,
+  createRoutesFromElements,
+  Route,
 } from "react-router-dom";
 import { Layout } from "./pages/Layout";
 import { Home } from "./pages/Home";
-import { Single } from "./pages/Single";
-import { Demo } from "./pages/Demo";
+import { Character } from "./pages/Character";
+import { Planet } from "./pages/Planet";
+import { Vehicle } from "./pages/Vehicle";
+import { Card } from "./components/Card";
 
 export const router = createBrowserRouter(
-    createRoutesFromElements(
+  createRoutesFromElements(
+    <Route path="/" element={<Layout />} errorElement={<h1>Not found</h1>}>
+      <Route element={<Home />} path="/" />
+      <Route element={<Character />} path="Character" />
+      <Route element={<Planet />} path="Planet" />
+      <Route element={<Vehicle />} path="Vehicle" />
+      <Route element={<Card />} path="Card" />
+    </Route>
+
     // CreateRoutesFromElements function allows you to build route elements declaratively.
     // Create your routes here, if you want to keep the Navbar and Footer in all views, add your new routes inside the containing Route.
     // Root, on the contrary, create a sister Route, if you have doubts, try it!
     // Note: keep in mind that errorElement will be the default page when you don't get a route, customize that page to make your project more attractive.
     // Note: The child paths of the Layout element replace the Outlet component with the elements contained in the "element" attribute of these child paths.
-
-      // Root Route: All navigation will start from here.
-      <Route path="/" element={<Layout />} errorElement={<h1>Not found!</h1>} >
-
-        {/* Nested Routes: Defines sub-routes within the BaseHome component. */}
-        <Route path= "/" element={<Home />} />
-        <Route path="/single/:theId" element={ <Single />} />  {/* Dynamic route for single items */}
-        <Route path="/demo" element={<Demo />} />
-      </Route>
-    )
-);
+  )
+);
diff --git a/src/store.js b/src/store.js
@@ -1,32 +1,41 @@
-export const initialStore=()=>{
-  return{
-    message: null,
-    todos: [
-      {
-        id: 1,
-        title: "Make the bed",
-        background: null,
-      },
-      {
-        id: 2,
-        title: "Do my homework",
-        background: null,
-      }
-    ]
-  }
-}
+export const initialStore = () => {
+  return {
+    favoriteList: [],
+    characterList: [],
+    planetList: [],
+    vehicleList: [],
+  };
+};
 
 export default function storeReducer(store, action = {}) {
-  switch(action.type){
-    case 'add_task':
-
-      const { id,  color } = action.payload
+  switch (action.type) {
+    case "add_task":
+      const { id, color } = action.payload;
 
       return {
         ...store,
-        todos: store.todos.map((todo) => (todo.id === id ? { ...todo, background: color } : todo))
+        todos: store.todos.map((todo) =>
+          todo.id === id ? { ...todo, background: color } : todo
+        ),
       };
+    case "add_Favorite":
+      const { name } = action.payload;
+      return { ...store, favoriteList: [...store.favoriteList, name] };
+    case "remove_favorite":
+      const favoriteList = store.favoriteList.filter(
+        (item) => item !== action.payload.name
+      );
+    case "update_characterList":
+      const characterList = action.payload;
+      return { ...store.characterList };
+    case "update_planetList":
+      const planetList = action.payload;
+      return { ...store.planetList };
+    case "update_vehicleList":
+      const vehicleList = action.payload;
+      return { ...store.vehicleList };
+
     default:
-      throw Error('Unknown action.');
-  }    
+      throw Error("Unknown action.");
+  }
 }
diff --git a/src/swapiFetch.js b/src/swapiFetch.js
@@ -0,0 +1,19 @@
+const SWAPI_URL = "https://www.swapi.tech/api/";
+
+export const getCharacterList = async () => {
+  const httpResponse = await fetch(`${SWAPI_URL}people`);
+  const data = await httpResponse.json();
+  return data.results;
+};
+
+export const getPlanetList = async () => {
+  const httpResponse = await fetch(`${SWAPI_URL}planets`);
+  const data = await httpResponse.json();
+  return data.results;
+};
+
+export const getVehicleList = async () => {
+  const httpResponse = await fetch(`${SWAPI_URL}vehicles`);
+  const data = await httpResponse.json();
+  return data.results;
+};

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export const Character = () => {`
	`2`	`+ return <>Character</>;`
	`3`	`+};`