Refactor code structure and update dependencies, colour

src/app/page.tsx

@@ -1,78 +1,27 @@
-import * as React from "react";
-import IconButton from "@mui/material/Button";
-import TwitterIcon from "@mui/icons-material/Twitter";
-import InstagramIcon from "@mui/icons-material/Instagram";
-import GitHubIcon from "@mui/icons-material/GitHub";
-import LinkedInIcon from "@mui/icons-material/LinkedIn";
-import { Typography, Box, Stack, Avatar } from "@mui/material";
-import Footer from "../../components/Footer";
+"use client";
+import Footer from "@/components/Footer";
+import Main from "@/components/Main";
+import { Box, ThemeProvider, createTheme } from "@mui/material";
+import { orange } from "@mui/material/colors";
 
 export default function App() {
-  const links = [
-    {
-      name: "Instagram",
-      Icon: InstagramIcon,
-      href: "https://www.instagram.com/itsukikigoshi",
+  const theme = createTheme({
+    palette: {
+      primary: orange,
     },
-    {
-      name: "X(formally Twitter)",
-      Icon: TwitterIcon,
-      href: "https://www.twitter.com/itsukikigoshi",
-    },
-    {
-      name: "GitHub",
-      Icon: GitHubIcon,
-      href: "https://www.github.com/itsukikigoshi",
-    },
-    {
-      name: "LinkedIn",
-      Icon: LinkedInIcon,
-      href: "https://www.linkedin.com/in/itsukikigoshi",
-    },
-  ];
-
-  const linkButtons = links.map(
-    (
-      link // This is a map function. It is used to create a list of elements.
-    ) => (
-      <IconButton
-        key={link.name} // This is a unique key for each element. It is used to identify each element.
-        href={link.href}
-        target="_blank"
-        color="primary"
-        aria-label={link.name}
-      >
-        <link.Icon />
-      </IconButton>
-    )
-  );
-
+  });
   return (
-    <Box
-      sx={{
-        display: "grid",
-        placeItems: "center", // Center the content horizontally and vertically
-        minHeight: "100vh", // Set a minimum height to fill the entire viewport
-      }}
-    >
+    <ThemeProvider theme={theme}>
       <Box
         sx={{
           display: "grid",
           placeItems: "center", // Center the content horizontally and vertically
+          minHeight: "100vh", // Set a minimum height to fill the entire viewport
         }}
       >
-        <Avatar
-          alt={`Itsuki Kigoshi's Profile Picture`}
-          src={`/profile.jpg`}
-          sx={{ width: 200, height: 200 }}
-        />
-        <Typography sx={{ fontSize: 28, mt: 2 }}>Itsuki KIGOSHI</Typography>
-        <Typography sx={{ m: 2 }}>{`ICU '27 (2004)`}</Typography>
-        <Stack direction="row" spacing={1} alignItems="flex-end">
-          {linkButtons}
-        </Stack>
+        <Main />
+        <Footer />
       </Box>
-      <Footer></Footer>
-    </Box>
+    </ThemeProvider>
   );
 }

src/components/Footer.tsx

@@ -0,0 +1,52 @@
+import GitHubIcon from "@mui/icons-material/GitHub";
+import InfoIcon from "@mui/icons-material/Info";
+import SendIcon from "@mui/icons-material/Send";
+import { Button, ButtonGroup, Stack } from "@mui/material";
+
+export default function Footer() {
+  const row_1 = [
+    {
+      title: "Hire Me",
+      url: "http://www.ansin-teacher.net/data/teacher59096.html",
+      icon: <SendIcon />,
+    },
+    {
+      title: "Source",
+      url: "https://github.com/ItsukiKigoshi/itsukikigoshi.github.io",
+      icon: <GitHubIcon />,
+    },
+  ].map((item) => (
+    <Button
+      key={item.title}
+      href={item.url}
+      target="_blank"
+      startIcon={item.icon}
+    >
+      {item.title}
+    </Button>
+  ));
+
+  const row_2 = [
+    {
+      title: "特定商取引法に基づく表記",
+      url: "/salespolicy",
+      icon: <InfoIcon />,
+    },
+  ].map((item) => (
+    <Button
+      variant="outlined"
+      key={item.title}
+      href={item.url}
+      startIcon={item.icon}
+    >
+      {item.title}
+    </Button>
+  ));
+
+  return (
+    <Stack useFlexGap spacing={1}>
+      {<ButtonGroup aria-label="button group">{row_1}</ButtonGroup>}
+      {row_2}
+    </Stack>
+  );
+}

src/components/Main.tsx

@@ -0,0 +1,65 @@
+import GitHubIcon from "@mui/icons-material/GitHub";
+import InstagramIcon from "@mui/icons-material/Instagram";
+import LinkedInIcon from "@mui/icons-material/LinkedIn";
+import TwitterIcon from "@mui/icons-material/Twitter";
+import { Avatar, Box, IconButton, Stack, Typography } from "@mui/material";
+
+export default function Main() {
+  const links = [
+    {
+      name: "Instagram",
+      Icon: InstagramIcon,
+      href: "https://www.instagram.com/itsukikigoshi",
+    },
+    {
+      name: "X(formally Twitter)",
+      Icon: TwitterIcon,
+      href: "https://www.twitter.com/itsukikigoshi",
+    },
+    {
+      name: "GitHub",
+      Icon: GitHubIcon,
+      href: "https://www.github.com/itsukikigoshi",
+    },
+    {
+      name: "LinkedIn",
+      Icon: LinkedInIcon,
+      href: "https://www.linkedin.com/in/itsukikigoshi",
+    },
+  ];
+
+  const linkButtons = links.map(
+    (
+      link // This is a map function. It is used to create a list of elements.
+    ) => (
+      <IconButton
+        key={link.name} // This is a unique key for each element. It is used to identify each element.
+        href={link.href}
+        target="_blank"
+        color="primary"
+        aria-label={link.name}
+      >
+        <link.Icon />
+      </IconButton>
+    )
+  );
+  return (
+    <Box
+      sx={{
+        display: "grid",
+        placeItems: "center", // Center the content horizontally and vertically
+      }}
+    >
+      <Avatar
+        alt={`Itsuki Kigoshi's Profile Picture`}
+        src={`/profile.jpg`}
+        sx={{ width: 200, height: 200 }}
+      />
+      <Typography sx={{ fontSize: 28, mt: 2 }}>Itsuki KIGOSHI</Typography>
+      <Typography sx={{ m: 2 }}>{`ICU '27 (2004)`}</Typography>
+      <Stack direction="row" spacing={2} alignItems="flex-end">
+        {linkButtons}
+      </Stack>
+    </Box>
+  );
+}