lazydns 0.3.20

A light and fast DNS server/forwarder implementation in Rust
Documentation
<script lang="ts">
  import { notifications, darkMode } from "../lib/stores";

  function getIcon(type: string) {
    switch (type) {
      case "success":
        return "✓";
      case "error":
        return "✕";
      case "warning":
        return "⚠";
      default:
        return "ℹ";
    }
  }

  function getBgColor(type: string, isDark: boolean) {
    if (isDark) {
      switch (type) {
        case "success":
          return "bg-green-900/90 border-green-700";
        case "error":
          return "bg-red-900/90 border-red-700";
        case "warning":
          return "bg-yellow-900/90 border-yellow-700";
        default:
          return "bg-blue-900/90 border-blue-700";
      }
    } else {
      switch (type) {
        case "success":
          return "bg-green-50 border-green-300";
        case "error":
          return "bg-red-50 border-red-300";
        case "warning":
          return "bg-yellow-50 border-yellow-300";
        default:
          return "bg-blue-50 border-blue-300";
      }
    }
  }

  function getIconColor(type: string, isDark: boolean) {
    if (isDark) {
      switch (type) {
        case "success":
          return "text-green-400";
        case "error":
          return "text-red-400";
        case "warning":
          return "text-yellow-400";
        default:
          return "text-blue-400";
      }
    } else {
      switch (type) {
        case "success":
          return "text-green-600";
        case "error":
          return "text-red-600";
        case "warning":
          return "text-yellow-600";
        default:
          return "text-blue-600";
      }
    }
  }
</script>

<div class="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
  {#each $notifications as notification (notification.id)}
    <div
      class="flex items-center gap-3 px-4 py-3 rounded-lg border backdrop-blur-sm shadow-xl animate-slide-in {getBgColor(
        notification.type,
        $darkMode,
      )}"
      role="alert"
    >
      <span class="text-lg {getIconColor(notification.type, $darkMode)}"
        >{getIcon(notification.type)}</span
      >
      <span class="text-sm {$darkMode ? 'text-white' : 'text-gray-800'}"
        >{notification.message}</span
      >
      <button
        on:click={() => notifications.remove(notification.id)}
        aria-label="Close notification"
        class="ml-2 transition-colors {$darkMode
          ? 'text-gray-400 hover:text-white'
          : 'text-gray-500 hover:text-gray-900'}"
      >
        <svg
          class="w-4 h-4"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>
  {/each}
</div>

<style>
  @keyframes slide-in {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .animate-slide-in {
    animation: slide-in 0.3s ease-out;
  }
</style>