src/App.css

@@ -15,6 +15,8 @@ body {
 
 .header img {
   width: 200px;
+  height: 200px;
+  margin: auto;
   animation: fadeIn 2s ease-in-out;
 }
 
@@ -23,6 +25,7 @@ body {
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
+  cursor: pointer;
 }
 
 .character-card {
@@ -89,7 +92,8 @@ body {
 }
 
 @keyframes pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 0.8;
   }
   50% {

src/App.jsx

@@ -5,6 +5,7 @@ import About from "./pages/About";
 import Contact from "./pages/Contact";
 import Layout from "./components/layout/Layout";
 import Error from "./components/Error";
+import CharacterDetails from "./components/CharacterDetails";
 function App() {
   const router = createBrowserRouter([
     {
@@ -24,6 +25,11 @@ function App() {
           path: "/",
           element: <Home />,
         },
+        {
+          path: "/characterDetails/:id",
+
+          element: <CharacterDetails />,
+        },
       ],
     },
   ]);

src/components/CharacterCard.jsx

@@ -1,26 +1,27 @@
 import React from "react";
 import "../App.css";
+import { Link } from "react-router-dom";
 
 const CharacterCard = (props) => {
   return (
     <ul className="character-container">
-      {props.data.map((character, index) => (
-        <li className="character-card" key={index}>
-          <img
-            src={`https://starwars-visualguide.com/assets/img/characters/${index +
-              1}.jpg`}
-            alt={character.name}
-            className="character-image"
-          />
-          <div className="character-details">
-            <p>Name: {character.name}</p>
-            <p>Height: {character.height} cm</p>
-            <p>Mass: {character.mass} kg</p>
-            <p>Hair Color: {character.hair_color}</p>
-            <p>Birth Year: {character.birth_year}</p>
-          </div>
-        </li>
-      ))}
+      {props.data.map((character, index) => {
+        // Extract ID from character's URL
+        const id = character.url.split("/").filter(Boolean).pop();
+        return (
+          <li className="character-card" key={index}>
+            <Link to={`/characterDetails/${id}`}>
+              <div className="character-details">
+                <p>Name: {character.name}</p>
+                <p>Gender: {character.gender}</p>
+                <p>Height: {character.height} cm</p>
+                <p>Hair Color: {character.hair_color}</p>
+                <p>Birth Year: {character.birth_year}</p>
+              </div>
+            </Link>
+          </li>
+        );
+      })}
     </ul>
   );
 };

src/components/CharacterDetails.jsx

@@ -0,0 +1,61 @@
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router";
+const CharacterDetails = () => {
+  const { id } = useParams();
+  console.log(id);
+  const [character, setCharacter] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    axios
+      .get(`https://swapi.py4e.com/api/people/${id}/`)
+      .then((res) => {
+        setCharacter(res.data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
+
+  if (loading) {
+    return <p> loading...</p>;
+  }
+
+  if (!character) {
+    return <p> Character Details not found!</p>;
+  }
+
+  return (
+    <div className="character-detail-page">
+      <p>{character.name}</p>
+      <p>
+        <strong>Gender: </strong>
+        {character.gender}
+      </p>
+      <p>
+        <strong>Home World: </strong>
+        {character.homeworld}
+      </p>
+      <p>
+        <strong>Species: </strong> {character.species}
+      </p>
+      <p>
+        <strong>Films: </strong> {character.films}
+      </p>
+      <p>
+        <strong>Height: </strong> {character.height} cm
+      </p>
+      <p>
+        <strong>Hair Color: </strong> {character.hair_color}
+      </p>
+      <p>
+        <strong>Birth Year: </strong> {character.birth_year}
+      </p>
+    </div>
+  );
+};
+
+export default CharacterDetails;