Ahmed Al-Taiar
0283c293ef
All checks were successful
Publish Docker Image / Publish Docker Image (push) Successful in 39s
63 lines
1.6 KiB
TypeScript
Executable File
63 lines
1.6 KiB
TypeScript
Executable File
import { mdiCloseCircle, mdiCheckCircle, mdiClose } from '@mdi/js'
|
|
import { Icon } from '@mdi/react'
|
|
|
|
import { Toast, toast, ToastType } from '@redwoodjs/web/toast'
|
|
|
|
interface Props {
|
|
t: Toast
|
|
type: ToastType
|
|
message: string
|
|
}
|
|
|
|
const ToastNotification = ({ t, type, message }: Props) => {
|
|
let iconElement: React.JSX.Element
|
|
|
|
if (type === 'blank' || type === 'custom') iconElement = <></>
|
|
else if (type === 'loading')
|
|
iconElement = <span className="loading loading-spinner loading-md" />
|
|
else {
|
|
let icon: string
|
|
let color: string
|
|
|
|
switch (type) {
|
|
case 'success':
|
|
icon = mdiCheckCircle
|
|
color = 'text-success'
|
|
break
|
|
case 'error':
|
|
icon = mdiCloseCircle
|
|
color = 'text-error'
|
|
break
|
|
}
|
|
|
|
iconElement = <Icon path={icon} className={`w-8 ${color}`} />
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`${
|
|
t.visible ? 'animate-enter' : 'animate-leave'
|
|
} pointer-events-auto flex w-full max-w-64 items-center space-x-2 rounded-xl bg-base-200 p-2 shadow-xl ${
|
|
type === 'blank' ? 'first:space-x-0' : ''
|
|
}`}
|
|
>
|
|
<div className="flex flex-col items-center">{iconElement}</div>
|
|
<div className="flex-1">
|
|
<p className="hyphens-auto break-words font-inter">{message}</p>
|
|
</div>
|
|
{type !== 'loading' && (
|
|
<div className="flex flex-col items-center">
|
|
<button
|
|
onClick={() => toast.dismiss(t.id)}
|
|
className="btn btn-ghost btn-xs"
|
|
>
|
|
<Icon path={mdiClose} className="w-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ToastNotification
|