davidjbeaver

import { nanoid } from "nanoid";
import { createStore } from "solid-js/store"
import { ToastObject, ToastType } from "./types";

const [toastStore, updateToastStore] = createStore({
    toasts: [] as ToastObject[]
})

const addToast = (toastType: ToastType, message: string) => {
    const toastId = nanoid();

davidjbeaver

export type ToastObject = {
    toastId: string;
    toastType: ToastType,
    message: string
}

export enum ToastType {
    Success = "is-success",
    Error = "is-error",
    Warning = "is-warning",

davidjbeaver

import { For } from "solid-js";
import store from "./store";
import { ToastObject, ToastType } from "./types";

const Toast = () => {
  return (
    <div class="toast-container">
      <For each={store.toastStore.toasts}>
        {(toast: ToastObject) => (
          <div class="toast" className={toast.toastType}>

davidjbeaver

:root {
  --primary-blue: #3b82f6;
  --primary-red: #ef4444;
  --primary-green: #059669;
  --primary-yellow: #f59e0b;
}

.toast-container {
  position: fixed;
  top: 1.5em;