Overview

• File: src/components/notificationBanner.svelte

NotificationBanner is a lightweight component designed to display temporary notifications or alerts to users. It features a slide animation and a dismissible interface.

Component Structure

Props

export let message = "";  // The notification message to display

Dependencies

import { X } from "@steeze-ui/heroicons";
import { Icon } from "@steeze-ui/svelte-icon";
import { slide } from "svelte/transition";

Features

1. Conditional Rendering

{#if message}
  <!-- Banner content -->
{/if}

2. Layout Structure

<div class="bg-orange-200/40 flex items-center justify-evenly py-2">
  <!-- Message Container -->
  <div class="space-y-1">
    <span>{message}</span>
  </div>

  <!-- Close Button -->
  <div>
    <button class="hover:bg-red-200 hover:text-red-500 p-1 rounded-[5px]">
      <Icon src={X} size="20" />
    </button>
  </div>
</div>

3. Animation

transition:slide

Styling

Container Styling

.bg-orange-200/40  /* Semi-transparent orange background */
.flex              /* Flexbox layout */
.items-center      /* Vertical centering */
.justify-evenly    /* Even spacing */
.py-2; /* Vertical padding */

Button Styling

.hover:bg-red-200  /* Red background on hover */
.hover:text-red-500 /* Red text on hover */
.p-1               /* Padding */
.rounded-[5px]     /* Rounded corners */

Usage Examples

Basic Usage

<NotificationBanner message="Your session will expire in 5 minutes" />

Dynamic Message

<script>
  let notificationMessage = "System maintenance scheduled";
</script>

<NotificationBanner message={notificationMessage} />

With Event Handling

<script>
  function handleDismiss() {
    // Handle dismiss action
  }
</script>

<NotificationBanner 
  message="Important update available"
  on:dismiss={handleDismiss}
/>