Initial work on gym pages.

.env

 VITE_NODE_JS_API=http://localhost:3000
 VITE_NODE_JS_KEY=mbdmatkul4sks
-
+VITE_GYM_MEDIA_URL=http://localhost:8000/gym

src/App.tsx

@@ -13,7 +13,8 @@ import HomeLayout from "@/components/HomeLayout";
 import Register from "@/pages/Register";
 import UserProvider from "@/utils/context/AuthProvider";
 import Profile from "@/pages/Profile";
-import Gym from "@/pages/Gym";
+import Gym from "@/pages/gym/Gym";
+import GymIndividual from "@/pages/gym/GymIndividual";
 
 const queryClient = new QueryClient();
 const router = createBrowserRouter(
@@ -23,7 +24,8 @@ const router = createBrowserRouter(
         <Route path="" element={<Home />} />
         <Route path="/profile" element={<Profile />} />
         <Route path="/applications" element={<Home />} />
-        <Route path="/gyms" element={<Gym />} />
+        <Route path="/gyms" element={<Gym />}></Route>
+        <Route path="/gyms/:id" element={<GymIndividual />} />
       </Route>
       <Route element={<HomeLayout />}>
         <Route path="/login" element={<Login />} />

src/components/gym/GymCard.tsx

+import config from "@/utils/config";
+import { GymReturned } from "@/utils/validationSchema/gym";
+import React from "react";
+import { Link } from "react-router-dom";
+
+function GymCard({
+  gym: { averageRating, cityName, monthlyPrice, name, pictureId, id },
+}: {
+  gym: GymReturned;
+}) {
+  return (
+    <Link to={`./${id}`}>
+      <article className="flex flex-col rounded-lg items-start justify-start bg-slate-600 text-white font-normal gap-2">
+        <img
+          src={`${config.GYM_MEDIA_URL}/${pictureId}.jpg`}
+          className="w-full rounded-t-lg self-center"
+        />
+        <div className="flex flex-col items-start justify-start px-4 pb-4">
+          <h3>{name}</h3>
+          <p>{cityName}</p>
+          <p>{`${averageRating} stars`}</p>
+          <p>{`${monthlyPrice}/month`}</p>
+        </div>
+      </article>
+    </Link>
+  );
+}
+
+export default GymCard;

src/pages/Gym.tsx → src/pages/gym/Gym.tsx

+import GymCard from "@/components/gym/GymCard";
 import { useAllGyms } from "@/utils/context/GymProvider";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 
 function Gym() {
   const { allGyms, allGymsStatus } = useAllGyms();
@@ -12,10 +13,12 @@ function Gym() {
   }
 
   return (
-    <div>
-      {allGyms.map(({ id }) => (
-        <p>{id}</p>
-      ))}
+    <div className="w-full flex flex-col items-center justify-start py-4 lg:py-6">
+      <div className="grid gap-4 lg:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 max-w-7xl">
+        {allGyms.map((gym) => (
+          <GymCard gym={gym} key={gym.id} />
+        ))}
+      </div>
     </div>
   );
 }

src/pages/gym/GymIndividual.tsx

+import { useParams } from "react-router-dom";
+
+function GymIndividual() {
+  const { id } = useParams();
+  return <div>{id}</div>;
+}
+
+export default GymIndividual;

src/utils/config.ts

 const config = {
   NODE_JS_API: import.meta.env.VITE_NODE_JS_API as string,
   NODE_JS_KEY: import.meta.env.VITE_NODE_JS_KEY as string,
+  GYM_MEDIA_URL: import.meta.env.VITE_GYM_MEDIA_URL as string,
 };
 
 export default config;