70 lines
1.2 KiB
TypeScript
70 lines
1.2 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import Toast, { Toaster } from "react-hot-toast"
|
||
|
|
|
||
|
|
export type ToastType = "success" | "error" | "loading" | "default"
|
||
|
|
|
||
|
|
export type ToastProps = {
|
||
|
|
id?: string
|
||
|
|
type: ToastType
|
||
|
|
message: string
|
||
|
|
duration?: number
|
||
|
|
icon?: string
|
||
|
|
style?: React.CSSProperties
|
||
|
|
className?: string
|
||
|
|
loading?: boolean
|
||
|
|
loadingProgress?: number
|
||
|
|
}
|
||
|
|
|
||
|
|
export const useToasts = () => {
|
||
|
|
const setToast = (toast: ToastProps) => {
|
||
|
|
const { type, message, ...rest } = toast
|
||
|
|
if (toast.id) {
|
||
|
|
Toast.dismiss(toast.id)
|
||
|
|
}
|
||
|
|
|
||
|
|
switch (type) {
|
||
|
|
case "success":
|
||
|
|
Toast.success(message, rest)
|
||
|
|
break
|
||
|
|
case "error":
|
||
|
|
Toast.error(message, rest)
|
||
|
|
break
|
||
|
|
case "loading":
|
||
|
|
Toast.loading(message, rest)
|
||
|
|
break
|
||
|
|
default:
|
||
|
|
Toast(message, rest)
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return { setToast }
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Toasts = () => {
|
||
|
|
return (
|
||
|
|
<Toaster
|
||
|
|
position="bottom-right"
|
||
|
|
toastOptions={{
|
||
|
|
error: {
|
||
|
|
style: {
|
||
|
|
background: "var(--warning)",
|
||
|
|
color: "#fff"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
success: {
|
||
|
|
style: {
|
||
|
|
background: "var(--light-gray)",
|
||
|
|
color: "var(--fg)"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
iconTheme: {
|
||
|
|
primary: "var(--fg)",
|
||
|
|
secondary: "var(--bg)"
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|