Oferta page

frontend/src/App.jsx

@@ -9,6 +9,7 @@ import Login from './pages/Login'
 import PublicRoute from './components/PublicRoute'
 import PrivateRoute from './components/PrivateRoute'
 import Register from './pages/Register'
+import Oferta from './pages/Oferta'
 
 function App() {
 
@@ -21,6 +22,7 @@ function App() {
             <Route path="/login" element={<PublicRoute><Login /></PublicRoute>} />
             <Route path="/register" element={<PublicRoute><Register /></PublicRoute>} />
             <Route path="/nueva-oferta" element={<PrivateRoute><NuevaOferta /></PrivateRoute>} />
+            <Route path="/oferta/:offerId" element={<PrivateRoute><Oferta /></PrivateRoute>} />
         </Routes>
       </div>
     </BrowserRouter>

frontend/src/pages/Home.jsx

@@ -7,7 +7,7 @@ function Home() {
 	const [offers, setOffers] = useState([])
 
 	useEffect(() => {
-		fetch(`${API_URL}/offers`)
+		fetch(`${API_URL}/ofertas`)
 			.then(res => res.json())
 			.then(data => setOffers(data))
 	}, [])
@@ -50,7 +50,7 @@ function Home() {
 
 					<div className="flex flex-col">
 						<a className="bg-[#00A4B6] py-3 px-10 rounded uppercase font-extrabold tracking-wider w-fit"
-							href="#">Info</a>			
+							href={`/oferta/${offer.id}`}>Info</a>			
 					</div>
 				</div>
 			))}

frontend/src/pages/Oferta.jsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { API_URL } from '../config'
+
+const Oferta = () => {
+  const { offerId } = useParams()
+
+  const [offer, setOffer] = useState()
+
+  useEffect(() => {
+    fetch(`${API_URL}/oferta/${offerId}`, {
+      headers: {
+        'Authorization': `Bearer ${localStorage.getItem('token')}`
+      }
+    })
+      .then(res => res.json())
+      .then(data => setOffer(data))
+  }, [])
+
+  	const contratos = {
+		freelance: "Freelance",
+		completo: "Jornada completa",
+		medio: "Media jornada"
+	}
+
+  if (!offer) return <p>Cargando...</p>
+
+  return (
+    <>
+      <div className="flex justify-between py-10 md:py-20 items-center">
+        <h2 className="text-4xl font-semibold pb-5">Oferta {offer?.titulo}</h2>
+
+		<div>
+				<a className="bg-[#00A4B6] hover:bg-[#027481] transition cursor-pointer py-3 px-10 rounded uppercase font-extrabold tracking-wider w-full">Enviar CV</a>
+		</div>
+      </div>
+      <div className="py-5">
+				<div className="flex flex-row items-center justify-between border-b border-t border-gray-700 py-20 rounded px-4 transition">
+					<div className="flex flex-col flex-1">
+						<h3 className="text-xl text-gray-500">Empresa</h3>
+						<p className="text-2xl">{offer.empresa}</p>
+					</div>
+
+					<div className="flex flex-col flex-1">
+						<h3 className="text-gray-500 text-xl">Ubicacion</h3>
+						<p className="text-2xl">{offer.ubicacion}</p>
+					</div>
+
+					<div className="flex flex-col flex-1">
+						<h3 className="text-gray-500 text-xl">Contrato</h3>
+						<p className="text-2xl">{contratos[offer.contrato]}</p>
+					</div>
+
+          <div className="flex flex-col flex-1">
+						<h3 className="text-gray-500 text-xl">Salario</h3>
+						<p className="text-2xl">{offer.salario} €</p>
+					</div>
+				</div>
+      </div>
+
+
+      <div className="py-5">
+				<div className="flex flex-row items-center justify-between border-b border-gray-700 py-20 rounded px-4 transition">
+					<div className="flex flex-col flex-1">
+						<h3 className="text-xl text-gray-500">Descripcion del puesto</h3>
+						<p className="text-2xl">{offer.descripcion}</p>
+					</div>
+          </div>
+      </div>
+    </>
+  )
+}
+
+export default Oferta