File size: 774 Bytes
78b5416
246efdb
78b5416
246efdb
 
 
 
 
 
 
 
 
 
78b5416
 
 
bea2d0b
 
 
 
246efdb
 
bea2d0b
 
 
 
 
 
78b5416
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script lang="ts">
  let { message = $bindable() }: { message: string } = $props();

  let timeout = $state(0);
  $effect(() => {
    if (message !== "") {
      console.log("message", message);
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        message = "";
      }, 5000);
    }
  });
</script>

{#if message}
  <div role="alert" class="fixed right-0 top-0 m-4">
    <button
      type="button"
      class="w-full"
      onclick={() => (message = "")}
      onkeydown={(e) => e.key === "Enter" && (message = "")}
    >
      <div class="rounded bg-red-800 p-4 text-white">
        {message}
      </div>
      <div class="bar transition-all duration-500" style="width: 0;"></div>
    </button>
  </div>
{/if}

<style lang="postcss" scoped>
</style>