63 lines
1.7 KiB
JavaScript
63 lines
1.7 KiB
JavaScript
import {
|
|
IconCircleCheck,
|
|
IconFaceIdError,
|
|
IconInfoCircle,
|
|
IconX,
|
|
} from '@tabler/icons-solidjs'
|
|
import { Show } from 'solid-js'
|
|
import { Dynamic } from 'solid-js/web'
|
|
|
|
const STATUS = Object.freeze(
|
|
new Proxy(
|
|
{
|
|
success: {
|
|
icon: IconCircleCheck,
|
|
color: 'text-green-500',
|
|
},
|
|
error: {
|
|
icon: IconFaceIdError,
|
|
color: 'text-red-500',
|
|
},
|
|
info: {
|
|
icon: IconInfoCircle,
|
|
color: 'text-blue-500',
|
|
},
|
|
},
|
|
{
|
|
get: (target, prop) =>
|
|
target[prop] ?? { icon: IconInfoCircle, color: 'text-blue-500' },
|
|
},
|
|
),
|
|
)
|
|
|
|
export default function Notify(props) {
|
|
return (
|
|
<div class="bg-white border border-slate-300 w-max h-20 shadow-lg rounded-md gap-4 p-4 flex flex-row items-center justify-center">
|
|
<section class="w-6 h-full flex flex-col items-center justify-start">
|
|
<Dynamic
|
|
component={STATUS[props.status].icon}
|
|
size={30}
|
|
class={STATUS[props.status].color}
|
|
/>
|
|
</section>
|
|
<section class="h-full flex flex-col items-start justify-end gap-1">
|
|
<Show when={props.title}>
|
|
<h1
|
|
class={`text-base font-semibold text-zinc-800 antialiased ${STATUS[props.status].color}`}
|
|
>
|
|
{props.title}
|
|
</h1>
|
|
</Show>
|
|
<p class="text-sm font-medium text-black antialiased">
|
|
{props.description}
|
|
</p>
|
|
</section>
|
|
<Show when={props.onClose}>
|
|
<section class="w-5 h-full flex flex-col items-center justify-start">
|
|
<IconX size={20} class="cursor-pointer" onclick={props.onClose} />
|
|
</section>
|
|
</Show>
|
|
</div>
|
|
)
|
|
}
|