Building Reusable UI Components

<!-- src/lib/ui/Button.svelte -->
<script>
  export let variant = &#039;primary'; // primary | secondary | danger | ghost
  export let size = &#039;md';         // sm | md | lg
  export let disabled = false;
  export let loading = false;
  export let type = &#039;button';

  const variantClasses = {
    primary: &#039;bg-indigo-600 hover:bg-indigo-700 text-white',
    secondary: &#039;bg-gray-100 hover:bg-gray-200 text-gray-800',
    danger: &#039;bg-red-500 hover:bg-red-600 text-white',
    ghost: &#039;hover:bg-gray-100 text-gray-700'
  };

  const sizeClasses = {
    sm: &#039;px-3 py-1.5 text-sm',
    md: &#039;px-4 py-2',
    lg: &#039;px-6 py-3 text-lg'
  };
</script>

<button
  {type}
  {disabled}
  class="inline-flex items-center gap-2 font-medium rounded-lg transition-colors
    {variantClasses[variant]} {sizeClasses[size]}
    {disabled ? &#039;opacity-50 cursor-not-allowed' : ''}"
  on:click
  {...$$restProps}
>
  {#if loading}
    <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
    </svg>
  {/if}
  <slot />
</button>

<!-- src/lib/ui/Input.svelte -->
<script>
  export let label = &#039;';
  export let value = &#039;';
  export let error = &#039;';
  export let hint = &#039;';
  export let type = &#039;text';
  export let placeholder = &#039;';
  export let required = false;
</script>

<div class="input-wrapper">
  {#if label}
    <label class="block text-sm font-medium text-gray-700 mb-1">
      {label} {#if required}<span class="text-red-500">*</span>{/if}
    </label>
  {/if}

  <input
    {type}
    {placeholder}
    {required}
    bind:value
    class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 transition-colors
      {error ? &#039;border-red-400 focus:ring-red-300' : 'border-gray-300 focus:ring-indigo-400'}"
    {...$$restProps}
    on:input
    on:blur
  />

  {#if error}
    <p class="text-red-500 text-sm mt-1">⚠️ {error}</p>
  {:else if hint}
    <p class="text-gray-500 text-sm mt-1">{hint}</p>
  {/if}
</div>

<!-- src/lib/ui/Modal.svelte -->
<script>
  import { fly, fade } from &#039;svelte/transition';
  export let open = false;
  export let title = &#039;';
  export let size = &#039;md'; // sm | md | lg | xl

  const sizeMap = { sm: &#039;max-w-sm', md: 'max-w-md', lg: 'max-w-lg', xl: 'max-w-xl' };

  function close() { open = false; }

  function handleKeydown(e) {
    if (e.key === &#039;Escape') close();
  }
</script>

<svelte:window on:keydown={handleKeydown} />

{#if open}
  <div class="fixed inset-0 z-50 flex items-center justify-center p-4" transition:fade={{ duration: 150 }}>
    <!-- Backdrop -->
    <div class="absolute inset-0 bg-black/50" on:click={close} />

    <!-- Dialog -->
    <div
      class="relative bg-white rounded-2xl shadow-2xl w-full {sizeMap[size]}"
      transition:fly={{ y: -20, duration: 200 }}
    >
      {#if title}
        <div class="flex items-center justify-between p-6 border-b">
          <h2 class="text-xl font-semibold">{title}</h2>
          <button class="text-gray-400 hover:text-gray-600 text-2xl leading-none" on:click={close}>✕</button>
        </div>
      {/if}

      <div class="p-6"><slot /></div>

      {#if $$slots.footer}
        <div class="flex items-center justify-end gap-3 p-6 border-t bg-gray-50 rounded-b-2xl">
          <slot name="footer" />
        </div>
      {/if}
    </div>
  </div>
{/if}

// src/lib/stores/toastStore.js
import { writable } from 'svelte/store';

export const toasts = writable([]);

export function toast(message, type = 'info', duration = 3000) {
  const id = Date.now();
  toasts.update(all => [...all, { id, message, type }]);
  setTimeout(() => toasts.update(all => all.filter(t => t.id !== id)), duration);
}

export const success = (msg) => toast(msg, 'success');
export const error = (msg) => toast(msg, 'error');
export const info = (msg) => toast(msg, 'info');

<!-- src/lib/ui/Toaster.svelte — Place in App.svelte -->
<script>
  import { fly } from &#039;svelte/transition';
  import { flip } from &#039;svelte/animate';
  import { toasts } from &#039;$lib/stores/toastStore.js';

  const typeClasses = {
    success: &#039;bg-green-500', error: 'bg-red-500', info: 'bg-indigo-500'
  };
  const typeIcons = { success: &#039;✅', error: '❌', info: 'ℹ️' };
</script>

<div class="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
  {#each $toasts as toast (toast.id)}
    <div
      class="flex items-center gap-3 text-white px-4 py-3 rounded-xl shadow-lg {typeClasses[toast.type]}"
      animate:flip={{ duration: 200 }}
      transition:fly={{ x: 100, duration: 300 }}
    >
      <span>{typeIcons[toast.type]}</span>
      <span>{toast.message}</span>
    </div>
  {/each}
</div>

<!-- Badge.svelte -->
<script>
  export let variant = &#039;gray'; // gray | green | red | yellow | blue | purple
  const styles = {
    gray: &#039;bg-gray-100 text-gray-700',
    green: &#039;bg-green-100 text-green-700',
    red: &#039;bg-red-100 text-red-700',
    yellow: &#039;bg-yellow-100 text-yellow-700',
    blue: &#039;bg-blue-100 text-blue-700',
    purple: &#039;bg-purple-100 text-purple-700'
  };
</script>

<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {styles[variant]}">
  <slot />
</span>