refactor(web): migrate to MUI Grid v2 (#679)

sugar-cat7 · Feb 6, 2025 · ad6b450 · ad6b450
1 parent 62d6458
commit ad6b450
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 13 deletions.
diff --git a/service/vspo-schedule/web/src/components/Templates/ClipList.tsx b/service/vspo-schedule/web/src/components/Templates/ClipList.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Grid, Box, Pagination } from "@mui/material";
+import { Box, Grid2 as Grid, Pagination } from "@mui/material";
 import { Clip } from "@/types/streaming";
 import { ClipCard } from "../Elements";
 
@@ -22,9 +22,9 @@ export const ClipList: React.FC<Props> = ({ clips }) => {
 
   return (
     <>
-      <Grid container spacing={3}>
+      <Grid container spacing={3} sx={{ width: "100%" }}>
         {paginatedClips.map((clip) => (
-          <Grid item xs={12} sm={6} md={4} key={clip.id}>
+          <Grid size={{ xs: 12, sm: 6, md: 4 }} key={clip.id}>
             <ClipCard clip={clip} />
           </Grid>
         ))}

diff --git a/service/vspo-schedule/web/src/components/Templates/Livestreams.tsx b/service/vspo-schedule/web/src/components/Templates/Livestreams.tsx
@@ -5,7 +5,7 @@ import {
   AccordionSummary,
   Avatar,
   Box,
-  Grid,
+  Grid2 as Grid,
   Typography,
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
@@ -223,14 +223,10 @@ export const LivestreamCards: React.FC<Props> = ({
                     }}
                   >
                     <TimeRangeLabel variant="h6">{label}</TimeRangeLabel>
-                    <Grid container spacing={2}>
+                    <Grid container spacing={2} sx={{ width: "100%" }}>
                       {livestreams.map((livestream) => (
                         <Grid
-                          item
-                          xs={6}
-                          sm={6}
-                          md={3}
-                          lg={3}
+                          size={{ xs: 6, sm: 6, md: 3, lg: 3 }}
                           key={livestream.id}
                         >
                           <LivestreamCard

diff --git a/service/vspo-schedule/web/src/pages/freechat.tsx b/service/vspo-schedule/web/src/pages/freechat.tsx
@@ -5,7 +5,7 @@ import { GetStaticProps } from "next";
 import React from "react";
 import { NextPageWithLayout } from "./_app";
 import { Livestream } from "@/types/streaming";
-import { Grid } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 import { members } from "@/data/members";
 import { fetchFreechats } from "@/lib/api";
 import { DEFAULT_LOCALE } from "@/lib/Const";
@@ -23,9 +23,9 @@ type FreechatsProps = {
 
 const FreechatPage: NextPageWithLayout<FreechatsProps> = ({ freechats }) => {
   return (
-    <Grid container spacing={3}>
+    <Grid container spacing={3} sx={{ width: "100%" }}>
       {freechats.map((freechat) => (
-        <Grid item xs={6} md={3} key={freechat.id}>
+        <Grid size={{ xs: 6, md: 3 }} key={freechat.id}>
           <LivestreamCard livestream={freechat} isFreechat={true} />
         </Grid>
       ))}