63 lines
3.2 KiB
TypeScript
63 lines
3.2 KiB
TypeScript
import { Fragment, useState } from "react";
|
|
import { t as i18nT } from "i18next";
|
|
import { Transition } from "@headlessui/react";
|
|
import CheckEmptyCircle from "../icons/CheckEmptyCircleIcon";
|
|
import XIcon from "../icons/XIcon";
|
|
|
|
export default function NotificationSimple() {
|
|
const [show, setShow] = useState(true);
|
|
|
|
return (
|
|
<>
|
|
{/* Global notification live region, render this permanently at the end of the document */}
|
|
<div aria-live="assertive" className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
|
|
<div className="flex w-full flex-col items-center space-y-4 sm:items-end">
|
|
{/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
|
|
<Transition
|
|
show={show}
|
|
as={Fragment}
|
|
enter="transform ease-out duration-300 transition"
|
|
enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
|
|
enterTo="translate-y-0 opacity-100 sm:translate-x-0"
|
|
leave="transition ease-in duration-100"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
{/* Subframe Toast.Root layout: rounded-md, border-solid border-border-default, px-5 py-5, min/max width, shadow-lg. */}
|
|
<div className="bg-surface-neutral-primary pointer-events-auto w-full min-w-[384px] max-w-[448px] overflow-hidden rounded-md border border-solid border-border-default shadow-lg">
|
|
{/* Subframe header row: flex w-full items-start gap-3. */}
|
|
<div className="flex w-full items-start gap-3 px-5 py-5">
|
|
<div className="shrink-0">
|
|
<CheckEmptyCircle className="h-6 w-6 text-green-400" aria-hidden="true" />
|
|
</div>
|
|
{/* Subframe content column: grow shrink-0 basis-0 flex-col items-start gap-4. */}
|
|
<div className="flex grow shrink-0 basis-0 flex-col items-start gap-4">
|
|
<p className="text-text-neutral-primary text-body-default-medium-0 font-body-default-medium-0">
|
|
{i18nT("components.notifications.preview.savedTitle")}
|
|
</p>
|
|
<p className="text-text-neutral-tertiary text-body-default-regular-0 font-body-default-regular-0">
|
|
{i18nT("components.notifications.preview.savedDescription")}
|
|
</p>
|
|
</div>
|
|
{/* Subframe dismiss slot: flex items-center justify-center. */}
|
|
<div className="flex shrink-0 items-center justify-center">
|
|
<button
|
|
type="button"
|
|
className="hover:text-text-neutral-tertiary text-text-neutral-tertiary bg-surface-neutral-primary inline-flex rounded-md focus:shadow-focus focus:outline-hidden"
|
|
onClick={() => {
|
|
setShow(false);
|
|
}}
|
|
>
|
|
<span className="sr-only">{i18nT("shared.close")}</span>
|
|
<XIcon className="h-5 w-5" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|