From e7b93a33b0927d354c0204f5994ebb038973ebc2 Mon Sep 17 00:00:00 2001
From: Boming Zhang <bz14520@uga.edu>
Date: Tue, 20 Feb 2024 19:22:33 -0500
Subject: [PATCH] feat: make main page card smaller

---
 src/client/index.ts             |  2 +-
 src/pages/Main/index.tsx        | 17 +++++++----------
 src/pages/MovieCreate/index.tsx |  2 +-
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/client/index.ts b/src/client/index.ts
index 92b83ac..b98f681 100644
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -593,7 +593,7 @@ export class Api<
         limit?: number
         /** search by title */
         search?: string
-        /** the moive is running or not */
+        /** the movie is running or not */
         running?: boolean
       },
       params: RequestParams = {}
diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx
index 7fbe3c7..74ce59c 100644
--- a/src/pages/Main/index.tsx
+++ b/src/pages/Main/index.tsx
@@ -15,19 +15,16 @@ const Movie: React.FC<{ movie: SchemaMovie }> = ({ movie }) => {
   const handleClose = () => setShow(false)
   const handleShow = () => setShow(true)
   return (
-    <Card style={{ width: '18rem' }} className='mb-3'>
+    <Card className='mb-3'>
       <Card.Img variant='top' src={movie.trailer_picture} />
       <Card.Body>
         <Card.Title>{movie.title}</Card.Title>
         <Card.Text>
-          <div>Director: {movie.director}</div>
-          <div>Cast: {movie.cast}</div>
-          <div>Category: {movie.category}</div>
+          <Card.Link href='#' onClick={handleShow}>
+            Watch Trailer
+          </Card.Link>
         </Card.Text>
-        <Button variant='secondary' onClick={handleShow}>
-          Watch Trailer
-        </Button>{' '}
-        <Link to={`/moive/${movie.id}/book`}>
+        <Link to={`/movie/${movie.id}/book`}>
           <Button variant='primary'>Book Movie</Button>
         </Link>
       </Card.Body>
@@ -60,7 +57,7 @@ const Movie: React.FC<{ movie: SchemaMovie }> = ({ movie }) => {
 const MovieList: React.FC<{ movies: SchemaMovie[] }> = ({ movies }) => (
   <Row>
     {movies.map(movie => (
-      <Col key={movie.id}>
+      <Col key={movie.id} xs={12} sm={6} xl={4}>
         <Movie movie={movie} />
       </Col>
     ))}
@@ -92,7 +89,7 @@ const Index: React.FC = () => {
   return (
     <PageContainer>
       <div className='text-center mb-3'>
-        <h1>All Moives</h1>
+        <h1>All movies</h1>
         <p>
           Visit backend swagger: <a href='/swagger'>here</a>
         </p>
diff --git a/src/pages/MovieCreate/index.tsx b/src/pages/MovieCreate/index.tsx
index 2bfa106..c4ace5d 100644
--- a/src/pages/MovieCreate/index.tsx
+++ b/src/pages/MovieCreate/index.tsx
@@ -22,7 +22,7 @@ const Index: React.FC = () => {
         reviews: 'reviews',
         show_time: '2016-01-02T15:04:05Z',
         synopsis: 'synopsis',
-        trailer_picture: 'https://placehold.co/600x400',
+        trailer_picture: 'https://placehold.co/400x592',
         trailer_video:
           'https://www.youtube.com/embed/NpEaa2P7qZI?si=Ev2ybUCHzVxQPIO1&amp;controls=0'
       }),