feat(toastify): make toastify components

- make toastify component for pop up message

Author: 1-Ujjwal

apps/client/src/app.css

@@ -13,6 +13,21 @@
   animation: rotate 10s ease-in-out infinite alternate;
 }
 
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in {
+  animation: slide-in 0.3s ease-in-out;
+}
+
 input[type='range'] {
   -webkit-appearance: none;
   appearance: none;

apps/client/src/components/toast.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  let { type, duration = 5000, children } = $props();
+
+  let bgColor = $state('');
+
+  if (type === 'success') bgColor = '#34D399';
+  else if (type === 'error') bgColor = '#FB7185';
+  else bgColor = '#38BDF8';
+</script>
+
+<div
+  class="relative rounded text-white bg-slate-900 min-w-sm min-h-20 p-2 custom-before animate-pop"
+  style="
+      --before-bg-color: {bgColor};
+      --animation-duration: {duration}ms;
+      --animation-duration-s: {duration / 1000}s;
+  "
+>
+  <strong>
+    <p>{@render children()}</p>
+    <span>{type}</span>
+  </strong>
+</div>
+
+<style>
+  @keyframes animate-width {
+    from {
+      width: 0%;
+    }
+    to {
+      width: 100%;
+    }
+  }
+
+  @keyframes animate-pop {
+    from {
+      transform: scale(0.8);
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+
+  .custom-before::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 4px;
+    width: 100%;
+    background-color: var(--before-bg-color);
+    animation: animate-width linear forwards;
+    animation-duration: var(--animation-duration-s);
+  }
+
+  .animate-pop {
+    animation: animate-pop linear forwards;
+    animation-duration: 0.2s;
+  }
+</style>

apps/client/src/routes/+layout.svelte

@@ -1,7 +1,17 @@
 <script lang="ts">
+  import Toast from '$components/toast.svelte';
+  import { ToastState } from '$states/toast.svelte';
   import '../app.css';
 
   let { children } = $props();
 </script>
 
+<div class="absolute z-10 flex flex-col bottom-2 right-2 gap-2">
+  {#each ToastState.queue as toast (toast.id)}
+    <Toast type={toast.type} duration={toast.duration}>
+      {toast.message}
+    </Toast>
+  {/each}
+</div>
+
 {@render children()}

apps/client/src/states/toast.svelte.ts

@@ -0,0 +1,36 @@
+// toast.svelte.ts
+export type ToastType = 'success' | 'error' | 'info';
+
+export interface IToastMessage {
+  id: number;
+  message: string;
+  type: ToastType;
+  duration: number;
+}
+
+export interface IToastState {
+  queue: IToastMessage[];
+}
+
+export const ToastState = $state<IToastState>({
+  queue: []
+});
+
+let toastId = 0;
+
+export function addToast(message: string, type: ToastType, duration: number = 5000) {
+  const id = toastId++;
+
+  const toast: IToastMessage = {
+    id,
+    message,
+    type,
+    duration
+  };
+
+  ToastState.queue.push(toast);
+
+  setTimeout(() => {
+    ToastState.queue.shift();
+  }, duration);
+}