38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import type { JSX } from 'solid-js';
|
|
import { For } from 'solid-js';
|
|
|
|
import type { Toast } from '@/primitives/createToasts';
|
|
import { linkButton } from './styles';
|
|
|
|
interface Props {
|
|
toasts: Toast[];
|
|
onDismiss: (id: number) => void;
|
|
}
|
|
|
|
/** The toasts, stacked in the bottom right corner with the newest lowest. */
|
|
export function ToastList(props: Props): JSX.Element {
|
|
return (
|
|
// The stack lets clicks through to the page; only the toasts take them.
|
|
<div class="pointer-events-none fixed right-4 bottom-4 z-50 flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2">
|
|
<For each={props.toasts}>
|
|
{(toast) => (
|
|
<div
|
|
class="pointer-events-auto flex items-start justify-between gap-4 rounded-md border border-line bg-danger-soft px-3.5 py-2.5 text-danger shadow-[0_8px_24px_rgb(0_0_0/0.18)]"
|
|
role="alert"
|
|
>
|
|
<span>{toast.message}</span>
|
|
<button
|
|
type="button"
|
|
class={linkButton}
|
|
aria-label={`Dismiss: ${toast.message}`}
|
|
onClick={() => props.onDismiss(toast.id)}
|
|
>
|
|
Dismiss
|
|
</button>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</div>
|
|
);
|
|
}
|