Skip to content

Instantly share code, notes, and snippets.

@chenkovsky

chenkovsky/Toast.tsx

Forked from davidjbeaver/Toast.tsx
Created April 11, 2024 06:45
Show Gist options
  • Save chenkovsky/b916a3720623d4d1724331fca453390f to your computer and use it in GitHub Desktop.
Save chenkovsky/b916a3720623d4d1724331fca453390f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @davidjbeaver davidjbeaver created this gist Nov 12, 2021.
    29 changes: 29 additions & 0 deletions Toast.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    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}>
    <i
    class="icon"
    classList={{
    "icon-check-circle": toast.toastType === ToastType.Success,
    "icon-x-circle": toast.toastType === ToastType.Error,
    "icon-alert-circle": toast.toastType === ToastType.Warning,
    "icon-info": toast.toastType === ToastType.Info,
    }}
    ></i>
    <span>{toast.message}</span>
    <button onClick={() => store.removeToast(toast.toastId)}>X</button>
    </div>
    )}
    </For>
    </div>
    );
    };

    export default Toast