Merge pull request #5 from Genesis-Solutions/00-components

00 components

GomezMorinFrontEnd/package.json

@@ -9,14 +9,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.14",
+    "@heroicons/react": "^2.0.17",
     "@reduxjs/toolkit": "^1.9.3",
     "axios": "^1.3.4",
     "google-map-react": "^2.2.0",
     "google-maps-react": "^2.0.6",
+    "headlessui": "^0.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.8",
-    "react-redux": "^8.0.5"
+    "react-icons": "^4.8.0",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.10.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

GomezMorinFrontEnd/src/App.jsx

@@ -1,59 +1,19 @@
-import { useDispatch, useSelector } from "react-redux"
-import { setUsers } from "./states/generalSlice"
-import Card from "./components/Card"
-import { useForm } from "react-hook-form"
-import { createUser, readUsers } from "./queries/query"
-import { useEffect } from "react"
-import MapContainer from "./components/MapContainer"
-
-function App() {
-  const users = useSelector((state) => state.general.users)
-  const dispatch = useDispatch()
-
-  const { register, handleSubmit } = useForm()
-
-  const onSubmit = async (data) => {
-    const response = await createUser(data)
-
-    dispatch(setUsers(response))
-  }
-
-  useEffect(() => {
-    readUsers()
-    .then((response) => {
-
-      if (response) {
-        dispatch(setUsers(response))
-      }
-    })
-  }, [])
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Page from "./pages/page";
+import Layout from "./components/Layout";
 
+const App = () => {
   return (
-    <div className="w-full h-full ">
-      <form className="flex flex-col w-1/6" onSubmit={ handleSubmit(onSubmit) }>
-        <label htmlFor="username">Username: </label>
-        <input className="border-2 border-gray-400" type="text" id="username" placeholder="Username" {...register("username")} />
-        <label htmlFor="image">Image: </label>
-        <input type="file" id="image" {...register("urlImg")}/>
-        <button
-          className="p-1 border-2 border-black bg-slate-300 "
-        >
-          Enviar Usuario
-        </button>
-      </form>
-
-      <div>
-        <ul>
-          { users.map((user, id) => (
-            <Card key={id} user={ user }/>
-          )) }
-        </ul>
-      </div>
-      <div>
-        <MapContainer />
-      </div>
+    <div className="App w-full h-full">
+      <BrowserRouter>
+        <Routes>
+          <Route element={<Layout />}>
+            <Route path="/" element={<Page />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
     </div>
-  )
-}
+  );
+};
 
-export default App
+export default App;

GomezMorinFrontEnd/src/components/Button.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+/**
+ * This is a component for a button.
+ *
+ * @param {string} text - The text the button will display.
+ * @param {string} type - The type of the button.
+ * @param {string} colorBg - The color of the background of the button. Example: bg-red-600
+ * @param {string} colorHoverBg- The color of the background of the button when hover. Example: hover:bg-red-700
+ * @param {function} action- The path that will navigate to.
+ * @returns {JSX.Element} The JSX element displaying a button.
+ */
+
+const Button = ({ text, type, colorBg, colorHoverBg, action }) => {
+  const styles = [
+    "w-full",
+    colorBg,
+    "text-white",
+    "text-sm",
+    "p-2",
+    "rounded-lg",
+    colorHoverBg,
+  ];
+
+  return (
+    <button className={styles.join(" ")} type={type} onClick={action}>
+      {text}
+    </button>
+  );
+};
+
+export default Button;