@trail-ui/react
Version:
83 lines (81 loc) • 2.69 kB
JavaScript
// src/toast/toast.tsx
import { useRef } from "react";
import { useToastRegion } from "@react-aria/toast";
import { useToastState } from "@react-stately/toast";
import { CheckCircleIcon, ErrorIcon, InfoIcon, SettingsIcon, WarningIcon } from "@trail-ui/icons";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function ToastNotification({ children, ...props }) {
let state = useToastState({
maxVisibleToasts: 3
});
return /* @__PURE__ */ jsxs(Fragment, { children: [
children(state),
state.visibleToasts.length > 0 && /* @__PURE__ */ jsx(ToastRegion, { ...props, state })
] });
}
function ToastRegion({ state, ...props }) {
let ref = useRef(null);
let { regionProps } = useToastRegion(props, state, ref);
return /* @__PURE__ */ jsx(
"div",
{
...regionProps,
ref,
className: "toast-region fixed bottom-4 flex w-full flex-col items-center gap-2",
children: state.visibleToasts.map((toast) => /* @__PURE__ */ jsx(Toast, { toast, variant: props.variant }, toast.key))
}
);
}
function Toast({ variant, ...props }) {
let color;
let borderColor;
let flagIcon;
let bgColor;
switch (variant) {
case "default":
color = "text-neutral-900";
borderColor = "border-neutral-300";
flagIcon = /* @__PURE__ */ jsx(SettingsIcon, { height: 24, width: 24 });
bgColor = "bg-neutral-50";
break;
case "success":
color = "text-green-950";
borderColor = "border-green-950";
flagIcon = /* @__PURE__ */ jsx(CheckCircleIcon, { height: 24, width: 24 });
bgColor = "bg-green-50";
break;
case "error":
color = "text-red-950";
borderColor = "border-red-950";
flagIcon = /* @__PURE__ */ jsx(ErrorIcon, { height: 24, width: 24 });
bgColor = "bg-red-50";
break;
case "warning":
color = "text-yellow-950";
borderColor = "border-yellow-950";
flagIcon = /* @__PURE__ */ jsx(WarningIcon, { height: 24, width: 24 });
bgColor = "bg-yellow-50";
break;
case "info":
color = "text-blue-950";
borderColor = "border-blue-950";
flagIcon = /* @__PURE__ */ jsx(InfoIcon, { height: 24, width: 24 });
bgColor = "bg-blue-50";
break;
default:
break;
}
return /* @__PURE__ */ jsx(
"div",
{
className: `toast ${bgColor} ${color} ${borderColor} shadow-medium flex h-14 w-[370px] items-center rounded border-l-4 px-4 text-base`,
children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4 font-semibold", children: [
flagIcon,
props.toast.content
] }) })
}
);
}
export {
ToastNotification
};