feat: update book cards layout to occupy 8 columns on desktop screens

amalv · Dec 13, 2023 · 159bceb · 159bceb
1 parent 55f5b11
commit 159bceb
Showing 1 changed file with 41 additions and 34 deletions.
diff --git a/src/components/BookList/BookList.tsx b/src/components/BookList/BookList.tsx
@@ -21,41 +21,48 @@ const BookList = () => {
 
   return (
     <Root>
-      <Grid container spacing={2} maxWidth="100%" mx="auto">
-        {data.books.map((book: Book) => (
-          <Grid item xs={12} sm={6} md={4} key={book.title}>
-            <CardWrapper>
-              <CardActionArea>
-                <Cover
-                  component="img"
-                  image={
-                    book.image || faker.image.url({ width: 150, height: 150 })
-                  }
-                  aria-label={book.title}
-                />
-                <CardContent>
-                  <Typography
-                    gutterBottom
-                    variant="h5"
-                    component="h2"
-                    align="center"
-                  >
-                    {book.title}
-                  </Typography>
-                  <Typography
-                    variant="body2"
-                    color="textSecondary"
-                    component="p"
-                    align="center"
-                  >
-                    {book.author} ({getYear(book.publicationDate)})
-                  </Typography>
-                </CardContent>
-              </CardActionArea>
-              <CircularProgressWithLabel value={book.rating} />
-            </CardWrapper>
+      <Grid container spacing={2}>
+        <Grid item xs={1} sm={1} md={2} />
+        <Grid item xs={10} sm={10} md={8}>
+          <Grid container spacing={2}>
+            {data.books.map((book: Book) => (
+              <Grid item xs={12} sm={6} md={3} key={book.title}>
+                <CardWrapper>
+                  <CardActionArea>
+                    <Cover
+                      component="img"
+                      image={
+                        book.image ||
+                        faker.image.url({ width: 150, height: 150 })
+                      }
+                      aria-label={book.title}
+                    />
+                    <CardContent>
+                      <Typography
+                        gutterBottom
+                        variant="h5"
+                        component="h2"
+                        align="center"
+                      >
+                        {book.title}
+                      </Typography>
+                      <Typography
+                        variant="body2"
+                        color="textSecondary"
+                        component="p"
+                        align="center"
+                      >
+                        {book.author} ({getYear(book.publicationDate)})
+                      </Typography>
+                    </CardContent>
+                  </CardActionArea>
+                  <CircularProgressWithLabel value={book.rating} />
+                </CardWrapper>
+              </Grid>
+            ))}
           </Grid>
-        ))}
+        </Grid>
+        <Grid item xs={1} sm={1} md={2} />
       </Grid>
     </Root>
   );