Merge pull request #97 from debatecore/23-create-a-debatecore-footer

[23] Create debateco.re footer
debatecore · Jul 16, 2024 · 45fe2c2 · 45fe2c2
2 parents beb559b + 0161c22
commit 45fe2c2
Show file tree

Hide file tree

Showing 6 changed files with 216 additions and 145 deletions.
diff --git a/src/app/debate-motion-generator/page.tsx b/src/app/debate-motion-generator/page.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { DebatecoreFooter } from "@/components/DebatecoreFooter";
 import { MotionGenerator } from "@/components/MotionGenerator";
 import { useLang } from "@/lib/useLang";
 
@@ -14,6 +15,8 @@ export default function DebateMotionGenerator() {
       <div className="flex flex-col md:flex-row justify-center flex-wrap items-center gap-2 mt-4">
         <MotionGenerator />
       </div>
+      <div className="mt-auto" />
+      <DebatecoreFooter />
     </div>
   );
 }
diff --git a/src/app/oxford-debate/setup/page.tsx b/src/app/oxford-debate/setup/page.tsx
@@ -19,6 +19,7 @@ import {
   soundPacks,
 } from "@/types/soundPack";
 import { convertImageToBase64 } from "@/lib/imageToBase64";
+import { DebatecoreFooter } from "@/components/DebatecoreFooter";
 
 export default function OxfordDebateSetup() {
   const debateContext = useContext(DebateContext);
@@ -70,137 +71,144 @@ export default function OxfordDebateSetup() {
   });
 
   return (
-    <div className="mb-5 lg:mb-0">
-      <h1 className="text-3xl mt-8 text-center font-serif">
-        {useLang("oxfordDebateConfiguration")}
-      </h1>
-      <p className="text-center text-neutral-500">
-        {debateContext.conf.motion || flavorText}
-      </p>
-      <div className="max-w-2xl mx-auto mt-8 flex flex-col gap-6 lg:gap-4 px-4">
-        <DebateConfStringsPanel />
-        <hr className="border-b-2 rounded border-neutral-800 my-2" />
-        <GenericSelect
-          id="clockimageselect"
-          text={clockImageSelect}
-          value={getDisplayNameOfClockImage(debateContext.conf.clockImageName)}
-          options={displayImageTypeArray.map((element) => {
-            return {
-              value: getDisplayNameOfClockImage(element),
-              exec: () => setClockImage(element),
-            };
-          })}
-        />
-        <input
-          type="file"
-          id="clockImage"
-          name="clockImage"
-          accept=".jpg, .jpeg, .png"
-          onChange={handleImageChange}
-          hidden={!customClockImageSelected}
-        />
-        <GenericSelect
-          id="soundpackselect"
-          text={soundPackSelect}
-          value={
-            debateContext.conf.soundPack.name === "default"
-              ? soundPackDefault
-              : debateContext.conf.soundPack.name
-          }
-          options={soundPackNamesArray.map((element: soundPackName) => {
-            return {
-              value: element === "default" ? soundPackDefault : element,
-              exec: () => {
-                const soundPack =
-                  soundPacks.find((soundPack) => {
-                    return soundPack.name == element;
-                  }) || defaultSoundPack;
+    <div className="min-h-screen w-full flex flex-col">
+      <div className="mb-5 lg:mb-0">
+        <h1 className="text-3xl mt-8 text-center font-serif">
+          {useLang("oxfordDebateConfiguration")}
+        </h1>
+        <p className="text-center text-neutral-500">
+          {debateContext.conf.motion || flavorText}
+        </p>
+        <div className="max-w-2xl mx-auto mt-8 flex flex-col gap-6 lg:gap-4 px-4">
+          <DebateConfStringsPanel />
+          <hr className="border-b-2 rounded border-neutral-800 my-2" />
+          <GenericSelect
+            id="clockimageselect"
+            text={clockImageSelect}
+            value={getDisplayNameOfClockImage(
+              debateContext.conf.clockImageName
+            )}
+            options={displayImageTypeArray.map((element) => {
+              return {
+                value: getDisplayNameOfClockImage(element),
+                exec: () => setClockImage(element),
+              };
+            })}
+          />
+          <input
+            type="file"
+            id="clockImage"
+            name="clockImage"
+            accept=".jpg, .jpeg, .png"
+            onChange={handleImageChange}
+            hidden={!customClockImageSelected}
+          />
+          <GenericSelect
+            id="soundpackselect"
+            text={soundPackSelect}
+            value={
+              debateContext.conf.soundPack.name === "default"
+                ? soundPackDefault
+                : debateContext.conf.soundPack.name
+            }
+            options={soundPackNamesArray.map((element: soundPackName) => {
+              return {
+                value: element === "default" ? soundPackDefault : element,
+                exec: () => {
+                  const soundPack =
+                    soundPacks.find((soundPack) => {
+                      return soundPack.name == element;
+                    }) || defaultSoundPack;
+                  debateContext.setConf({
+                    ...debateContext.conf,
+                    soundPack: soundPack,
+                  });
+                },
+              };
+            })}
+          />
+          <div className="flex flex-col lg:flex-row justify-between items-center">
+            <p className="mb-2 lg:mb-0">{useLang("speechTime")}</p>
+            <TimeInput
+              time={debateContext.conf.speechTime}
+              setTime={(time: number) => {
+                debateContext.setConf({
+                  ...debateContext.conf,
+                  speechTime: time,
+                });
+              }}
+            />
+          </div>
+          <div className="flex flex-col lg:flex-row justify-between items-center">
+            <p className="mb-2 lg:mb-0">{useLang("protectedTime")}</p>
+            <TimeInput
+              time={debateContext.conf.endProtectedTime}
+              setTime={(time: number) => {
+                debateContext.setConf({
+                  ...debateContext.conf,
+                  endProtectedTime: time,
+                });
+              }}
+            />
+          </div>
+          <div className="flex flex-col lg:flex-row justify-between items-center">
+            <p className="mb-2 lg:mb-0">{useLang("adVocemTime")}</p>
+            <TimeInput
+              time={debateContext.conf.adVocemTime}
+              setTime={(time: number) => {
                 debateContext.setConf({
                   ...debateContext.conf,
-                  soundPack: soundPack,
+                  adVocemTime: time,
                 });
-              },
-            };
-          })}
-        />
-        <div className="flex flex-col lg:flex-row justify-between items-center">
-          <p className="mb-2 lg:mb-0">{useLang("speechTime")}</p>
-          <TimeInput
-            time={debateContext.conf.speechTime}
-            setTime={(time: number) => {
+              }}
+            />
+          </div>
+          <GenericButton
+            text={useLang("beepOnSpeechEnd")}
+            icon={debateContext.conf.beepOnSpeechEnd ? IconCheck : IconX}
+            onClick={() => {
               debateContext.setConf({
                 ...debateContext.conf,
-                speechTime: time,
+                beepOnSpeechEnd: !debateContext.conf.beepOnSpeechEnd,
               });
             }}
           />
-        </div>
-        <div className="flex flex-col lg:flex-row justify-between items-center">
-          <p className="mb-2 lg:mb-0">{useLang("protectedTime")}</p>
-          <TimeInput
-            time={debateContext.conf.endProtectedTime}
-            setTime={(time: number) => {
+          <GenericButton
+            text={useLang("beepOnProtected")}
+            icon={debateContext.conf.beepProtectedTime ? IconCheck : IconX}
+            onClick={() => {
               debateContext.setConf({
                 ...debateContext.conf,
-                endProtectedTime: time,
+                beepProtectedTime: !debateContext.conf.beepProtectedTime,
               });
             }}
           />
-        </div>
-        <div className="flex flex-col lg:flex-row justify-between items-center">
-          <p className="mb-2 lg:mb-0">{useLang("adVocemTime")}</p>
-          <TimeInput
-            time={debateContext.conf.adVocemTime}
-            setTime={(time: number) => {
+          <GenericButton
+            text={useLang("protectSpeechStart")}
+            icon={debateContext.conf.startProtectedTime ? IconCheck : IconX}
+            onClick={() => {
               debateContext.setConf({
                 ...debateContext.conf,
-                adVocemTime: time,
+                startProtectedTime:
+                  debateContext.conf.startProtectedTime === 0
+                    ? debateContext.conf.endProtectedTime
+                    : 0,
               });
             }}
           />
+          <hr className="border-b-2 rounded border-neutral-800 my-2" />
+          <div className="flex flex-row flex-wrap justify-center gap-2">
+            <LinkButton href="/" text={useLang("mainMenu")} icon={IconList} />
+            <LinkButton
+              href="/oxford-debate"
+              text={useLang("startDebate")}
+              icon={IconPlayCircle}
+            />
+          </div>
         </div>
-        <GenericButton
-          text={useLang("beepOnSpeechEnd")}
-          icon={debateContext.conf.beepOnSpeechEnd ? IconCheck : IconX}
-          onClick={() => {
-            debateContext.setConf({
-              ...debateContext.conf,
-              beepOnSpeechEnd: !debateContext.conf.beepOnSpeechEnd,
-            });
-          }}
-        />
-        <GenericButton
-          text={useLang("beepOnProtected")}
-          icon={debateContext.conf.beepProtectedTime ? IconCheck : IconX}
-          onClick={() => {
-            debateContext.setConf({
-              ...debateContext.conf,
-              beepProtectedTime: !debateContext.conf.beepProtectedTime,
-            });
-          }}
-        />
-        <GenericButton
-          text={useLang("protectSpeechStart")}
-          icon={debateContext.conf.startProtectedTime ? IconCheck : IconX}
-          onClick={() => {
-            debateContext.setConf({
-              ...debateContext.conf,
-              startProtectedTime:
-                debateContext.conf.startProtectedTime === 0
-                  ? debateContext.conf.endProtectedTime
-                  : 0,
-            });
-          }}
-        />
-        <hr className="border-b-2 rounded border-neutral-800 my-2" />
-        <div className="flex flex-row flex-wrap justify-center gap-2">
-          <LinkButton href="/" text={useLang("mainMenu")} icon={IconList} />
-          <LinkButton
-            href="/oxford-debate"
-            text={useLang("startDebate")}
-            icon={IconPlayCircle}
-          />
-        </div>
+      </div>
+      <div className="mt-auto text-center">
+        <DebatecoreFooter />
       </div>
     </div>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { DebatecoreFooter } from "@/components/DebatecoreFooter";
 import { LangSwitchComponent } from "@/components/LangSwitch";
 import { LinkButton, LinkButtonProps } from "@/components/LinkButton";
 import { IconBell } from "@/components/icons/Bell";
@@ -49,28 +50,8 @@ export default function Home() {
           })}
         </div>
       </div>
-      <div className="hidden lg:block max-w-7xl mx-auto mt-auto text-neutral-700 text-center p-2">
-        <p className="text-balance">
-          {useLang("disclaimer")}
-          {` ${useLang("licenseDisclaimer_before")} `}
-          <a
-            className="underline"
-            href="https://github.com/debatecore/debate-tools/blob/master/LICENSE"
-          >
-            {"AGPLv3"}
-          </a>
-          {`.`}
-          {` ${useLang("sourcecodeDisclaimer_before")} `}
-          <a
-            className="underline"
-            href="https://github.com/debatecore/debate-tools"
-          >
-            {"Github"}
-          </a>
-          {`.`}
-          {" © 2023-2024 Jakub Mańczak & Mateusz Dobrzyński"}
-        </p>
-      </div>
+      <div className="mt-auto" />
+      <DebatecoreFooter />
     </div>
   );
 }
diff --git a/src/app/sound-demonstration/page.tsx b/src/app/sound-demonstration/page.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { DebatecoreFooter } from "@/components/DebatecoreFooter";
 import { SoundPlayerButton } from "@/components/SoundPlayer";
 import { IconAlertCircle } from "@/components/icons/AlertCircle";
 import { IconBell } from "@/components/icons/Bell";
@@ -80,7 +81,9 @@ export default function SoundTestPage() {
           )}
         </div>
       </div>
-      <p className="text-neutral-600 px-2 p-2 text-justify sm:text-balance sm:text-center mt-auto mx-auto max-w-7xl">
+      <div className="mt-auto" />
+      <DebatecoreFooter />
+      <p className="text-neutral-700 px-2 pb-2 text-justify sm:text-balance sm:text-center mx-auto max-w-7xl">
         {useLang("soundDemonstrationDisclaimer")}
       </p>
     </div>

diff --git a/src/components/DebatecoreFooter.tsx b/src/components/DebatecoreFooter.tsx
@@ -0,0 +1,63 @@
+import { useLang } from "@/lib/useLang";
+import { Lexend } from "next/font/google";
+
+const lexend = Lexend({ subsets: ["latin"] });
+
+type footerlink = {
+  text: string;
+  href: string;
+};
+
+const DebatecoreFooter = (props: {}) => {
+  const boldfont = lexend.className;
+
+  const footerlinks: footerlink[] = [
+    {
+      text: useLang("footerAbout"),
+      href: "/about",
+    },
+    {
+      text: `${useLang("footerLicense")} (AGPLv3)`,
+      href: "https://github.com/debatecore/debate-tools/blob/master/LICENSE",
+    },
+    {
+      text: useLang("footerSourceCode"),
+      href: "https://github.com/debatecore/debate-tools",
+    },
+  ];
+
+  return (
+    <>
+      <div className="flex flex-col md:flex-row justify-center items-center gap-4 p-2 mx-auto">
+        <div>
+          <a
+            href="https://debateco.re"
+            className={`${boldfont} tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-violet-600 to-pink-400 from-30% to-70%`}
+          >
+            debatecore
+          </a>
+        </div>
+        <div className="w-1 h-1 hidden md:block bg-neutral-500 rounded" />
+        <div className="flex flex-row flex-wrap justify-center items-center gap-4">
+          {footerlinks.map((link) => {
+            return (
+              <a
+                href={link.href}
+                key={link.text}
+                className="text-neutral-400 hover:underline"
+              >
+                {link.text}
+              </a>
+            );
+          })}
+        </div>
+      </div>
+      <div className="mx-auto p-2 text-balance text-center text-neutral-700">
+        {useLang("disclaimer")}
+        {" © 2023-2024 Jakub Mańczak & Mateusz Dobrzyński"}
+      </div>
+    </>
+  );
+};
+
+export { DebatecoreFooter };