Merge pull request #98 from nitfc-festival-system-team/83-フッターを作る

feat: フッターを作る

src/components/Footer.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { useRouter } from "next/router";
+
+import { LinkedText } from "./LinkedText";
+import "@/styles/gamingColor.css";
+
+export const Footer = () => {
+  const router = useRouter();
+  return (
+    <footer>
+      <div
+        style={{
+          backgroundColor: "#20e0e0",
+          width: "100vw",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: "10px",
+          fontSize: "1.4vw",
+          marginTop: "5vw",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            gap: "5vw",
+            fontSize: "2vw",
+          }}
+        >
+          <LinkedText text={"企画"} link={"contents/schedule"} />
+          <LinkedText text={"露店"} link={"contents/stand"} />
+        </div>
+        <img
+          src={"image/nitfc.png"}
+          alt={"nitfc_logo"}
+          width={"20%"}
+          style={{ cursor: "pointer" }}
+          onClick={() => {
+            router.push("https://www.fukui-nct.ac.jp/");
+          }}
+        />
+        {/* <LinkedText text={"福井高専"} link={"https://www.fukui-nct.ac.jp/"} /> */}
+        <LinkedText
+          text={"お問い合わせ"}
+          link={"https://www.fukui-nct.ac.jp/"}
+        />
+        <div style={{ animation: "rainbow 1s infinite" }}>
+          <LinkedText
+            text={"福井高専祭システム班メンバー募集中!!"}
+            link={"https://github.com/nitfc-festival-system-team"}
+          />
+        </div>
+        <LinkedText
+          text={"GitHub"}
+          link={"https://github.com/nitfc-festival-system-team/2023hp"}
+        />
+        <br />
+      </div>
+    </footer>
+  );
+};

src/components/LinkedText.tsx

@@ -0,0 +1,13 @@
+export const LinkedText = (props: { text: string; link: string }) => {
+  return (
+    <a
+      href={props.link}
+      style={{
+        textDecoration: "none",
+        fontWeight: "bold",
+      }}
+    >
+      {props.text}
+    </a>
+  );
+};

src/components/Schedule.tsx

@@ -1,3 +1,4 @@
+"use client";
 import Timeline from "react-calendar-timeline";
 import "react-calendar-timeline/lib/Timeline.css";
 import moment from "moment";

src/pages/index.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 import { EventHeader } from "@/components/EventOverlay";
 import { Title } from "@/components/Title";
 import { OpenDate } from "@/components/OpenDate";
@@ -7,9 +9,8 @@ import { Map } from "@/components/Map";
 import { Notice } from "@/components/Notice";
 import { Sidebar } from "@/components/VerticalLine";
 import { BackGroundImg } from "@/components/BackGround";
-
-import React from "react";
 import { FadeAnimationProvider } from "@/components/FadeAnimationProvider";
+import { Footer } from "@/components/Footer";
 
 export default function Page() {
   return (
@@ -57,6 +58,7 @@ export default function Page() {
             <Map />
           </div>
         </FadeAnimationProvider>
+        <Footer />
       </div>
     </>
   );

src/styles/gamingColor.css

@@ -0,0 +1,10 @@
+@keyframes rainbow {
+  12% { color: #ff5353; }
+  24% { color: #ffcf53; }
+  36% { color: #e8ff53; }
+  48% { color: #53ff5d; }
+  60% { color: #53ffbc; }
+  72% { color: #5393ff; }
+  84% { color: #ca53ff; }
+  100% { color: #ff53bd; }
+}