74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import Image from "next/image"
|
|
import { useState } from "react"
|
|
import useTranslation from "next-translate/useTranslation"
|
|
import classNames from "clsx"
|
|
|
|
import { Loader } from "../../design/Loader"
|
|
|
|
export interface ConfirmPopupProps {
|
|
className?: string
|
|
title: string
|
|
handleYes: () => void | Promise<void>
|
|
handleNo: () => void | Promise<void>
|
|
}
|
|
|
|
export const ConfirmPopup: React.FC<ConfirmPopupProps> = ({ ...props }) => {
|
|
const { t } = useTranslation()
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
|
|
const handleYesLoading = async (): Promise<void> => {
|
|
setIsLoading((isLoading) => {
|
|
return !isLoading
|
|
})
|
|
await props.handleYes()
|
|
}
|
|
|
|
return (
|
|
<div className={props.className}>
|
|
<Loader
|
|
className={classNames(
|
|
"absolute left-1/2 top-1/2 scale-0 transition-all",
|
|
{
|
|
"scale-100": isLoading,
|
|
},
|
|
)}
|
|
/>
|
|
<div
|
|
className={classNames(
|
|
"visible flex flex-col items-center opacity-100 transition-all",
|
|
{
|
|
"invisible opacity-0": isLoading,
|
|
},
|
|
)}
|
|
>
|
|
<Image
|
|
quality={100}
|
|
src="/images/svg/design/join-guild.svg"
|
|
alt="Illustration"
|
|
height={150}
|
|
width={150}
|
|
/>
|
|
<div className="mt-8 flex flex-col">
|
|
<h1 className="mb-6 text-center text-xl">{props.title}</h1>
|
|
<div className="flex gap-7">
|
|
<button
|
|
className="rounded-3xl bg-success px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75"
|
|
onClick={handleYesLoading}
|
|
data-cy="confirm-popup-yes-button"
|
|
>
|
|
{t("common:yes")}
|
|
</button>
|
|
<button
|
|
className="rounded-3xl bg-error px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75"
|
|
onClick={props.handleNo}
|
|
data-cy="confirm-popup-no-button"
|
|
>
|
|
{t("common:no")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|