changed the language selection button + replaced css with tailwind applies

src/components/Panels/MainPanel.tsx

@@ -1,25 +1,30 @@
 import Link from "next/link";
 import NavOption from "components/PanelComponents/NavOption";
 import SVG from "components/SVG";
+import { useRouter } from "next/router";
 
 export default function MainPanel(): JSX.Element {
+  const router = useRouter();
   return (
     <div className="grid webkit-scrollbar:w-0 [scrollbar-width:none] overflow-y-scroll border-r-[1px] border-black w-80 max-h-screen h-screen justify-center content-start p-8 gap-y-2 justify-items-center text-center">
-      <div className="transition-[filter] hover:colorize-dark">
+      <div className="">
+        <div className="grid place-items-center">
+          <div className="w-1/2 cursor-pointer transition-[filter] hover:colorize-dark">
             <Link href="/" passHref>
-          <div className="grid place-items-center cursor-pointer">
-            <div className="w-1/2">
               <SVG
                 src={"/icons/accords.svg"}
                 alt={"Logo of Accord's Library"}
               />
-            </div>
-            <h2 className="my-5 text-3xl">Accord&apos;s Library</h2>
-          </div>
             </Link>
           </div>
-
-      <button>Change language</button>
+          <div className="relative mt-5">
+            <button className="absolute right-0 top-[-1em] text-xs py-0">
+              {router.locale?.toUpperCase()}
+            </button>
+            <h2 className="text-3xl">Accord&rsquo;s Library</h2>
+          </div>
+        </div>
+      </div>
 
       <hr />
 
@@ -84,19 +89,23 @@ export default function MainPanel(): JSX.Element {
         </a>
         <p>
           Accord&rsquo;s Library is not affiliated with or endorsed by SQUARE
-          ENIX CO. LTD. All game assets and promotional materials belongs to ©
-          SQUARE ENIX CO. LTD.
+          ENIX CO. LTD. All game assets and promotional materials belongs to
+          ©&nbsp;SQUARE ENIX CO. LTD.
         </p>
         <div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">
           <a
             className="transition-[filter] hover:colorize-dark"
             href="https://github.com/Accords-Library"
+            target="_blank"
+            rel="noopener noreferrer"
           >
             <SVG className="w-10" src={"/icons/github-brands.svg"} alt={""} />
           </a>
           <a
             className="transition-[filter] hover:colorize-dark"
             href="https://accords-library.com/discord"
+            target="_blank"
+            rel="noopener noreferrer"
           >
             <SVG className="w-10" src={"/icons/discord-brands.svg"} alt={""} />
           </a>

src/pages/library/[slug].tsx

@@ -29,7 +29,6 @@ applyCustomAppProps(Library, {
 });
 
 export default function Library(props: Props): JSX.Element {
-  const router = useRouter();
   const libraryItem = props.libraryItem.libraryItems.data[0];
 
   return (
@@ -38,36 +37,6 @@ export default function Library(props: Props): JSX.Element {
         <ReturnButton title="Library" url="/library" />
         <hr />
 
-        <div className="grid place-items-center">
-          <div className="cursor-pointer grid items-end relative hover:rounded-3xl w-[80%] max-w-full mb-8">
-            <div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-lg"></div>
-            {libraryItem.attributes.thumbnail.data ? (
-              <Image
-                src={getAssetURL(
-                  libraryItem.attributes.thumbnail.data.attributes.url
-                )}
-                alt={
-                  libraryItem.attributes.thumbnail.data.attributes
-                    .alternativeText
-                }
-                width={libraryItem.attributes.thumbnail.data.attributes.width}
-                height={libraryItem.attributes.thumbnail.data.attributes.height}
-              />
-            ) : (
-              <div className="w-full aspect-[21/29.7]"></div>
-            )}
-          </div>
-
-          <h1 className="text-2xl">{libraryItem.attributes.title}</h1>
-          {libraryItem.attributes.subtitle ? (
-            <h2 className="text-1xl">{libraryItem.attributes.subtitle}</h2>
-          ) : (
-            ""
-          )}
-        </div>
-
-        <hr />
-
         <NavOption title="Summary" url="#summary" border={true} />
 
         {libraryItem.attributes.gallery.data.length > 0 ? (
@@ -157,18 +126,25 @@ export default function Library(props: Props): JSX.Element {
           </div>
 
           {libraryItem.attributes.gallery.data.length > 0 ? (
-            <div id="gallery" className="grid place-items-center gap-8">
+            <div id="gallery" className="grid place-items-center gap-8  w-full">
               <h2 className="text-2xl">Gallery</h2>
-              <div className="grid grid-flow-col place-items-center gap-4">
+              <div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fit,_minmax(15rem,1fr))]">
                 {libraryItem.attributes.gallery.data.map((galleryItem) => (
-                  <Image
+                  <div
                     key={galleryItem.id}
+                    className="relative aspect-square hover:scale-[1.02] transition-transform cursor-pointer"
+                  >
+                    <div className="bg-light absolute inset-0 rounded-lg shadow-md"></div>
+                    <Image
                       className="rounded-lg"
                       src={getAssetURL(galleryItem.attributes.url)}
                       alt={galleryItem.attributes.alternativeText}
                       width={galleryItem.attributes.width}
                       height={galleryItem.attributes.height}
+                      layout="fill"
+                      objectFit="cover"
                     />
+                  </div>
                 ))}
               </div>
             </div>

src/tailwind.css

@@ -5,50 +5,19 @@
 @layer base {
   html,
   body {
-    padding: 0;
-    margin: 0;
-    background-color: theme("colors.light");
-    color: theme("colors.black");
+    @apply p-0 m-0 bg-light text-black;
   }
 
-  /* HORIZONTAL LINE */
-
   hr {
-    height: 0;
-    width: 100%;
-    border: none;
-    border-top: 0.3rem dotted theme("colors.black");;
-    margin: 2rem;
+    @apply h-0 w-full my-8 border-t-[3px] border-dotted border-black;
   }
 
-  /* MATERIAL ICONS */
-
-  /* BUTTONS */
-
   button {
-    display: grid;
-    place-content: center;
-    place-items: center;
-    border: 0.1rem solid theme("colors.dark");
-    color: theme("colors.dark");
-    background: inherit;
-    border-radius: 100vmax;
-    padding: 0.4em 1em;
-    cursor: pointer;
-    transition: 0.1s color, 0.1s background-color;
+    @apply grid place-content-center place-items-center border-[1px] border-dark text-dark rounded-full cursor-pointer px-4 py-2 transition-colors hover:text-light hover:bg-dark;
   }
 
-  button:hover {
-    background: theme("colors.dark");
-    color: theme("colors.light");
-  }
-
-  /* FONT SETTING */
-
   * {
-    box-sizing: border-box;
-    font-family: "Zen Maru Gothic";
-    font-weight: 500;
+    @apply box-border font-body font-medium scroll-smooth;
   }
 
   h1,
@@ -57,20 +26,19 @@
   h4,
   h5,
   h6 {
-    font-family: "Vollkorn";
-    font-weight: 900;
+    @apply font-headers font-black;
   }
 
-  /* LINKS */
   a {
-    color: inherit;
-    text-decoration: underline dotted theme("colors.dark");
-    transition: 0.1s color;
-    text-underline-offset: 0.15em;
+    @apply transition-colors underline-offset-2 decoration-dotted underline decoration-dark hover:text-dark;
   }
 
-  a:hover {
-    color: theme("colors.dark");
+  *:target {
+    @apply scroll-mt-4;
+  }
+
+  *::selection {
+    @apply bg-dark text-light;
   }
 
   /* SCROLLBARS STYLING */
@@ -78,29 +46,17 @@
   * {
     scrollbar-color: theme("colors.dark") transparent;
     scrollbar-width: thin;
-    scroll-behavior: smooth;
-  }
-
-  *::selection {
-    background-color: theme("colors.dark");
-    color: theme("colors.light");
-  }
-
-  *:target {
-    scroll-margin-top: 1em;
   }
 
   *::-webkit-scrollbar {
-    width: 12px; /* width of the entire scrollbar */
+    @apply w-3;
   }
 
   *::-webkit-scrollbar-track {
-    background: transparent; /* color of the tracking area */
+    @apply bg-[transparent];
   }
 
   *::-webkit-scrollbar-thumb {
-    background-color: theme("colors.dark"); /* color of the scroll thumb */
-    border-radius: 100vmax; /* roundness of the scroll thumb */
-    border: 3px solid theme("colors.light"); /* creates padding around scroll thumb */
+    @apply bg-dark rounded-full border-[3px] border-solid border-light;
   }
 }

tailwind.config.js

@@ -9,6 +9,10 @@ module.exports = {
       dark: "#9c6644",
       black: "#1B1811",
     },
+    fontFamily: {
+      body: ["Zen Maru Gothic"],
+      headers: ["Vollkorn"],
+    },
   },
   plugins: [
     require("@tailwindcss/typography"),
@@ -53,6 +57,5 @@ module.exports = {
         },
       });
     }),
-
   ],
 };