Accords-Library-Archive/accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Created a component for popup windows

Browse Source
This commit is contained in:
DrMint 2022-03-06 03:44:09 +01:00
parent 40dc0eb57c
commit c1f78fc04d
2 changed files with 51 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/AppLayout.tsx
View File

@ -12,6 +12,7 @@ import { useMediaCoarse, useMediaMobile } from "hooks/useMediaQuery";
import ReactTooltip from "react-tooltip";
import { useAppLayout } from "contexts/AppLayoutContext";
import { ImageQuality } from "./Img";
import Popup from "./Popup";
type AppLayoutProps = {
subPanel?: React.ReactNode;
@ -218,37 +219,25 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
</Button>
</div>
{/* Language selection background */}
<div
className={`fixed bg-shade inset-0 transition-all duration-500 z-20 grid place-content-center ${
appLayout.languagePanelOpen
? "bg-opacity-60"
: "bg-opacity-0 pointer-events-none touch-none"
}`}
onClick={() => {
appLayout.setLanguagePanelOpen(false);
}}
<Popup
state={appLayout.languagePanelOpen}
setState={appLayout.setLanguagePanelOpen}
>
<div
className={`p-10 bg-light rounded-lg shadow-2xl shadow-shade grid gap-4 place-items-center transition-transform ${
appLayout.languagePanelOpen ? "scale-100" : "scale-0"
}`}
>
<h2 className="text-2xl">{props.langui.select_language}</h2>
<div className="flex flex-wrap flex-row gap-2">
{router.locales?.sort().map((locale) => (
<Button
key={locale}
active={locale === router.locale}
href={router.asPath}
locale={locale}
>
{prettyLanguage(locale)}
</Button>
))}
</div>
<h2 className="text-2xl">{props.langui.select_language}</h2>
<div className="flex flex-wrap flex-row gap-2">
{router.locales?.sort().map((locale) => (
<Button
key={locale}
active={locale === router.locale}
href={router.asPath}
locale={locale}
onClick={() => appLayout.setLanguagePanelOpen(false)}
>
{prettyLanguage(locale)}
</Button>
))}
</div>
</div>
</Popup>
<ReactTooltip
id="MainPanelTooltip"

33
src/components/Popup.tsx Normal file
View File

@ -0,0 +1,33 @@
import { Dispatch, SetStateAction } from "react";
export type PopupProps = {
setState: Dispatch<SetStateAction<boolean | undefined>>;
state?: boolean;
children: React.ReactNode;
};
export default function Popup(props: PopupProps): JSX.Element {
return (
<div
className={`fixed inset-0 z-20 grid place-content-center ${
props.state ? "" : "pointer-events-none touch-none"
}`}
>
<div
className={`fixed bg-shade inset-0 transition-all duration-500 ${
props.state ? "bg-opacity-60" : "bg-opacity-0"
}`}
onClick={() => {
props.setState(false);
}}
/>
<div
className={`p-10 bg-light rounded-lg shadow-2xl shadow-shade grid gap-4 place-items-center transition-transform ${
props.state ? "scale-100" : "scale-0"
}`}
>
{props.children}
</div>
</div>
);
}