add stilization for Cast.jsx

src/components/App.jsx

@@ -4,7 +4,7 @@ import { Route, Routes } from 'react-router-dom';
 const Home = lazy(() => import('../pages/Home'));
 const Movies = lazy(() => import('../pages/Movies'));
 const MovieDetails = lazy(() => import('../pages/movieDetails/MovieDetails'));
-const Cast = lazy(() => import('../pages/Cast'));
+const Cast = lazy(() => import('../pages/cast/Cast'));
 const Reviews = lazy(() => import('../pages/Reviews'));
 const SharedLayout = lazy(() => import('./sharedLayout/SharedLayout'));
 const NotFoundPage = lazy(() => import('../pages/NotFoundPage'));

src/pages/Cast.jsx → src/pages/cast/Cast.jsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { fetchMovieCast } from '../services/api';
-import Loader from '../components/Loader';
+import { fetchMovieCast } from '../../services/api';
+import Loader from '../../components/Loader';
+import styles from './Cast.module.css';
 
 const Cast = () => {
   const { movieId } = useParams();
@@ -29,25 +30,27 @@ const Cast = () => {
   return (
     <>
       {loading ? (
-        <Loader /> // Afișează Loader cât timp se încarcă datele
+        <Loader />
       ) : (
         <>
+          <h2>Movie Cast:</h2>
           {cast.length !== 0 && (
-            <div>
-              <h2>Movie Cast</h2>
+            <div className={styles.castContainer}>
               {cast.map(actor => (
-                <div key={actor.id}>
+                <div key={actor.id} className={styles.actorContainer}>
                   <img
-                    width="200px"
-                    height="300px"
+                    className={styles.actorImage}
                     src={
                       actor.profile_path
                         ? `https://image.tmdb.org/t/p/w300${actor.profile_path}`
                         : `https://i.imgur.com/p3MsT9t.jpg`
                     }
                     alt={actor.original_name}
                   />
-                  <p>{actor.name}</p>
+                  <div className={styles.actorTextContainer}>
+                    <p>{actor.name}</p>
+                    <p>Character: {actor.character}</p>
+                  </div>
                 </div>
               ))}
             </div>

src/pages/cast/Cast.module.css

@@ -0,0 +1,23 @@
+.castContainer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.actorContainer {
+  margin: 10px;
+  text-align: center;
+}
+
+.actorImage {
+  width: 200px;
+  height: auto;
+  margin: 0 auto; 
+  display: block; 
+}
+
+.actorTextContainer {
+  text-align: center;
+  white-space: normal;
+  max-width: 200px; 
+}