121 lines
2.9 KiB
TypeScript
121 lines
2.9 KiB
TypeScript
import React from "react";
|
|
|
|
import ErrorIcon from "./ErrorIcon/ErrorIcon";
|
|
|
|
import styles from "./Toast.module.scss";
|
|
|
|
export type ToastVariant = "error" | "success" | "warning" | "info";
|
|
|
|
interface IToastProps {
|
|
variant: ToastVariant;
|
|
children: React.ReactNode;
|
|
classNameContainer?: string;
|
|
classNameToast?: string;
|
|
onClose?: () => void;
|
|
}
|
|
|
|
const getIcon = (variant: ToastVariant) => {
|
|
switch (variant) {
|
|
case "error":
|
|
return <ErrorIcon />;
|
|
case "success":
|
|
return (
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<circle
|
|
cx="12"
|
|
cy="12"
|
|
r="11"
|
|
strokeWidth={1.5}
|
|
stroke="currentColor"
|
|
/>
|
|
<path
|
|
d="M8 12L11 15L16 9"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
case "warning":
|
|
return (
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path
|
|
d="M12 2L2 20H22L12 2Z"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
fill="none"
|
|
/>
|
|
<path
|
|
d="M12 9V13"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
strokeLinecap="round"
|
|
/>
|
|
<circle cx="12" cy="17" r="1" fill="currentColor" />
|
|
</svg>
|
|
);
|
|
case "info":
|
|
return (
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<circle
|
|
cx="12"
|
|
cy="12"
|
|
r="11"
|
|
strokeWidth={1.5}
|
|
stroke="currentColor"
|
|
/>
|
|
<path
|
|
d="M12 8V12"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d="M12 16H12.01"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
};
|
|
|
|
function Toast({
|
|
variant,
|
|
children,
|
|
classNameContainer = "",
|
|
classNameToast = "",
|
|
onClose,
|
|
}: IToastProps) {
|
|
return (
|
|
<div className={`${styles.container} ${classNameContainer}`}>
|
|
<div className={`${styles.toast} ${styles[variant]} ${classNameToast}`}>
|
|
{getIcon(variant)}
|
|
<div className={styles.content}>{children}</div>
|
|
{onClose && (
|
|
<button
|
|
onClick={onClose}
|
|
className={styles.closeButton}
|
|
aria-label="Закрыть уведомление"
|
|
type="button"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
<path
|
|
d="M12 4L4 12M4 4L12 12"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Toast;
|