devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added abandon popup

Browse Source
This commit is contained in:
Joao Ramos
2023-08-16 00:38:54 +01:00
parent 93a5bcf40f
commit cd71cf4833
7 changed files with 129 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/AbandonPopup.tsx Normal file
View File

@@ -0,0 +1,62 @@
import {Dialog, Transition} from "@headlessui/react";
import {Fragment} from "react";
import Button from "./Low/Button";
interface Props {
isOpen: boolean;
abandonPopupTitle: string;
abandonPopupDescription: string;
abandonConfirmButtonText: string;
onAbandon: Function;
onCancel: Function;
}
export default function AbandonPopup({
isOpen,
abandonPopupTitle,
abandonPopupDescription,
abandonConfirmButtonText,
onAbandon,
onCancel,
}: Props) {
return (
<Transition show={isOpen} as={Fragment}>
<Dialog onClose={onCancel} className="relative z-50">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0">
<div className="fixed inset-0 bg-black/30" />
</Transition.Child>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95">
<div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel className="w-full max-w-2xl h-fit p-8 rounded-xl bg-white flex flex-col gap-4">
<Dialog.Title className="font-bold text-xl">{abandonPopupTitle}</Dialog.Title>
<span>{abandonPopupDescription}</span>
<div className="w-full flex justify-between mt-8">
<Button color="purple" onClick={onCancel} variant="outline" className="max-w-[200px] self-end w-full">
Cancel
</Button>
<Button color="purple" onClick={onAbandon} className="max-w-[200px] self-end w-full">
{abandonConfirmButtonText}
</Button>
</div>
</Dialog.Panel>
</div>
</Transition.Child>
</Dialog>
</Transition>
);
}

14
src/components/FocusLayer.tsx
View File

@@ -1,3 +1,13 @@
export default function FocusLayer() {
return <div className="bg-gray-700 bg-opacity-30 absolute top-0 left-0 bottom-0 right-0" />
import {useEffect, useState} from "react";
interface Props {
onFocusLayerMouseEnter: Function,
}
export default function FocusLayer({
onFocusLayerMouseEnter,
}: Props) {
return (
<div className="bg-gray-700 bg-opacity-30 absolute top-0 left-0 bottom-0 right-0" onMouseEnter={onFocusLayerMouseEnter}/>
);
}

7
src/components/High/Layout.tsx
View File

@@ -10,16 +10,17 @@ interface Props {
className?: string;
navDisabled?: boolean;
focusMode?: boolean
onFocusLayerMouseEnter?: Function;
}
export default function Layout({user, children, className, navDisabled = false, focusMode = false}: Props) {
export default function Layout({user, children, className, navDisabled = false, focusMode = false, onFocusLayerMouseEnter }: Props) {
const router = useRouter();
return (
<main className="w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke">
<Navbar user={user} navDisabled={navDisabled} focusMode={focusMode} />
<Navbar user={user} navDisabled={navDisabled} focusMode={focusMode} onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
<div className="h-full w-full flex gap-2">
<Sidebar path={router.pathname} navDisabled={navDisabled} focusMode={focusMode} />
<Sidebar path={router.pathname} navDisabled={navDisabled} focusMode={focusMode} onFocusLayerMouseEnter={onFocusLayerMouseEnter}/>
<div
className={clsx(
"w-5/6 min-h-full h-fit mr-8 bg-white shadow-md rounded-2xl p-12 pb-8 flex flex-col gap-12 relative overflow-hidden mt-2",

5
src/components/Navbar.tsx
View File

@@ -9,10 +9,11 @@ interface Props {
user: User;
navDisabled?: boolean;
focusMode?: boolean;
onFocusLayerMouseEnter?: Function;
}
/* eslint-disable @next/next/no-img-element */
export default function Navbar({user, navDisabled = false, focusMode = false}: Props) {
export default function Navbar({user, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
const disableNavigation = preventNavigation(navDisabled, focusMode);
return (
@@ -25,7 +26,7 @@ export default function Navbar({user, navDisabled = false, focusMode = false}: P
<span className="text-right">{user.name}</span>
</Link>
</div>
{focusMode && <FocusLayer/>}
{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter}/>}
</header>
);
}

5
src/components/Sidebar.tsx
View File

@@ -14,6 +14,7 @@ interface Props {
path: string;
navDisabled?: boolean;
focusMode?: boolean;
onFocusLayerMouseEnter?: Function;
}
interface NavProps {
@@ -36,7 +37,7 @@ const Nav = ({Icon, label, path, keyPath, disabled = false}: NavProps) => (
</Link>
);
export default function Sidebar({path, navDisabled = false, focusMode = false }: Props) {
export default function Sidebar({path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
const router = useRouter();
const logout = async () => {
@@ -68,7 +69,7 @@ export default function Sidebar({path, navDisabled = false, focusMode = false }:
<RiLogoutBoxFill size={20} />
<span className="text-lg font-medium">Log Out</span>
</div>
{focusMode && <FocusLayer />}
{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
</section>
);
}