From c076ec06ad8167544d61bee8498974dcb7dc5f75 Mon Sep 17 00:00:00 2001 From: DrMint Date: Wed, 15 Jun 2022 07:33:20 +0200 Subject: [PATCH] Use of cJoin and cIf --- src/components/AppLayout.tsx | 109 ++++++++++-------- src/components/Chip.tsx | 10 +- src/components/HorizontalLine.tsx | 7 +- src/components/Ico.tsx | 9 +- src/components/Inputs/Button.tsx | 23 ++-- src/components/Inputs/ButtonGroup.tsx | 3 +- src/components/Inputs/LanguageSwitcher.tsx | 3 +- src/components/Inputs/PageSelector.tsx | 5 +- src/components/Inputs/Select.tsx | 35 +++--- src/components/Inputs/Switch.tsx | 31 +++-- src/components/Inputs/TextInput.tsx | 3 +- src/components/Inputs/WithLabel.tsx | 15 ++- src/components/InsetBox.tsx | 6 +- src/components/Markdown/Markdawn.tsx | 3 +- src/components/Markdown/TOC.tsx | 2 +- src/components/PanelComponents/NavOption.tsx | 29 ++--- .../PanelComponents/ReturnButton.tsx | 8 +- src/components/Panels/ContentPanel.tsx | 20 ++-- src/components/Panels/MainPanel.tsx | 50 ++++---- src/components/Popup.tsx | 42 ++++--- src/components/PreviewCard.tsx | 70 ++++++----- src/components/PreviewLine.tsx | 5 +- src/components/SVG.tsx | 22 ---- src/components/ToolTip.tsx | 4 +- src/components/Wiki/DefinitionCard.tsx | 50 ++++++++ src/helpers/className.ts | 11 ++ src/helpers/types.ts | 15 ++- src/pages/about-us/contact.tsx | 12 +- src/pages/archives/videos/c/[uid].tsx | 2 +- src/pages/archives/videos/index.tsx | 2 +- src/pages/archives/videos/v/[uid].tsx | 2 +- src/pages/contents/[slug]/index.tsx | 5 +- src/pages/contents/index.tsx | 22 ++-- src/pages/dev/checkup/contents.tsx | 6 +- src/pages/dev/checkup/libraryitems.tsx | 2 +- src/pages/dev/editor.tsx | 2 +- src/pages/index.tsx | 5 +- src/pages/library/[slug]/index.tsx | 3 +- src/pages/library/[slug]/scans.tsx | 2 +- src/pages/library/index.tsx | 2 +- src/pages/news/index.tsx | 2 +- src/pages/wiki/[slug]/index.tsx | 107 +++++++++++++++-- src/pages/wiki/index.tsx | 2 +- src/tailwind.css | 13 +++ 44 files changed, 515 insertions(+), 266 deletions(-) delete mode 100644 src/components/SVG.tsx create mode 100644 src/components/Wiki/DefinitionCard.tsx create mode 100644 src/helpers/className.ts diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 77ef32a..7c70c2a 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -2,6 +2,7 @@ import { Button } from "components/Inputs/Button"; import { useAppLayout } from "contexts/AppLayoutContext"; import { UploadImageFragment } from "graphql/generated"; import { AppStaticProps } from "graphql/getAppStaticProps"; +import { cIf, cJoin } from "helpers/className"; import { prettyLanguage, prettySlug } from "helpers/formatters"; import { getOgImage, ImageQuality, OgImage } from "helpers/img"; // import { getClient, Indexes, search, SearchResult } from "helpers/search"; @@ -181,19 +182,23 @@ export function AppLayout(props: Immutable): JSX.Element { return (
{metaTitle} @@ -222,21 +227,25 @@ export function AppLayout(props: Immutable): JSX.Element { {/* Background when navbar is opened */}
{ appLayout.setMainPanelOpen(false); appLayout.setSubPanelOpen(false); @@ -255,7 +264,7 @@ export function AppLayout(props: Immutable): JSX.Element {

{langui.select_option_sidebar}

@@ -267,16 +276,18 @@ export function AppLayout(props: Immutable): JSX.Element { {/* Sub panel */} {subPanel && (
{subPanel}
@@ -284,12 +295,13 @@ export function AppLayout(props: Immutable): JSX.Element { {/* Main panel */}
@@ -301,25 +313,28 @@ export function AppLayout(props: Immutable): JSX.Element { > { appLayout.setMainPanelOpen(!appLayout.mainPanelOpen); appLayout.setSubPanelOpen(false); }} />

30 - ? "max-h-14 text-xl" - : "max-h-16 text-2xl" - }`} + className={cJoin( + "overflow-hidden text-center font-headers font-black", + cIf( + ogTitle && ogTitle.length > 30, + "max-h-14 text-xl", + "max-h-16 text-2xl" + ) + )} > {ogTitle}

{subPanel && !turnSubIntoContent && ( { appLayout.setSubPanelOpen(!appLayout.subPanelOpen); appLayout.setMainPanelOpen(false); diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx index bc62478..f4b26e5 100644 --- a/src/components/Chip.tsx +++ b/src/components/Chip.tsx @@ -1,3 +1,4 @@ +import { cJoin } from "helpers/className"; import { Immutable } from "helpers/types"; interface Props { @@ -8,9 +9,12 @@ interface Props { export function Chip(props: Immutable): JSX.Element { return (
{props.children}
diff --git a/src/components/HorizontalLine.tsx b/src/components/HorizontalLine.tsx index 25e1c7e..778b57c 100644 --- a/src/components/HorizontalLine.tsx +++ b/src/components/HorizontalLine.tsx @@ -1,3 +1,4 @@ +import { cJoin } from "helpers/className"; import { Immutable } from "helpers/types"; interface Props { @@ -5,9 +6,13 @@ interface Props { } export function HorizontalLine(props: Immutable): JSX.Element { + const { className } = props; return (
); } diff --git a/src/components/Ico.tsx b/src/components/Ico.tsx index ef97111..420fb8d 100644 --- a/src/components/Ico.tsx +++ b/src/components/Ico.tsx @@ -1,3 +1,4 @@ +import { cJoin } from "helpers/className"; import { Immutable } from "helpers/types"; import { MouseEventHandler } from "react"; @@ -10,7 +11,13 @@ interface Props { export function Ico(props: Immutable): JSX.Element { const { onClick, icon, className } = props; return ( - + {icon} ); diff --git a/src/components/Inputs/Button.tsx b/src/components/Inputs/Button.tsx index 90a78ac..b9e4e33 100644 --- a/src/components/Inputs/Button.tsx +++ b/src/components/Inputs/Button.tsx @@ -1,4 +1,5 @@ import { Ico, Icon } from "components/Ico"; +import { cIf, cJoin } from "helpers/className"; import { Immutable } from "helpers/types"; import { useRouter } from "next/router"; import { MouseEventHandler } from "react"; @@ -38,14 +39,18 @@ export function Button(props: Immutable): JSX.Element { draggable={draggable} id={id} onClick={onClick} - className={`component-button group grid select-none grid-flow-col place-content-center - place-items-center gap-2 rounded-full border-[1px] border-dark px-4 pt-[0.4rem] pb-[0.5rem] - text-dark transition-all ${ - active - ? "!border-black bg-black text-light drop-shadow-black-lg" - : `cursor-pointer hover:bg-dark hover:text-light hover:drop-shadow-shade-lg + className={cJoin( + `component-button group grid select-none grid-flow-col place-content-center + place-items-center gap-2 rounded-full border-[1px] border-dark py-3 px-4 leading-none + text-dark transition-all`, + cIf( + active, + "!border-black bg-black text-light drop-shadow-black-lg", + `cursor-pointer hover:bg-dark hover:text-light hover:drop-shadow-shade-lg active:border-black active:bg-black active:text-light active:drop-shadow-black-lg` - } ${className}`} + ), + className + )} > {badgeNumber && (
): JSX.Element {

{badgeNumber}

)} - {icon && } + {icon && ( + + )} {text &&

{text}

}
); diff --git a/src/components/Inputs/ButtonGroup.tsx b/src/components/Inputs/ButtonGroup.tsx index feea83a..d721788 100644 --- a/src/components/Inputs/ButtonGroup.tsx +++ b/src/components/Inputs/ButtonGroup.tsx @@ -1,3 +1,4 @@ +import { cJoin } from "helpers/className"; import { Immutable } from "helpers/types"; import { useEffect, useRef } from "react"; @@ -31,7 +32,7 @@ export function ButtonGroup(props: Immutable): JSX.Element { }, [children]); return ( -
+
{children}
); diff --git a/src/components/Inputs/LanguageSwitcher.tsx b/src/components/Inputs/LanguageSwitcher.tsx index 6d152e7..d14a49a 100644 --- a/src/components/Inputs/LanguageSwitcher.tsx +++ b/src/components/Inputs/LanguageSwitcher.tsx @@ -1,5 +1,6 @@ import { Icon } from "components/Ico"; import { AppStaticProps } from "graphql/getAppStaticProps"; +import { cJoin } from "helpers/className"; import { prettyLanguage } from "helpers/formatters"; import { Immutable } from "helpers/types"; import { Dispatch, Fragment, SetStateAction } from "react"; @@ -20,7 +21,7 @@ export function LanguageSwitcher(props: Immutable): JSX.Element { return ( +
{[...locales].map(([locale, value], index) => ( {locale && ( diff --git a/src/components/Inputs/PageSelector.tsx b/src/components/Inputs/PageSelector.tsx index 099499e..dd90bcc 100644 --- a/src/components/Inputs/PageSelector.tsx +++ b/src/components/Inputs/PageSelector.tsx @@ -1,4 +1,5 @@ import { Icon } from "components/Ico"; +import { cJoin } from "helpers/className"; import { Immutable } from "helpers/types"; import { Dispatch, SetStateAction } from "react"; import { Button } from "./Button"; @@ -11,10 +12,10 @@ interface Props { } export function PageSelector(props: Immutable): JSX.Element { - const { page, setPage, maxPage } = props; + const { page, setPage, maxPage, className } = props; return ( -
+