リクエストタブのdaisyUI移行を完了

Author: KaichiManabe

web/components/match/myRequests.tsx

@@ -1,5 +1,3 @@
-import { Box } from "@mui/material";
-import { List } from "@mui/material";
 import * as request from "~/api/request";
 import { usePendingFromMe } from "~/api/user";
 import FullScreenCircularProgress from "../common/FullScreenCircularProgress";
@@ -11,36 +9,36 @@ export default function MyReq() {
   const { openModal } = useModal();
 
   return (
-    <Box>
-      <p
-        style={{
-          marginLeft: "40px",
-        }}
-      >
+    <div className="p-4">
+      <p className="ml-10 text-lg">
         {state.data && state.data.length > 0
           ? "以下のリクエストを送信しました！"
           : "リクエストを送信しましょう！"}
       </p>
       {state.current === "loading" ? (
         <FullScreenCircularProgress />
       ) : state.error ? (
-        <p>Error: {state.error.message}</p>
+        <p className="text-red-500">Error: {state.error.message}</p>
       ) : (
-        <List>
+        <ul className="mt-4 space-y-4">
           {state.data?.map((receivingUser) => (
-            <HumanListItem
+            <li
               key={receivingUser.id}
-              id={receivingUser.id}
-              name={receivingUser.name}
-              pictureUrl={receivingUser.pictureUrl}
-              onOpen={() => openModal(receivingUser)}
-              onCancel={(id) => {
-                request.cancel(id).then(reload);
-              }}
-            />
+              className="rounded-lg bg-base-100 p-4 shadow"
+            >
+              <HumanListItem
+                id={receivingUser.id}
+                name={receivingUser.name}
+                pictureUrl={receivingUser.pictureUrl}
+                onOpen={() => openModal(receivingUser)}
+                onCancel={(id) => {
+                  request.cancel(id).then(reload);
+                }}
+              />
+            </li>
           ))}
-        </List>
+        </ul>
       )}
-    </Box>
+    </div>
   );
 }

web/components/match/othersRequests.tsx

@@ -1,4 +1,3 @@
-import { Box, List } from "@mui/material";
 import request from "~/api/request";
 import { usePendingToMe } from "~/api/user";
 import FullScreenCircularProgress from "../common/FullScreenCircularProgress";
@@ -14,35 +13,35 @@ export default function OthersReq() {
   const { openModal } = useModal();
 
   return (
-    <Box>
-      <p
-        style={{
-          marginLeft: "40px",
-        }}
-      >
+    <div className="p-4">
+      <p className="ml-10 text-lg">
         {data && data.length > 0
           ? "以下のリクエストを受け取りました！"
           : "リクエストは受け取っていません。"}
       </p>
       {loading ? (
         <FullScreenCircularProgress />
       ) : error ? (
-        <p>Error: {error.message}</p>
+        <p className="text-red-500">Error: {error.message}</p>
       ) : (
-        <List>
+        <ul className="mt-4 space-y-4">
           {data?.map((sendingUser) => (
-            <HumanListItem
+            <li
               key={sendingUser.id}
-              id={sendingUser.id}
-              name={sendingUser.name}
-              pictureUrl={sendingUser.pictureUrl}
-              onOpen={() => openModal(sendingUser)}
-              onAccept={() => request.accept(sendingUser.id).then(reload)}
-              onReject={() => request.reject(sendingUser.id).then(reload)}
-            />
+              className="rounded-lg bg-base-100 p-4 shadow"
+            >
+              <HumanListItem
+                id={sendingUser.id}
+                name={sendingUser.name}
+                pictureUrl={sendingUser.pictureUrl}
+                onOpen={() => openModal(sendingUser)}
+                onAccept={() => request.accept(sendingUser.id).then(reload)}
+                onReject={() => request.reject(sendingUser.id).then(reload)}
+              />
+            </li>
           ))}
-        </List>
+        </ul>
       )}
-    </Box>
+    </div>
   );
 }