thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: toast alert

Browse Source
This commit is contained in:
anmolsinghbhatia 2023-04-28 11:37:52 +05:30
parent 6d6478136a
commit 2b665626b4
1 changed files with 40 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
apps/app/components/toast-alert/index.tsx
View File

@ -1,14 +1,9 @@
import React from "react"; import React from "react";
// hooks // hooks
import {
CheckCircleIcon,
ExclamationTriangleIcon,
InformationCircleIcon,
XCircleIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// icons // icons
import { LinkIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { ErrorIcon, SuccessIcon } from "components/icons";
const ToastAlerts = () => { const ToastAlerts = () => {
const { alerts, removeAlert } = useToast(); const { alerts, removeAlert } = useToast();
@ -16,48 +11,60 @@ const ToastAlerts = () => {
if (!alerts) return null; if (!alerts) return null;
return ( return (
<div className="pointer-events-none fixed top-5 right-5 z-50 h-full w-80 space-y-5 overflow-hidden"> <div className="pointer-events-none fixed top-5 right-5 z-50 h-full w-96 space-y-5 overflow-hidden rounded-md">
{alerts.map((alert) => ( {alerts.map((alert) => (
<div className="relative overflow-hidden rounded-md text-white" key={alert.id}> <div
className="relative flex flex-col items-center justify-center gap-2 overflow-hidden rounded-md border-[2px] border-brand-surface-2 bg-brand-base px-4 py-3 text-sm text-brand-base shadow-md"
key={alert.id}
>
<div className="absolute top-1 right-1"> <div className="absolute top-1 right-1">
<button <button
type="button" type="button"
className="pointer-events-auto inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2" className="pointer-events-auto inline-flex rounded-md p-1.5 text-brand-secondary"
onClick={() => removeAlert(alert.id)} onClick={() => removeAlert(alert.id)}
> >
<span className="sr-only">Dismiss</span> <span className="sr-only">Dismiss</span>
<XMarkIcon className="h-5 w-5" aria-hidden="true" /> <XMarkIcon className="h-4 w-4" aria-hidden="true" />
</button> </button>
</div> </div>
<div {alert.type !== "info" ? (
className={`px-2 py-4 ${ <>
alert.type === "success" <div className="flex w-full items-center gap-2.5">
? "bg-[#06d6a0]"
: alert.type === "error"
? "bg-[#ef476f]"
: alert.type === "warning"
? "bg-[#e98601]"
: "bg-[#1B9aaa]"
}`}
>
<div className="flex items-center gap-x-3">
<div className="flex-shrink-0">
{alert.type === "success" ? ( {alert.type === "success" ? (
<CheckCircleIcon className="h-8 w-8" aria-hidden="true" /> <SuccessIcon className="h-4 w-4" />
) : alert.type === "error" ? ( ) : alert.type === "error" ? (
<XCircleIcon className="h-8 w-8" /> <ErrorIcon className="h-4 w-4" />
) : alert.type === "warning" ? (
<ExclamationTriangleIcon className="h-8 w-8" aria-hidden="true" />
) : ( ) : (
<InformationCircleIcon className="h-8 w-8" /> ""
)} )}
<p
className={`font-medium ${
alert.type === "success"
? "text-brand-base"
: alert.type === "error"
? "bg-[#ef476f]"
: alert.type === "warning"
? "bg-[#e98601]"
: "bg-[#1B9aaa]"
}`}
>
{alert.title}
</p>
</div> </div>
<div> <div className="flex w-full items-center justify-start text-brand-secondary">
<p className="font-semibold">{alert.title}</p> <p className="text-left">{alert.message}</p>
{alert.message && <p className="mt-1 text-xs">{alert.message}</p>}
</div> </div>
</>
) : (
<div className="flex w-full items-center justify-center gap-2.5 py-2 text-brand-secondary">
{alert.iconType === "copy" && (
<span>
<LinkIcon className="h-4 w-4" />
</span>
)}
<p className="font-medium italic">{alert.title}</p>
</div> </div>
</div> )}
</div> </div>
))} ))}
</div> </div>