Refactor map

Juanies · Jul 1, 2024 · e2c036b · e2c036b
1 parent 2a7bb15
commit e2c036b
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 31 deletions.
diff --git a/components/elements/JobCard.tsx b/components/elements/JobCard.tsx
@@ -8,18 +8,20 @@ interface JobCardProps {
   description: string;
 }
 
-export default function JobCard({ imageUrl, username, price, description }: JobCardProps) {
+export default function JobCard(props : JobCardProps) {
+
+
   return (
 <article className="bg-[#EAE8E8] min-w-[20em] p-4 rounded-xl flex flex-col gap-5">
   <div className="flex items-center justify-between">
     <div className="flex gap-4 items-center">
-      <Image src={imageUrl} alt={`${username}`} width={42} height={42} className="w-10 h-10 rounded-full" />
-      <p className="font-semibold">{username}</p>
+      <Image src={props.imageUrl} alt={`${props.username}`} width={42} height={42} className="w-10 h-10 rounded-full" />
+      <p className="font-semibold">{props.username}</p>
     </div>
-    <p className="text-[#0070B9] font-semibold">{price}</p>
+    <p className="text-[#0070B9] font-semibold">{props.price}</p>
   </div>
   <p>
-    {description}
+    {props.description}
   </p>
 </article>
 

diff --git a/components/elements/Menu.tsx b/components/elements/Menu.tsx
@@ -40,19 +40,21 @@ export default function Menu() {
     { name: "Retos", link: "/retos" },
   ];
 
+    const MenuList = menu.map((item, index) => (
+      <li key={index}>
+        <Link
+          href={item.link}
+          className={`${pathName === item.link ? "font-bold text-[#0070B9]" : ""}`}
+        >
+          {item.name}
+        </Link>
+      </li>
+    ));
+
   return (
     <nav className="h-auto text-[1rem]">
       <ul className="flex gap-8 items-center">
-        {menu.map((item, index) => (
-          <li key={index}>
-            <Link
-              href={item.link}
-              className={`${pathName === item.link ? "font-bold text-[#0070B9]" : ""}`}
-            >
-              {item.name}
-            </Link>
-          </li>
-        ))}
+        {MenuList}
         {session ? (
           <>
             <li>

diff --git a/components/elements/SearchBar.tsx b/components/elements/SearchBar.tsx
@@ -1,4 +1,3 @@
-// components/SearchBar.tsx
 
 import React from 'react';
 import SearchInput from '@/src/images/SearchInput';

diff --git a/components/elements/SectionCardsJob.tsx b/components/elements/SectionCardsJob.tsx
@@ -1,6 +1,6 @@
 "use client"
-import React, { useState, useEffect } from 'react';
-import JobCard from './JobCard';
+import JobCard from '@/components/elements/JobCard';
+import { useEffect, useState } from 'react';
 
 interface Job {
   id: number;
@@ -39,19 +39,22 @@ export default function SectionCardsJob({ limits, pages }: Props) {
     fetchJobs();
   }, [page, limit, pageOrNot]);
 
+  const JobsList = jobs.map((job) => (
+      <JobCard
+        key={job.id}
+        imageUrl={job.imagen}
+        username={job.usuario}
+        price={job.pago}
+        description={job.descripcion}
+      />
+    ));
+
+
   return (
     <div className='mt-10'>
       {error && <p className="text-red-500">{error}</p>}
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-        {jobs.map(job => (
-          <JobCard
-            key={job.id}
-            imageUrl={job.imagen}
-            username={job.usuario}
-            price={job.pago}
-            description={job.descripcion}
-          />
-        ))}
+        {JobsList}
       </div>
       {pageOrNot && (
         <div>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,7 @@
+import Header from "@/components/dashboard/Header";
+import "@/src/app/global.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import Header from "@/components/dashboard/Header";
-import "@/app/global.css"
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
@@ -17,8 +17,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-            <Header/>
-
+        <Header/>
         {children}
         </body>
     </html>