Removed the default in the exports whenever possible

src/components/AppLayout.tsx

@@ -1,4 +1,4 @@
-import Button from "components/Inputs/Button";
+import { Button } from "components/Inputs/Button";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { UploadImageFragment } from "graphql/generated";
 import { AppStaticProps } from "graphql/getAppStaticProps";
@@ -10,10 +10,10 @@ import Head from "next/head";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { useSwipeable } from "react-swipeable";
-import OrderableList from "./Inputs/OrderableList";
+import { OrderableList } from "./Inputs/OrderableList";
-import Select from "./Inputs/Select";
+import { Select } from "./Inputs/Select";
-import MainPanel from "./Panels/MainPanel";
+import { MainPanel } from "./Panels/MainPanel";
-import Popup from "./Popup";
+import { Popup } from "./Popup";
 
 interface Props extends AppStaticProps {
   subPanel?: React.ReactNode;
@@ -25,7 +25,7 @@ interface Props extends AppStaticProps {
   description?: string;
 }
 
-export default function AppLayout(props: Immutable<Props>): JSX.Element {
+export function AppLayout(props: Immutable<Props>): JSX.Element {
   const {
     langui,
     currencies,

src/components/Chip.tsx

@@ -5,7 +5,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-export default function Chip(props: Immutable<Props>): JSX.Element {
+export function Chip(props: Immutable<Props>): JSX.Element {
   return (
     <div
       className={`grid place-content-center place-items-center text-xs pb-[0.14rem]

src/components/HorizontalLine.tsx

@@ -4,7 +4,7 @@ interface Props {
   className?: string;
 }
 
-export default function HorizontalLine(props: Immutable<Props>): JSX.Element {
+export function HorizontalLine(props: Immutable<Props>): JSX.Element {
   return (
     <div
       className={`h-0 w-full my-8 border-t-[3px] border-dotted border-black ${props.className}`}

src/components/Img.tsx

@@ -12,7 +12,7 @@ interface Props {
   onClick?: MouseEventHandler<HTMLImageElement>;
 }
 
-export default function Img(props: Immutable<Props>): JSX.Element {
+export function Img(props: Immutable<Props>): JSX.Element {
   const {
     className,
     image,

src/components/Inputs/Button.tsx

@@ -15,7 +15,7 @@ interface Props {
   badgeNumber?: number;
 }
 
-export default function Button(props: Immutable<Props>): JSX.Element {
+export function Button(props: Immutable<Props>): JSX.Element {
   const {
     draggable,
     id,

src/components/Inputs/LanguageSwitcher.tsx

@@ -2,8 +2,8 @@ import { AppStaticProps } from "graphql/getAppStaticProps";
 import { prettyLanguage } from "helpers/formatters";
 import { Immutable } from "helpers/types";
 import { Dispatch, SetStateAction } from "react";
-import ToolTip from "../ToolTip";
+import { ToolTip } from "../ToolTip";
-import Button from "./Button";
+import { Button } from "./Button";
 
 interface Props {
   className?: string;
@@ -13,7 +13,7 @@ interface Props {
   setLocalesIndex: Dispatch<SetStateAction<number | undefined>>;
 }
 
-export default function LanguageSwitcher(props: Immutable<Props>): JSX.Element {
+export function LanguageSwitcher(props: Immutable<Props>): JSX.Element {
   const { locales, className, localesIndex, setLocalesIndex } = props;
 
   return (

src/components/Inputs/OrderableList.tsx

@@ -8,7 +8,7 @@ interface Props {
   onChange?: (items: Map<string, string>) => void;
 }
 
-export default function OrderableList(props: Immutable<Props>): JSX.Element {
+export function OrderableList(props: Immutable<Props>): JSX.Element {
   const [items, setItems] = useState<Map<string, string>>(props.items);
 
   useEffect(() => {

src/components/Inputs/PageSelector.tsx

@@ -1,6 +1,6 @@
 import { Immutable } from "helpers/types";
 import { Dispatch, SetStateAction } from "react";
-import Button from "./Button";
+import { Button } from "./Button";
 
 interface Props {
   className?: string;
@@ -9,7 +9,7 @@ interface Props {
   setPage: Dispatch<SetStateAction<number>>;
 }
 
-export default function PageSelector(props: Immutable<Props>): JSX.Element {
+export function PageSelector(props: Immutable<Props>): JSX.Element {
   const { page, setPage, maxPage } = props;
 
   return (

src/components/Inputs/Select.tsx

@@ -10,7 +10,7 @@ interface Props {
   className?: string;
 }
 
-export default function Select(props: Immutable<Props>): JSX.Element {
+export function Select(props: Immutable<Props>): JSX.Element {
   const [opened, setOpened] = useState(false);
 
   return (

src/components/Inputs/Switch.tsx

@@ -7,7 +7,7 @@ interface Props {
   className?: string;
 }
 
-export default function Switch(props: Immutable<Props>): JSX.Element {
+export function Switch(props: Immutable<Props>): JSX.Element {
   return (
     <div
       className={`h-6 w-12 rounded-full border-2 border-mid grid

src/components/InsetBox.tsx

@@ -6,7 +6,7 @@ interface Props {
   id?: string;
 }
 
-export default function InsetBox(props: Immutable<Props>): JSX.Element {
+export function InsetBox(props: Immutable<Props>): JSX.Element {
   return (
     <div
       id={props.id}

src/components/Library/ContentLine.tsx

@@ -1,5 +1,5 @@
-import Chip from "components/Chip";
+import { Chip } from "components/Chip";
-import Button from "components/Inputs/Button";
+import { Button } from "components/Inputs/Button";
 import { GetLibraryItemQuery } from "graphql/generated";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { prettyinlineTitle, prettySlug } from "helpers/formatters";
@@ -21,7 +21,7 @@ interface Props {
   langui: AppStaticProps["langui"];
 }
 
-export default function ContentLine(props: Immutable<Props>): JSX.Element {
+export function ContentLine(props: Immutable<Props>): JSX.Element {
   const { content, langui, parentSlug } = props;
 
   const [opened, setOpened] = useState(false);

src/components/Library/ScanSet.tsx

@@ -1,8 +1,8 @@
-import Chip from "components/Chip";
+import { Chip } from "components/Chip";
-import Img from "components/Img";
+import { Img } from "components/Img";
-import Button from "components/Inputs/Button";
+import { Button } from "components/Inputs/Button";
-import RecorderChip from "components/RecorderChip";
+import { RecorderChip } from "components/RecorderChip";
-import ToolTip from "components/ToolTip";
+import { ToolTip } from "components/ToolTip";
 import { GetLibraryItemScansQuery } from "graphql/generated";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { getAssetFilename, getAssetURL, ImageQuality } from "helpers/img";
@@ -48,7 +48,7 @@ interface Props {
   >["content"];
 }
 
-export default function ScanSet(props: Immutable<Props>): JSX.Element {
+export function ScanSet(props: Immutable<Props>): JSX.Element {
   const { openLightBox, scanSet, slug, title, languages, langui, content } =
     props;
 

src/components/Library/ScanSetCover.tsx

@@ -1,7 +1,7 @@
-import Chip from "components/Chip";
+import { Chip } from "components/Chip";
-import Img from "components/Img";
+import { Img } from "components/Img";
-import RecorderChip from "components/RecorderChip";
+import { RecorderChip } from "components/RecorderChip";
-import ToolTip from "components/ToolTip";
+import { ToolTip } from "components/ToolTip";
 import {
   GetLibraryItemScansQuery,
   UploadImageFragment,
@@ -28,7 +28,7 @@ interface Props {
   langui: AppStaticProps["langui"];
 }
 
-export default function ScanSetCover(props: Immutable<Props>): JSX.Element {
+export function ScanSetCover(props: Immutable<Props>): JSX.Element {
   const { openLightBox, images, languages, langui } = props;
 
   const [selectedScan, LanguageSwitcher] = useSmartLanguage({

src/components/LightBox.tsx

@@ -2,9 +2,9 @@ import { Immutable } from "helpers/types";
 import { Dispatch, SetStateAction } from "react";
 import Hotkeys from "react-hot-keys";
 import { useSwipeable } from "react-swipeable";
-import Img from "./Img";
+import { Img } from "./Img";
-import Button from "./Inputs/Button";
+import { Button } from "./Inputs/Button";
-import Popup from "./Popup";
+import { Popup } from "./Popup";
 
 interface Props {
   setState:
@@ -16,7 +16,7 @@ interface Props {
   setIndex: Dispatch<SetStateAction<number>>;
 }
 
-export default function LightBox(props: Immutable<Props>): JSX.Element {
+export function LightBox(props: Immutable<Props>): JSX.Element {
   const { state, setState, images, index, setIndex } = props;
 
   function handlePrevious() {

src/components/Markdown/Markdawn.tsx

@@ -1,7 +1,7 @@
-import HorizontalLine from "components/HorizontalLine";
+import { HorizontalLine } from "components/HorizontalLine";
-import Img from "components/Img";
+import { Img } from "components/Img";
-import InsetBox from "components/InsetBox";
+import { InsetBox } from "components/InsetBox";
-import ToolTip from "components/ToolTip";
+import { ToolTip } from "components/ToolTip";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { slugify } from "helpers/formatters";
 import { getAssetURL, ImageQuality } from "helpers/img";
@@ -17,7 +17,7 @@ interface Props {
   text: string;
 }
 
-export default function Markdawn(props: Immutable<Props>): JSX.Element {
+export function Markdawn(props: Immutable<Props>): JSX.Element {
   const appLayout = useAppLayout();
   const text = preprocessMarkDawn(props.text);
 

src/components/Markdown/TOC.tsx

@@ -8,7 +8,7 @@ interface Props {
   title?: string;
 }
 
-export default function TOCComponent(props: Immutable<Props>): JSX.Element {
+export function TOC(props: Immutable<Props>): JSX.Element {
   const { text, title } = props;
   const toc = getTocFromMarkdawn(preprocessMarkDawn(text), title);
   const router = useRouter();
@@ -29,7 +29,7 @@ export default function TOCComponent(props: Immutable<Props>): JSX.Element {
 }
 
 interface LevelProps {
-  tocchildren: TOC[];
+  tocchildren: TOCInterface[];
   parentNumbering: string;
 }
 
@@ -61,14 +61,14 @@ function TOCLevel(props: LevelProps): JSX.Element {
   );
 }
 
-interface TOC {
+interface TOCInterface {
   title: string;
   slug: string;
-  children: TOC[];
+  children: TOCInterface[];
 }
 
-export function getTocFromMarkdawn(text: string, title?: string): TOC {
+export function getTocFromMarkdawn(text: string, title?: string): TOCInterface {
-  const toc: TOC = {
+  const toc: TOCInterface = {
     title: title ?? "Return to top",
     slug: slugify(title),
     children: [],

src/components/PanelComponents/NavOption.tsx

@@ -1,4 +1,4 @@
-import ToolTip from "components/ToolTip";
+import { ToolTip } from "components/ToolTip";
 import { Immutable } from "helpers/types";
 import { useRouter } from "next/router";
 import { MouseEventHandler } from "react";
@@ -13,7 +13,7 @@ interface Props {
   onClick?: MouseEventHandler<HTMLDivElement>;
 }
 
-export default function NavOption(props: Immutable<Props>): JSX.Element {
+export function NavOption(props: Immutable<Props>): JSX.Element {
   const router = useRouter();
   const isActive = router.asPath.startsWith(props.url);
   const divActive = "bg-mid shadow-inner-sm shadow-shade";

src/components/PanelComponents/PanelHeader.tsx

@@ -1,4 +1,4 @@
-import HorizontalLine from "components/HorizontalLine";
+import { HorizontalLine } from "components/HorizontalLine";
 import { Immutable } from "helpers/types";
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
   description?: string | null | undefined;
 }
 
-export default function PanelHeader(props: Immutable<Props>): JSX.Element {
+export function PanelHeader(props: Immutable<Props>): JSX.Element {
   return (
     <>
       <div className="w-full grid place-items-center">

src/components/PanelComponents/ReturnButton.tsx

@@ -1,5 +1,5 @@
-import HorizontalLine from "components/HorizontalLine";
+import { HorizontalLine } from "components/HorizontalLine";
-import Button from "components/Inputs/Button";
+import { Button } from "components/Inputs/Button";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";
@@ -19,7 +19,7 @@ export enum ReturnButtonType {
   both = "both",
 }
 
-export default function ReturnButton(props: Immutable<Props>): JSX.Element {
+export function ReturnButton(props: Immutable<Props>): JSX.Element {
   const appLayout = useAppLayout();
 
   return (

src/components/Panels/ContentPanel.tsx

@@ -11,7 +11,7 @@ export enum ContentPanelWidthSizes {
   large = "large",
 }
 
-export default function ContentPanel(props: Immutable<Props>): JSX.Element {
+export function ContentPanel(props: Immutable<Props>): JSX.Element {
   const width = props.width ? props.width : ContentPanelWidthSizes.default;
   const widthCSS =
     width === ContentPanelWidthSizes.default ? "max-w-2xl" : "w-full";

src/components/Panels/MainPanel.tsx

@@ -1,7 +1,7 @@
-import HorizontalLine from "components/HorizontalLine";
+import { HorizontalLine } from "components/HorizontalLine";
-import Button from "components/Inputs/Button";
+import { Button } from "components/Inputs/Button";
-import NavOption from "components/PanelComponents/NavOption";
+import { NavOption } from "components/PanelComponents/NavOption";
-import ToolTip from "components/ToolTip";
+import { ToolTip } from "components/ToolTip";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";
@@ -13,7 +13,7 @@ interface Props {
   langui: AppStaticProps["langui"];
 }
 
-export default function MainPanel(props: Immutable<Props>): JSX.Element {
+export function MainPanel(props: Immutable<Props>): JSX.Element {
   const { langui } = props;
   const isDesktop = useMediaDesktop();
   const appLayout = useAppLayout();

src/components/Panels/SubPanel.tsx

@@ -4,7 +4,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-export default function SubPanel(props: Immutable<Props>): JSX.Element {
+export function SubPanel(props: Immutable<Props>): JSX.Element {
   return (
     <div className="grid pt-10 pb-20 px-6 desktop:py-8 desktop:px-10 gap-y-2 text-center">
       {props.children}

src/components/Popup.tsx

@@ -14,7 +14,7 @@ interface Props {
   padding?: boolean;
 }
 
-export default function Popup(props: Immutable<Props>): JSX.Element {
+export function Popup(props: Immutable<Props>): JSX.Element {
   const {
     setState,
     state,

src/components/PostPage.tsx

@@ -3,17 +3,17 @@ import { prettySlug } from "helpers/formatters";
 import { getStatusDescription } from "helpers/others";
 import { Immutable, PostWithTranslations } from "helpers/types";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
-import AppLayout from "./AppLayout";
+import { AppLayout } from "./AppLayout";
-import Chip from "./Chip";
+import { Chip } from "./Chip";
-import HorizontalLine from "./HorizontalLine";
+import { HorizontalLine } from "./HorizontalLine";
-import Markdawn from "./Markdown/Markdawn";
+import { Markdawn } from "./Markdown/Markdawn";
-import TOC from "./Markdown/TOC";
+import { TOC } from "./Markdown/TOC";
-import ReturnButton, { ReturnButtonType } from "./PanelComponents/ReturnButton";
+import { ReturnButton, ReturnButtonType } from "./PanelComponents/ReturnButton";
-import ContentPanel from "./Panels/ContentPanel";
+import { ContentPanel } from "./Panels/ContentPanel";
-import SubPanel from "./Panels/SubPanel";
+import { SubPanel } from "./Panels/SubPanel";
-import RecorderChip from "./RecorderChip";
+import { RecorderChip } from "./RecorderChip";
-import ThumbnailHeader from "./ThumbnailHeader";
+import { ThumbnailHeader } from "./ThumbnailHeader";
-import ToolTip from "./ToolTip";
+import { ToolTip } from "./ToolTip";
 
 interface Props {
   post: PostWithTranslations;
@@ -31,7 +31,7 @@ interface Props {
   appendBody?: JSX.Element;
 }
 
-export default function PostPage(props: Immutable<Props>): JSX.Element {
+export function PostPage(props: Immutable<Props>): JSX.Element {
   const {
     post,
     langui,

src/components/PreviewCard.tsx

@@ -14,8 +14,8 @@ import {
 import { ImageQuality } from "helpers/img";
 import { Immutable } from "helpers/types";
 import Link from "next/link";
-import Chip from "./Chip";
+import { Chip } from "./Chip";
-import Img from "./Img";
+import { Img } from "./Img";
 
 interface Props {
   thumbnail?: UploadImageFragment | string | null | undefined;
@@ -45,7 +45,7 @@ interface Props {
     | { __typename: "anotherHoverlayName" };
 }
 
-export default function PreviewCard(props: Immutable<Props>): JSX.Element {
+export function PreviewCard(props: Immutable<Props>): JSX.Element {
   const {
     href,
     thumbnail,

src/components/PreviewLine.tsx

@@ -2,8 +2,8 @@ import { UploadImageFragment } from "graphql/generated";
 import { ImageQuality } from "helpers/img";
 import { Immutable } from "helpers/types";
 import Link from "next/link";
-import Chip from "./Chip";
+import { Chip } from "./Chip";
-import Img from "./Img";
+import { Img } from "./Img";
 
 interface Props {
   thumbnail?: UploadImageFragment | string | null | undefined;
@@ -16,7 +16,7 @@ interface Props {
   bottomChips?: string[];
 }
 
-export default function PreviewLine(props: Immutable<Props>): JSX.Element {
+export function PreviewLine(props: Immutable<Props>): JSX.Element {
   const {
     href,
     thumbnail,

src/components/RecorderChip.tsx

@@ -1,11 +1,11 @@
-import Chip from "components/Chip";
+import { Chip } from "components/Chip";
 import { RecorderChipFragment } from "graphql/generated";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { ImageQuality } from "helpers/img";
 import { Immutable } from "helpers/types";
-import Img from "./Img";
+import { Img } from "./Img";
-import Markdawn from "./Markdown/Markdawn";
+import { Markdawn } from "./Markdown/Markdawn";
-import ToolTip from "./ToolTip";
+import { ToolTip } from "./ToolTip";
 
 interface Props {
   className?: string;
@@ -13,7 +13,7 @@ interface Props {
   langui: AppStaticProps["langui"];
 }
 
-export default function RecorderChip(props: Immutable<Props>): JSX.Element {
+export function RecorderChip(props: Immutable<Props>): JSX.Element {
   const { recorder, langui } = props;
   return (
     <ToolTip

src/components/SVG.tsx

@@ -7,7 +7,7 @@ interface Props {
   className?: string;
 }
 
-export default function SVG(props: Immutable<Props>): JSX.Element {
+export function SVG(props: Immutable<Props>): JSX.Element {
   return (
     <div className={props.className}>
       <Image

src/components/ThumbnailHeader.tsx

@@ -1,7 +1,7 @@
-import Chip from "components/Chip";
+import { Chip } from "components/Chip";
-import Img from "components/Img";
+import { Img } from "components/Img";
-import InsetBox from "components/InsetBox";
+import { InsetBox } from "components/InsetBox";
-import Markdawn from "components/Markdown/Markdawn";
+import { Markdawn } from "components/Markdown/Markdawn";
 import { GetContentQuery, UploadImageFragment } from "graphql/generated";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { prettyinlineTitle, prettySlug, slugify } from "helpers/formatters";
@@ -33,7 +33,7 @@ interface Props {
   languageSwitcher?: JSX.Element;
 }
 
-export default function ThumbnailHeader(props: Immutable<Props>): JSX.Element {
+export function ThumbnailHeader(props: Immutable<Props>): JSX.Element {
   const {
     langui,
     pre_title,

src/components/ToolTip.tsx

@@ -3,7 +3,7 @@ import "tippy.js/animations/scale-subtle.css";
 
 interface Props extends TippyProps {}
 
-export default function ToolTip(props: Props): JSX.Element {
+export function ToolTip(props: Props): JSX.Element {
   const newProps: Props = {
     delay: [150, 0],
     interactive: true,

src/components/Wiki/Chronology/ChronologyItemComponent.tsx

@@ -1,5 +1,5 @@
-import Chip from "components/Chip";
+import { Chip } from "components/Chip";
-import ToolTip from "components/ToolTip";
+import { ToolTip } from "components/ToolTip";
 import {
   Enum_Componenttranslationschronologyitem_Status,
   GetChronologyItemsQuery,
@@ -17,9 +17,7 @@ interface Props {
   langui: AppStaticProps["langui"];
 }
 
-export default function ChronologyItemComponent(
+export function ChronologyItemComponent(props: Immutable<Props>): JSX.Element {
-  props: Immutable<Props>
-): JSX.Element {
   const { langui } = props;
 
   function generateAnchor(

src/components/Wiki/Chronology/ChronologyYearComponent.tsx

@@ -1,4 +1,4 @@
-import ChronologyItemComponent from "components/Wiki/Chronology/ChronologyItemComponent";
+import { ChronologyItemComponent } from "components/Wiki/Chronology/ChronologyItemComponent";
 import { GetChronologyItemsQuery } from "graphql/generated";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";
@@ -12,9 +12,7 @@ interface Props {
   langui: AppStaticProps["langui"];
 }
 
-export default function ChronologyYearComponent(
+export function ChronologyYearComponent(props: Immutable<Props>): JSX.Element {
-  props: Immutable<Props>
-): JSX.Element {
   const { langui } = props;
 
   return (

src/contexts/AppLayoutContext.tsx

@@ -1,6 +1,6 @@
 import { Immutable } from "helpers/types";
-import useDarkMode from "hooks/useDarkMode";
+import { useDarkMode } from "hooks/useDarkMode";
-import useStateWithLocalStorage from "hooks/useStateWithLocalStorage";
+import { useStateWithLocalStorage } from "hooks/useStateWithLocalStorage";
 import React, { ReactNode, useContext, useState } from "react";
 
 interface AppLayoutState {

src/hooks/useDarkMode.ts

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
 import { usePrefersDarkMode } from "./useMediaQuery";
-import useStateWithLocalStorage from "./useStateWithLocalStorage";
+import { useStateWithLocalStorage } from "./useStateWithLocalStorage";
 
-export default function useDarkMode(
+export function useDarkMode(
   key: string,
   initialValue: boolean | undefined
 ): [

src/hooks/useLightBox.tsx

@@ -1,4 +1,4 @@
-import LightBox from "components/LightBox";
+import { LightBox } from "components/LightBox";
 import { useState } from "react";
 
 export function useLightBox(): [

src/hooks/useMediaQuery.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-export default function useMediaQuery(query: string): boolean {
+export function useMediaQuery(query: string): boolean {
   function getMatches(query: string): boolean {
     // Prevents SSR issues
     if (typeof window !== "undefined") {

src/hooks/useSmartLanguage.tsx

@@ -1,4 +1,4 @@
-import LanguageSwitcher from "components/Inputs/LanguageSwitcher";
+import { LanguageSwitcher } from "components/Inputs/LanguageSwitcher";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";

src/hooks/useStateWithLocalStorage.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-export default function useStateWithLocalStorage<T>(
+export function useStateWithLocalStorage<T>(
   key: string,
   initialValue: T
 ): [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>] {

src/pages/404.tsx

@@ -1,8 +1,9 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import ReturnButton, {
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel from "components/Panels/ContentPanel";
+import { ContentPanel } from "components/Panels/ContentPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";

src/pages/500.tsx

@@ -1,8 +1,9 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import ReturnButton, {
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel from "components/Panels/ContentPanel";
+import { ContentPanel } from "components/Panels/ContentPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";

src/pages/_document.tsx

@@ -6,7 +6,7 @@ import Document, {
   NextScript,
 } from "next/document";
 
-class MyDocument extends Document {
+export default class MyDocument extends Document {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   static async getInitialProps(ctx: DocumentContext) {
     const initialProps = await Document.getInitialProps(ctx);
@@ -65,5 +65,3 @@ class MyDocument extends Document {
     );
   }
 }
-
-export default MyDocument;

src/pages/about-us/accords-handbook.tsx

@@ -1,4 +1,4 @@
-import PostPage from "components/PostPage";
+import { PostPage } from "components/PostPage";
 import {
   getPostStaticProps,
   PostStaticProps,

src/pages/about-us/contact.tsx

@@ -1,5 +1,5 @@
-import InsetBox from "components/InsetBox";
+import { InsetBox } from "components/InsetBox";
-import PostPage from "components/PostPage";
+import { PostPage } from "components/PostPage";
 import {
   getPostStaticProps,
   PostStaticProps,
@@ -10,9 +10,7 @@ import { useRouter } from "next/router";
 import { RequestMailProps, ResponseMailProps } from "pages/api/mail";
 import { useState } from "react";
 
-export default function AboutUs(
+export default function AboutUs(props: Immutable<PostStaticProps>): JSX.Element {
-  props: Immutable<PostStaticProps>
-): JSX.Element {
   const { post, langui, languages, currencies } = props;
 
   const router = useRouter();

src/pages/about-us/index.tsx

@@ -1,7 +1,7 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import NavOption from "components/PanelComponents/NavOption";
+import { NavOption } from "components/PanelComponents/NavOption";
-import PanelHeader from "components/PanelComponents/PanelHeader";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";

src/pages/about-us/legality.tsx

@@ -1,4 +1,4 @@
-import PostPage from "components/PostPage";
+import { PostPage } from "components/PostPage";
 import {
   getPostStaticProps,
   PostStaticProps,

src/pages/about-us/sharing-policy.tsx

@@ -1,4 +1,4 @@
-import PostPage from "components/PostPage";
+import { PostPage } from "components/PostPage";
 import {
   getPostStaticProps,
   PostStaticProps,

src/pages/api/mail.ts

@@ -14,7 +14,7 @@ export interface RequestMailProps {
   formName: string;
 }
 
-export default async function Mail(
+export async function Mail(
   req: NextApiRequest,
   res: NextApiResponse<ResponseMailProps>
 ) {

src/pages/api/revalidate.ts

@@ -70,7 +70,7 @@ type ResponseMailProps = {
   revalidated: boolean;
 };
 
-export default async function Mail(
+export async function Mail(
   req: NextApiRequest,
   res: NextApiResponse<ResponseMailProps>
 ) {

src/pages/archives/index.tsx

@@ -1,7 +1,7 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import NavOption from "components/PanelComponents/NavOption";
+import { NavOption } from "components/PanelComponents/NavOption";
-import PanelHeader from "components/PanelComponents/PanelHeader";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";

src/pages/archives/videos/c/[uid].tsx

@@ -1,14 +1,16 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import Switch from "components/Inputs/Switch";
+import { Switch } from "components/Inputs/Switch";
-import PanelHeader from "components/PanelComponents/PanelHeader";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
-import ReturnButton, {
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel, {
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
-import PreviewCard from "components/PreviewCard";
+import { PreviewCard } from "components/PreviewCard";
 import { GetVideoChannelQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";

src/pages/archives/videos/index.tsx

@@ -1,15 +1,17 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import PageSelector from "components/Inputs/PageSelector";
+import { PageSelector } from "components/Inputs/PageSelector";
-import Switch from "components/Inputs/Switch";
+import { Switch } from "components/Inputs/Switch";
-import PanelHeader from "components/PanelComponents/PanelHeader";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
-import ReturnButton, {
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel, {
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
-import PreviewCard from "components/PreviewCard";
+import { PreviewCard } from "components/PreviewCard";
 import { GetVideosPreviewQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";

src/pages/archives/videos/v/[uid].tsx

@@ -1,15 +1,17 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import HorizontalLine from "components/HorizontalLine";
+import { HorizontalLine } from "components/HorizontalLine";
-import Button from "components/Inputs/Button";
+import { Button } from "components/Inputs/Button";
-import InsetBox from "components/InsetBox";
+import { InsetBox } from "components/InsetBox";
-import NavOption from "components/PanelComponents/NavOption";
+import { NavOption } from "components/PanelComponents/NavOption";
-import ReturnButton, {
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel, {
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { GetVideoQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";

src/pages/chronicles/index.tsx

@@ -1,6 +1,6 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import PanelHeader from "components/PanelComponents/PanelHeader";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";

src/pages/contents/[slug]/index.tsx

@@ -1,17 +1,18 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import Chip from "components/Chip";
+import { Chip } from "components/Chip";
-import HorizontalLine from "components/HorizontalLine";
+import { HorizontalLine } from "components/HorizontalLine";
-import Markdawn from "components/Markdown/Markdawn";
+import { Markdawn } from "components/Markdown/Markdawn";
-import TOC from "components/Markdown/TOC";
+import { TOC } from "components/Markdown/TOC";
-import ReturnButton, {
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel from "components/Panels/ContentPanel";
+import { ContentPanel } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
-import PreviewLine from "components/PreviewLine";
+import { PreviewLine } from "components/PreviewLine";
-import RecorderChip from "components/RecorderChip";
+import { RecorderChip } from "components/RecorderChip";
-import ThumbnailHeader from "components/ThumbnailHeader";
+import { ThumbnailHeader } from "components/ThumbnailHeader";
-import ToolTip from "components/ToolTip";
+import { ToolTip } from "components/ToolTip";
 import { GetContentTextQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";

src/pages/contents/index.tsx

@@ -1,13 +1,14 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import Chip from "components/Chip";
+import { Chip } from "components/Chip";
-import Select from "components/Inputs/Select";
+import { Select } from "components/Inputs/Select";
-import Switch from "components/Inputs/Switch";
+import { Switch } from "components/Inputs/Switch";
-import PanelHeader from "components/PanelComponents/PanelHeader";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
-import ContentPanel, {
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
-import PreviewCard from "components/PreviewCard";
+import { PreviewCard } from "components/PreviewCard";
 import { GetContentsQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
@@ -120,7 +121,8 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
                         thumbnailAspectRatio="3/2"
                         stackEffect={
                           item.attributes.next_recommended?.data?.id !== null &&
-                          item.attributes.next_recommended?.data?.id !== undefined &&
+                          item.attributes.next_recommended?.data?.id !==
+                            undefined &&
                           combineRelatedContent
                         }
                         topChips={

src/pages/dev/checkup/contents.tsx

@@ -1,10 +1,11 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import Chip from "components/Chip";
+import { Chip } from "components/Chip";
-import Button from "components/Inputs/Button";
+import { Button } from "components/Inputs/Button";
-import ContentPanel, {
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import ToolTip from "components/ToolTip";
+import { ToolTip } from "components/ToolTip";
 import {
   DevGetContentsQuery,
   Enum_Componentsetstextset_Status,
@@ -39,7 +40,8 @@ export default function CheckupContents(props: Immutable<Props>): JSX.Element {
       {testReport.lines.map((line, index) => (
         <div
           key={index}
-          className="grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] gap-2 items-center mb-2 justify-items-start"
+          className="grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr]
+          gap-2 items-center mb-2 justify-items-start"
         >
           <Button
             href={line.frontendUrl}

src/pages/dev/checkup/libraryitems.tsx

@@ -1,10 +1,11 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import Chip from "components/Chip";
+import { Chip } from "components/Chip";
-import Button from "components/Inputs/Button";
+import { Button } from "components/Inputs/Button";
-import ContentPanel, {
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import ToolTip from "components/ToolTip";
+import { ToolTip } from "components/ToolTip";
 import {
   DevGetLibraryItemsQuery,
   Enum_Componentcollectionscomponentlibraryimages_Status,
@@ -18,9 +19,7 @@ interface Props extends AppStaticProps {
   libraryItems: DevGetLibraryItemsQuery;
 }
 
-export default function CheckupLibraryItems(
+export default function CheckupLibraryItems(props: Immutable<Props>): JSX.Element {
-  props: Immutable<Props>
-): JSX.Element {
   const { libraryItems } = props;
   const testReport = testingLibraryItem(libraryItems);
 

src/pages/dev/editor.tsx

@@ -1,11 +1,12 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import Button from "components/Inputs/Button";
+import { Button } from "components/Inputs/Button";
-import Markdawn from "components/Markdown/Markdawn";
+import { Markdawn } from "components/Markdown/Markdawn";
-import ContentPanel, {
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import Popup from "components/Popup";
+import { Popup } from "components/Popup";
-import ToolTip from "components/ToolTip";
+import { ToolTip } from "components/ToolTip";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";

src/pages/gallery/index.tsx

@@ -1,4 +1,4 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import PostPage from "components/PostPage";
+import { PostPage } from "components/PostPage";
 import {
   getPostStaticProps,
   PostStaticProps,

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

@@ -1,19 +1,21 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import Chip from "components/Chip";
+import { Chip } from "components/Chip";
-import Img from "components/Img";
+import { Img } from "components/Img";
-import Button from "components/Inputs/Button";
+import { Button } from "components/Inputs/Button";
-import Switch from "components/Inputs/Switch";
+import { Switch } from "components/Inputs/Switch";
-import InsetBox from "components/InsetBox";
+import { InsetBox } from "components/InsetBox";
-import ContentLine from "components/Library/ContentLine";
+import { ContentLine } from "components/Library/ContentLine";
-import NavOption from "components/PanelComponents/NavOption";
+import { NavOption } from "components/PanelComponents/NavOption";
-import ReturnButton, {
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel, {
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
-import PreviewCard from "components/PreviewCard";
+import { PreviewCard } from "components/PreviewCard";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import {
   Enum_Componentmetadatabooks_Binding_Type,

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

@@ -1,14 +1,16 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import ScanSet from "components/Library/ScanSet";
+import { ScanSet } from "components/Library/ScanSet";
-import ScanSetCover from "components/Library/ScanSetCover";
+import { ScanSetCover } from "components/Library/ScanSetCover";
-import NavOption from "components/PanelComponents/NavOption";
+import { NavOption } from "components/PanelComponents/NavOption";
-import ReturnButton, {
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel, {
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { GetLibraryItemScansQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";

src/pages/library/index.tsx

@@ -1,13 +1,14 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import Chip from "components/Chip";
+import { Chip } from "components/Chip";
-import Select from "components/Inputs/Select";
+import { Select } from "components/Inputs/Select";
-import Switch from "components/Inputs/Switch";
+import { Switch } from "components/Inputs/Switch";
-import PanelHeader from "components/PanelComponents/PanelHeader";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
-import ContentPanel, {
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
-import ThumbnailPreview from "components/PreviewCard";
+import { PreviewCard } from "components/PreviewCard";
 import { GetLibraryItemsPreviewQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
@@ -163,7 +164,7 @@ export default function Library(props: Immutable<Props>): JSX.Element {
                 {items.map((item) => (
                   <>
                     {item.attributes && (
-                      <ThumbnailPreview
+                      <PreviewCard
                         key={item.id}
                         href={`/library/${item.attributes.slug}`}
                         title={item.attributes.title}

src/pages/merch/index.tsx

@@ -1,6 +1,6 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import PanelHeader from "components/PanelComponents/PanelHeader";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";

src/pages/news/[slug].tsx

@@ -1,4 +1,4 @@
-import PostPage from "components/PostPage";
+import { PostPage } from "components/PostPage";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import {
   getPostStaticProps,

src/pages/news/index.tsx

@@ -1,11 +1,12 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import Switch from "components/Inputs/Switch";
+import { Switch } from "components/Inputs/Switch";
-import PanelHeader from "components/PanelComponents/PanelHeader";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
-import ContentPanel, {
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
-import PreviewCard from "components/PreviewCard";
+import { PreviewCard } from "components/PreviewCard";
 import { GetPostsPreviewQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";

src/pages/wiki/chronology.tsx

@@ -1,12 +1,13 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import InsetBox from "components/InsetBox";
+import { InsetBox } from "components/InsetBox";
-import NavOption from "components/PanelComponents/NavOption";
+import { NavOption } from "components/PanelComponents/NavOption";
-import ReturnButton, {
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel from "components/Panels/ContentPanel";
+import { ContentPanel } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
-import ChronologyYearComponent from "components/Wiki/Chronology/ChronologyYearComponent";
+import { ChronologyYearComponent } from "components/Wiki/Chronology/ChronologyYearComponent";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { GetChronologyItemsQuery, GetErasQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";

src/pages/wiki/index.tsx

@@ -1,7 +1,7 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
-import NavOption from "components/PanelComponents/NavOption";
+import { NavOption } from "components/PanelComponents/NavOption";
-import PanelHeader from "components/PanelComponents/PanelHeader";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";