Simplified Img component

src/components/Img.tsx

@@ -59,30 +59,22 @@ type ImgProps = {
 };
 
 export default function Img(props: ImgProps): JSX.Element {
-  if (props.layout == "fill") {
-    return (
-      <Image
-        src={getAssetURL(props.image.url, props.quality)}
-        alt={props.alt ? props.alt : props.image.alternativeText}
-        layout={props.layout}
-        objectFit={props.objectFit}
-        priority={props.priority}
-      />
-    );
-  } else {
-    return (
-      <Image
-        src={getAssetURL(props.image.url, props.quality)}
-        alt={props.alt ? props.alt : props.image.alternativeText}
-        {...getImgSizesByQuality(
-          props.image.width,
-          props.image.height,
-          props.quality ? props.quality : ImageQuality.Small
-        )}
-        layout={props.layout}
-        objectFit={props.objectFit}
-        priority={props.priority}
-      />
-    );
-  }
+  const imgSize = getImgSizesByQuality(
+    props.image.width,
+    props.image.height,
+    props.quality ? props.quality : ImageQuality.Small
+  );
+  return (
+    <Image
+      className={props.className}
+      src={getAssetURL(props.image.url, props.quality)}
+      alt={props.alt ? props.alt : props.image.alternativeText}
+      width={props.layout === "fill" ? undefined : imgSize.width}
+      height={props.layout === "fill" ? undefined : imgSize.height}
+      layout={props.layout}
+      objectFit={props.objectFit}
+      priority={props.priority}
+      unoptimized
+    />
+  );
 }

src/components/PanelComponents/NavOption.tsx

@@ -27,7 +27,7 @@ export default function NavOption(props: NavOptionProps): JSX.Element {
     <Link href={props.url} passHref>
       <div
         onClick={props.onClick}
-        data-html={true}
+        data-html
         data-tip={`
           <div class="px-4 py-3">
           <h3 class="text-2xl">${props.title}</h3>
@@ -39,7 +39,7 @@ export default function NavOption(props: NavOptionProps): JSX.Element {
           </div>
         `}
         data-for={props.tooltipId}
-        data-multiline={true}
+        data-multiline
         className={`grid grid-flow-col grid-cols-[auto] auto-cols-fr justify-center ${
           props.icon ? "text-left" : "text-center"
         } ${divCommon}`}

src/hooks/useMediaQuery.ts

@@ -34,14 +34,14 @@ export default function useMediaQuery(query: string): boolean {
 }
 
 export function useMediaThin() {
-    return useMediaQuery("(max-width: 50ch)");
+    return useMediaQuery("(max-width: 25rem)");
 }
 
 export function useMediaMobile() {
-    return useMediaQuery("(max-width: 120ch)");
+    return useMediaQuery("(max-width: 60rem)");
 }
 
 export function useMediaDesktop() {
-    return useMediaQuery("(min-width: 120ch)");
+    return useMediaQuery("(min-width: 60rem)");
 }
 

src/pages/index.tsx

@@ -12,7 +12,7 @@ export default function Home(props: HomeProps): JSX.Element {
   const langui = props.langui.websiteInterfaces.data[0].attributes;
 
   const contentPanel = (
-    <ContentPanel autoformat={true}>
+    <ContentPanel autoformat>
       <div className="grid place-items-center place-content-center w-full gap-5 text-center">
         <SVG
           className="w-32 mobile:w-1/2"

src/pages/library/index.tsx

@@ -23,13 +23,13 @@ export default function Library(props: LibraryProps): JSX.Element {
         url="/library/items"
         title={langui.library_items}
         subtitle={langui.library_items_description}
-        border={true}
+        border
       />
       <NavOption
         url="/library/content"
         title={langui.library_content}
         subtitle={langui.library_content_description}
-        border={true}
+        border
       />
     </SubPanel>
   );

src/pages/library/items/[slug].tsx

@@ -63,7 +63,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
         <NavOption
           title={langui.library_item_summary}
           url="#summary"
-          border={true}
+          border
           onClick={() => dispatch(setSubPanelOpen(false))}
         />
 
@@ -71,7 +71,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
           <NavOption
             title={langui.library_item_gallery}
             url="#gallery"
-            border={true}
+            border
             onClick={() => dispatch(setSubPanelOpen(false))}
           />
         ) : (
@@ -81,7 +81,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
         <NavOption
           title={langui.library_item_details}
           url="#details"
-          border={true}
+          border
           onClick={() => dispatch(setSubPanelOpen(false))}
         />
 
@@ -93,7 +93,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                 : langui.library_item_subitems
             }
             url={isVariantSet ? "#variants" : "#subitems"}
-            border={true}
+            border
             onClick={() => dispatch(setSubPanelOpen(false))}
           />
         ) : (
@@ -104,7 +104,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
           <NavOption
             title={langui.library_item_content}
             url="#content"
-            border={true}
+            border
           />
         ) : (
           ""

src/pages/wiki/chronology.tsx

@@ -80,7 +80,7 @@ export default function DataChronology(
           subtitle={
             era.attributes.starting_year + " → " + era.attributes.ending_year
           }
-          border={true}
+          border
         />
       ))}
     </SubPanel>

tailwind.config.js

@@ -15,9 +15,9 @@ module.exports = {
       monospace: ["monospace"],
     },
     screens: {
-      desktop: { min: "120ch" },
-      mobile: { max: "120ch" },
-      thin: { max: "50ch" },
+      desktop: { min: "60rem" },
+      mobile: { max: "60rem" },
+      thin: { max: "25rem" },
       coarse: { raw: "(pointer: coarse)" },
       fine: { raw: "(pointer: fine)" },
     },