roomのdaisyUI移行？

Author: KaichiManabe

web/components/chat/Room.tsx

@@ -1,4 +1,3 @@
-import { ListItem, Stack, Typography } from "@mui/material";
 import type { DMOverview } from "~/common/types";
 import UserAvatar from "../human/avatar";
 
@@ -9,28 +8,14 @@ type Props = {
 export function Room(props: Props) {
   const { room } = props;
   return (
-    <>
-      <ListItem
-        sx={{
-          border: "1px solid gray",
-          borderRadius: 1,
-          cursor: "pointer",
-          "&:hover": {
-            background: "gainsboro",
-          },
-        }}
-      >
-        <Stack
-          direction={"row"}
-          spacing={2}
-          alignItems="center"
-          textAlign={"center"}
-        >
-          <UserAvatar pictureUrl={room.thumbnail} width="50px" height="50px" />
-          <Typography variant="body2">{room.name}</Typography>
-          <Typography variant="subtitle1">{room.lastMsg?.content}</Typography>
-        </Stack>
-      </ListItem>
-    </>
+    <div className="cursor-pointer rounded-md border border-gray-300 p-3 hover:bg-gray-200">
+      <div className="flex items-center space-x-4">
+        <UserAvatar pictureUrl={room.thumbnail} width="50px" height="50px" />
+        <div className="text-center">
+          <p className="font-medium text-sm">{room.name}</p>
+          <p className="text-gray-500 text-xs">{room.lastMsg?.content}</p>
+        </div>
+      </div>
+    </div>
   );
 }