Initial commit

2026-01-12 08:17:17 -07:00
commit de5b6feef4
104 changed files with 12925 additions and 0 deletions
--- a/frontend-client/src/lib/components/Toast.svelte
+++ b/frontend-client/src/lib/components/Toast.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+  export let type: 'success' | 'error' | 'warning' | 'info' = 'info';
+  export let message: string;
+  export let duration: number = 5000;
+  export let dismissible: boolean = true;
+  
+  let visible = true;
+  let timeoutId: NodeJS.Timeout;
+  
+  // Auto-dismiss after duration
+  if (duration > 0) {
+    timeoutId = setTimeout(() => {
+      visible = false;
+    }, duration);
+  }
+  
+  function dismiss() {
+    if (timeoutId) clearTimeout(timeoutId);
+    visible = false;
+  }
+  
+  // Cleanup timeout on destroy
+  import { onDestroy } from 'svelte';
+  onDestroy(() => {
+    if (timeoutId) clearTimeout(timeoutId);
+  });
+  
+  // Style mapping
+  const typeStyles = {
+    success: {
+      container: 'bg-success-50 border-success-200 text-success-800',
+      icon: 'text-success-400'
+    },
+    error: {
+      container: 'bg-error-50 border-error-200 text-error-800',
+      icon: 'text-error-400'
+    },
+    warning: {
+      container: 'bg-warning-50 border-warning-200 text-warning-800',
+      icon: 'text-warning-400'
+    },
+    info: {
+      container: 'bg-blue-50 border-blue-200 text-blue-800',
+      icon: 'text-blue-400'
+    }
+  };
+  
+  // Icon mapping
+  const typeIcons = {
+    success: 'M5 13l4 4L19 7',
+    error: 'M6 18L18 6M6 6l12 12',
+    warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z',
+    info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+  };
+</script>
+
+{#if visible}
+  <div class="fixed top-4 right-4 max-w-sm w-full z-50 animate-slide-up">
+    <div class="rounded-lg border p-4 shadow-lg {typeStyles[type].container}">
+      <div class="flex items-start">
+        <div class="flex-shrink-0">
+          <svg 
+            class="h-5 w-5 {typeStyles[type].icon}" 
+            fill="none" 
+            stroke="currentColor" 
+            viewBox="0 0 24 24"
+          >
+            <path 
+              stroke-linecap="round" 
+              stroke-linejoin="round" 
+              stroke-width="2" 
+              d={typeIcons[type]}
+            />
+          </svg>
+        </div>
+        
+        <div class="ml-3 flex-1">
+          <p class="text-sm font-medium">
+            {message}
+          </p>
+        </div>
+        
+        {#if dismissible}
+          <div class="ml-4 flex-shrink-0">
+            <button
+              type="button"
+              class="inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 {typeStyles[type].icon} hover:opacity-75"
+              on:click={dismiss}
+            >
+              <span class="sr-only">Cerrar</span>
+              <svg class="h-4 w-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>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  @keyframes slide-up {
+    from {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  
+  .animate-slide-up {
+    animation: slide-up 0.3s ease-out;
+  }
+</style>