Updated repo from betselot

package.json

@@ -7,8 +7,10 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
+    "react-challenge-interns": "file:",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-router-dom": "^6.26.2",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +36,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "react-test-renderer": "^18.3.1",
+    "tailwindcss": "^3.4.13"
   }
 }

src/App.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Route, Routes } from 'react-router-dom'
+import { Actors, ActorDetails, Films, Starships } from './pages'
+import {Header, Footer} from './components'
+const App = () => {
+
+  return (
+    <div>
+        <Routes>
+          <Route path='/' element={<Actors/>}/>
+          <Route path='/actor/:id' element={<ActorDetails/>}/>
+          <Route path='/films/:id' element={<Films/>}/>
+          <Route path='/starships/:id' element={<Starships/>}/>
+        </Routes>
+      <Footer/>
+    </div>
+  )
+}
+
+export default App

src/components/ActorCard.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import arrow from "../assets/arrow.svg";
+import calendar from "../assets/calendar.svg";
+
+const ActorCard = ({ actor,url }) => {
+  const id = url.split("/").filter(Boolean).pop(); // Getting the id of the actor from the url
+  return (
+    <div className="group relative flex min-h-[280px] w-full max-w-[300px] flex-col overflow-hidden rounded-xl bg-white shadow-md transition-all hover:shadow-lg md:min-h-[338px] m-5">
+      <div
+        // style={{ backgroundImage: `url(${actor?.imageUrl})` }} // This can be used if there was an imageUrl in the actor object
+        className="flex-center flex-grow bg-gray-50 bg-cover bg-center text-grey-500"
+      ></div>
+
+      <div className="flex min-h-[130px] flex-col gap-3 p-5 md:gap-4">
+        <div className="flex gap-2 flex-between">
+          <span className="text-[14px] font-semibold leading-[20px] w-min rounded-full bg-green-100 px-4 py-1 text-green-60">
+            {`${actor?.height}CM`}
+          </span>
+
+          <div className="flex w-max rounded-full bg-grey-500/10 px-1 py-1">
+            <img src={calendar} alt="calendar" className="w-4 h-4" />
+            <p className="text-[14px] font-semibold leading-[20px] text-grey-500 px-1 line-clamp-1 capitalize">
+              {actor?.birth_year}
+            </p>
+          </div>
+        </div>
+
+        <p className="p-medium-16 md:p-medium-20 line-clamp-2 flex-1 text-black">
+          {actor?.name}
+        </p>
+
+        <div className="flex-between w-full">
+          <p className="p-medium-14 md:p-medium-16 text-grey-600 line-clamp-1 capitalize">
+            {actor?.gender}
+          </p>
+
+          <Link to={`/actor/${id}`} className="flex gap-2 ">   {/* Link to the ActorDetails page */}
+            <p className="text-primary-500 text-nowrap ">Actor's Details</p>
+            <img src={arrow} alt="arrow" />
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ActorCard;

src/components/Footer.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <section className="bg-primary-50 bg-dotted-pattern bg-cover bg-center py-5 md:p-5">
+      <h3 className="wrapper text-right sm:text-right">
+        2024&copy; Betse95
+      </h3>
+    </section>
+  )
+}
+
+export default Footer

src/components/Header.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const Header = ({ title }) => {
+  return (
+    <section className="bg-primary-50 bg-dotted-pattern bg-cover bg-center py-5 md:p-5">
+      <h3 className="wrapper h3-bold text-center sm:text-left">
+        Actors {title}
+      </h3>
+    </section>
+  );
+};
+
+export default Header;

src/components/LinkSection.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import arrow from "../assets/arrow.svg";
+import { Link } from "react-router-dom";
+
+const LinkSection = ({ lable, data }) => {
+  return (
+    <div className=" flex flex-col gap-3">
+      <div className="flex flex-col gap-2">
+        <p className="p-bold-20 text-grey-600">{lable}: </p>
+        {/* <p className="p-medium-26 lg-p-regular-18">{edir?.description}</p> */}
+      </div>
+
+      <div className="flex flex-wrap gap-6">
+        {data.map((data) => (
+          <Link to={`/${lable.toLowerCase()}/${data.title | data.name}}`} className="flex gap-2">
+            <p className="text-primary-500 text-nowrap ">{data.title || data.name}</p>
+            <img src={arrow} alt="arrow" />
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default LinkSection;

src/components/index.js

@@ -0,0 +1,7 @@
+import Header from "./Header";
+import Footer from "./Footer";
+import ActorCard from "./ActorCard";
+import LinkSection from "./LinkSection";
+
+
+export { Header, Footer, ActorCard, LinkSection };

src/index.css

@@ -1,13 +1,61 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  font-family: "Poopins", sans-serif;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+@layer utilities {
+  .wrapper {
+    @apply max-w-7xl lg:mx-auto p-5 md:px-10 xl:px-0 w-full;
+  }
+
+  .flex-between {
+    @apply flex justify-between items-center;
+  }
+
+  .flex-center {
+    @apply flex justify-center items-center;
+  }
+
+  /* text styles*/
+  /* 64 */
+  .h1-bold {
+    @apply font-bold text-[40px] leading-[48px] lg:text-[48px] lg:leading-[60px]  xl:text-[58px] xl:leading-[74px];
+  }
+
+  /* 40 */
+  .h2-bold {
+    @apply font-bold text-[32px] leading-[40px] lg:text-[36px] lg:leading-[44px] xl:text-[40px] xl:leading-[48px];
+  }
+
+  /* 36 */
+  .h3-bold {
+    @apply font-bold text-[28px] leading-[36px] md:text-[36px] md:leading-[44px];
+  }
+
+  /* 20 */
+  .p-bold-20 {
+    @apply font-bold text-[20px] leading-[30px] tracking-[2%];
+  }
+  .p-medium-20 {
+    @apply text-[20px] font-medium leading-[30px];
+  }
+
+  .p-regular-20 {
+    @apply text-[20px] font-normal leading-[30px] tracking-[2%];
+  }
+
+  .p-medium-18 {
+    @apply text-[18px] font-medium leading-[28px];
+  }
+
+  .p-medium-16 {
+    @apply text-[16px] font-medium leading-[24px];
+  }
+
+  .p-medium-14 {
+    @apply text-[14px] font-medium leading-[20px];
+  }
 }

src/index.js

@@ -3,15 +3,14 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter as Router } from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <Router>
+      <App />
+    </Router>
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();