mutiny-web/src/components/Toaster.tsx

import { Toast, toaster } from "@kobalte/core";
import { Portal } from "solid-js/web";
import close from "~/assets/icons/close.svg";
import { SmallHeader } from "./layout";

export function Toaster() {
    return (
        <Portal>
            <Toast.Region class="top-0 fixed flex gap-4 w-full justify-center safe-top safe-left safe-right safe-bottom">
                <Toast.List class="z-[9999] max-w-[100vw] w-[400px] mt-8 flex flex-col gap-4" />
            </Toast.Region>
        </Portal>
    )
}

type ToastArg = { title: string, description: string } | Error

export function showToast(arg: ToastArg) {
    if (arg instanceof Error) {
        return toaster.show(props => (
            <ToastItem title="Error" description={arg.message} isError {...props} />
        ))
    } else {
        return toaster.show(props => (
            <ToastItem title={arg.title} description={arg.description} {...props} />
        ))
    }
}

export function ToastItem(props: { toastId: number, title: string, description: string, isError?: boolean }) {
    return (
        <Toast.Root toastId={props.toastId} class={`w-[80vw] max-w-[400px] p-4 bg-neutral-900/80 backdrop-blur-md shadow-xl rounded-xl border ${props.isError ? "border-m-red/50" : "border-white/10"} `}>
            <div class="flex gap-4 w-full justify-between">
                <div>
                    <Toast.Title>
                        <SmallHeader>
                            {props.title}
                        </SmallHeader>
                    </Toast.Title>
                    <Toast.Description>
                        <p>
                            {props.description}
                        </p>
                    </Toast.Description>
                </div>
                <Toast.CloseButton class="hover:bg-white/10 rounded-lg active:bg-m-blue">
                    <img src={close} alt="Close" />
                </Toast.CloseButton>
            </div>
            {/* <Toast.ProgressTrack class="toast__progress-track">
                <Toast.ProgressFill class="toast__progress-fill" />
            </Toast.ProgressTrack> */}
        </Toast.Root>
    )
}