54 lines
1.7 KiB
JavaScript
54 lines
1.7 KiB
JavaScript
import { useTranslation } from 'next-i18next'
|
|
import toastMethod from 'react-hot-toast'
|
|
import { OkIcon, NoIcon, TipIcon, WarningIcon, ChatIcon } from 'shared/components/icons.mjs'
|
|
|
|
const icons = {
|
|
success: <OkIcon className="w-6 h-6 text-success" />,
|
|
error: <NoIcon className="w-6 h-6 text-error" />,
|
|
info: <TipIcon className="w-6 h-6 text-info" />,
|
|
warning: <WarningIcon className="w-6 h-6 text-warning" />,
|
|
accent: <ChatIcon className="w-6 h-6 text-accent" />,
|
|
}
|
|
|
|
const Toast = ({ type = 'info', children }) => (
|
|
<div className={`w-64 alert shadow bg-base-100 p-0`}>
|
|
<div
|
|
className={`w-full m-0 bg-${type} p-4 border bg-opacity-30 rounded-lg flex flex-row items-center`}
|
|
>
|
|
{icons[type]}
|
|
<div>{children}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
/* Custom toast methods */
|
|
const toastMethods = (t) => ({
|
|
info: (children) => toastMethod.custom(<Toast type="info">{children}</Toast>),
|
|
warning: (children) => toastMethod.custom(<Toast type="warning">{children}</Toast>),
|
|
error: (children) => toastMethod.custom(<Toast type="error">{children}</Toast>),
|
|
accent: (children) => toastMethod.custom(<Toast type="accent">{children}</Toast>),
|
|
success: (children) => toastMethod.custom(<Toast type="success">{children}</Toast>),
|
|
for: {
|
|
settingsSaved: () =>
|
|
toastMethod.custom(
|
|
<Toast type="success">
|
|
<span>{t('settingsSaved')}</span>
|
|
</Toast>
|
|
),
|
|
backendError: () =>
|
|
toastMethod.custom(
|
|
<Toast type="error">
|
|
<span>{t('backendError')} ¯\_(ツ)_/¯</span>
|
|
</Toast>
|
|
),
|
|
},
|
|
})
|
|
|
|
/*
|
|
* The toast hook
|
|
*/
|
|
export function useToast() {
|
|
const { t } = useTranslation(['toast'])
|
|
|
|
return toastMethods(t)
|
|
}
|