Tailwind CSS

Untuk mempermudah styling, kita akan menggunakan tailwindcss. Dengan tailwindcss, kita bisa membuat tampilan web yang responsif dan menarik dengan mudah. Jika Anda belum pernah menggunakan tailwindcss sebelumnya, Anda bisa menambahkannya ke proyek Sveltekit Anda dengan mengikuti petunjuk ini.

Membuat Store Notifikasi

Pertama-tama, kita akan membuat store untuk menyimpan notifikasi. Saya membuat file store dengan nama notify.ts di dalam folder src/lib/stores.

typescript 
        
import { writable } from "svelte/store";

const notify = writable<{
  message: string,
  type: 'success' | 'error' | 'info'
}[]>([]);

function setNotify(message: string, type: 'success' | 'error' | 'info') {
  notify.update((value) => [...value, { message, type }]);
}

function clearNotify() {
  notify.update((value) => value.slice(1));
}

function notifySuccess(message: string) {
  setNotify(message, 'success');
}

function notifyError(message: string) {
  setNotify(message, 'error');
}

function notifyInfo(message: string) {
  setNotify(message, 'info');
}

export { notify, clearNotify, notifySuccess, notifyError, notifyInfo };

Pada store di atas, kita membuat store notify yang berisi array notifikasi. Kita juga membuat fungsi setNotify untuk menambahkan notifikasi baru ke store, fungsi clearNotify untuk menghapus notifikasi pertama dari store, dan fungsi notifySuccess, notifyError, dan notifyInfo untuk menambahkan notifikasi dengan jenis tertentu ke store.

Membuat Komponen Notifikasi

Selanjutnya, kita akan membuat komponen notifikasi dengan nama Notification.svelte di dalam folder src/components.

html 
        
<script lang="ts">

import { notify, clearNotify } from "$lib/stores/notify";
import { fly } from 'svelte/transition';

let timeoutId: any;
$: {
  if ($notify.length > 0) {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
    
    timeoutId = setTimeout(() => {
      clearNotify();
    }, 3000);
  }
}
</script>

<div class="fixed bottom-7 w-full flex flex-col gap-1 text-sm text-white max-w-xs left-4 z-[5001]" id="toast-container">
  {#each $notify as { message, type }}
  <div transition:fly={{duration: 300,x:-500,y:0,opacity:0.5}} class="flex items-center p-4 {type === 'error' ? 'bg-red-700' : type === 'success' ? 'bg-green-700' : 'bg-blue-700'} rounded-lg shadow-lg">
    <div class="flex-shrink-0">
      {#if type === 'error'}
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
      {/if}
      {#if type === 'success'}
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg>
      {/if}
      {#if type === 'info'}
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
      {/if}
    </div>
    <p class="ms-3">{message}</p>
  </div>
  {/each}

</div>

Pada komponen di atas, kita mengimpor store notify dan fungsi clearNotify dari file notify.ts. Kita juga mengimpor fly dari svelte/transition untuk memberikan efek animasi ketika notifikasi muncul dan hilang. Kita menggunakan timeout untuk menghapus notifikasi setelah 3 detik. Notifikasi akan muncul di bagian bawah kiri layar dan akan memiliki warna berbeda sesuai dengan jenis notifikasi. Notifikasi error akan memiliki warna merah, notifikasi success akan memiliki warna hijau, dan notifikasi info akan memiliki warna biru.

Menggunakan Komponen Notifikasi

Terakhir, kita akan menggunakan komponen notifikasi ini. Anda bisa menambahkan komponen notifikasi di dalam file +layout.svelte di folder src/routes atau di dalam komponen lainnya.

html 
        
<script lang="ts">
import Notification from '$lib/components/Notification.svelte';
import { notifySuccess, notifyError, notifyInfo } from '$lib/stores/notify';
</script>

<!-- ... kode lainnya  -->
<Notification />
<!-- ... kode lainnya  -->

<button on:click={() => notifySuccess('Notifikasi sukses')}>Notifikasi Sukses</button>
<button on:click={() => notifyError('Notifikasi error')}>Notifikasi Error</button>
<button on:click={() => notifyInfo('Notifikasi info')}>Notifikasi Info</button>

Pada kode di atas, kita mengimpor komponen notifikasi dan fungsi notifySuccess, notifyError, dan notifyInfo dari file notify.ts. Kita juga menambahkan komponen notifikasi di dalam file +layout.svelte dan menambahkan tombol untuk menampilkan notifikasi sukses, error, dan info.

Sekarang, Anda sudah berhasil membuat notifikasi sederhana menggunakan Sveltekit. Anda bisa menyesuaikan tampilan notifikasi sesuai dengan kebutuhan Anda. Selamat mencoba!