Update footer component and fix import in page

component

components/footer.tsx

@@ -1,29 +1,53 @@
-import { Box, Button, ButtonGroup, Typography } from "@mui/material";
+import { Box, Button, ButtonGroup, Stack, Typography } from "@mui/material";
 import * as React from "react";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import SendIcon from "@mui/icons-material/Send";
 import InfoIcon from "@mui/icons-material/Info";
 
 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 (
-    <Box>
-      <ButtonGroup variant="outlined" aria-label="outlined button group">
-        <Button
-          href="https://github.com/ItsukiKigoshi/itsukikigoshi.github.io"
-          target="_blank"
-          startIcon={<GitHubIcon />}
-        >
-          Source
-        </Button>
-        <Button
-          href="http://www.ansin-teacher.net/data/teacher59096.html"
-          target="_blank"
-          startIcon={<SendIcon />}
-        >
-          Hire Me
-        </Button>
-        <Button href="/salespolicy">特定商取引法に基づく表記</Button>
-      </ButtonGroup>
-    </Box>
+    <Stack useFlexGap spacing={1}>
+      {<ButtonGroup aria-label="button group">{row_1}</ButtonGroup>}
+      {row_2}
+    </Stack>
   );
 }

src/app/page.tsx

@@ -5,7 +5,7 @@ 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, Button } from "@mui/material";
-import Footer from "../../components/footer";
+import Footer from "../../components/Footer";
 
 export default function App() {
   const links = [