refactor: Add react-markdown dependency and update Footer and Main co…

…mponents

package.json

@@ -18,7 +18,8 @@
     "@mui/material-nextjs": "^5.16.6",
     "next": "14.2.5",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1"
   },
   "devDependencies": {
     "@types/node": "^22.0.2",

src/components/DialogAboutMe.tsx

@@ -0,0 +1,48 @@
+"use client";
+import { DialogTitle, Dialog, Box, Link } from "@mui/material";
+import { useState, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+
+export interface DialogAboutMeProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function DialogAboutMe(props: DialogAboutMeProps) {
+  const [markdownContent, setMarkdownContent] = useState<string>("");
+
+  useEffect(() => {
+    const fetchMarkdown = async () => {
+      const response = await fetch(
+        "https://raw.githubusercontent.com/ItsukiKigoshi/ItsukiKigoshi/main/README.md"
+      );
+      const text = await response.text();
+      setMarkdownContent(text);
+    };
+    fetchMarkdown();
+  }, []);
+
+  const { onClose, open } = props;
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <Dialog onClose={handleClose} open={open}>
+      <DialogTitle>
+        About Me: Itsuki Kigoshi (
+        <Link
+          href="https://github.com/ItsukiKigoshi/ItsukiKigoshi/blob/main/README.md"
+          target="_blank"
+        >
+          Source
+        </Link>
+        )
+      </DialogTitle>
+      <Box component="section" sx={{ px: 4, pb: 4 }}>
+        <ReactMarkdown>{markdownContent}</ReactMarkdown>
+      </Box>
+    </Dialog>
+  );
+}

src/components/Footer.tsx

@@ -1,6 +1,5 @@
 import GitHubIcon from "@mui/icons-material/GitHub";
 import InfoIcon from "@mui/icons-material/Info";
-import AutoStoriesIcon from "@mui/icons-material/AutoStories";
 import CottageIcon from "@mui/icons-material/Cottage";
 import { Button, ButtonGroup, Paper, Stack } from "@mui/material";
 
@@ -25,22 +24,13 @@ export default function Footer() {
     ));
   };
 
-  const row_1 = mapButtons([
+  const button_group = mapButtons([
     {
       title: "Home",
       url: "/",
       inNewTab: false,
       icon: <CottageIcon />,
     },
-    {
-      title: "About Me",
-      url: "https://github.com/ItsukiKigoshi/ItsukiKigoshi/blob/main/README.md",
-      inNewTab: true,
-      icon: <AutoStoriesIcon />,
-    },
-  ]);
-
-  const row_2 = mapButtons([
     {
       title: "特定商取引法に基づく表記",
       url: "/salespolicy",
@@ -68,8 +58,7 @@ export default function Footer() {
       elevation={0}
     >
       <Stack spacing={1} alignItems="center">
-        {<ButtonGroup>{row_1}</ButtonGroup>}
-        {<ButtonGroup>{row_2}</ButtonGroup>}
+        {<ButtonGroup>{button_group}</ButtonGroup>}
       </Stack>
     </Paper>
   );

src/components/Main.tsx

@@ -1,21 +1,31 @@
+"use client";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import InstagramIcon from "@mui/icons-material/Instagram";
 import LinkedInIcon from "@mui/icons-material/LinkedIn";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import TipsAndUpdatesIcon from "@mui/icons-material/TipsAndUpdates";
 import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
   Avatar,
   Box,
   Button,
   IconButton,
-  Link,
   Stack,
   Typography,
 } from "@mui/material";
 
+import DialogAboutMe from "@/components/DialogAboutMe";
+import { useState } from "react";
+
 export default function Main() {
+  const [open, setOpen] = useState(false);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
   const links = [
     {
       name: "GitHub",
@@ -67,6 +77,14 @@ export default function Main() {
         <Typography>{`ICU '27 (2004)`}</Typography>
       </Stack>
       <Stack spacing={1}>
+        <Button
+          startIcon={<TipsAndUpdatesIcon />}
+          variant="outlined"
+          onClick={handleClickOpen}
+        >
+          About Me
+        </Button>
+        <DialogAboutMe open={open} onClose={handleClose} />
         <Button
           startIcon={<LinkedInIcon />}
           variant="contained"
@@ -78,16 +96,6 @@ export default function Main() {
         <Stack sx={{ justifyContent: "center" }} direction="row" spacing={2}>
           {linkButtons}
         </Stack>
-        {/* <Accordion>
-          <AccordionSummary
-            expandIcon={<ExpandMoreIcon />}
-            aria-controls="panel1-content"
-            id="panel1-header"
-          >
-            About Me
-          </AccordionSummary>
-          <AccordionDetails></AccordionDetails>
-        </Accordion> */}
       </Stack>
     </Box>
   );