I GOT COMPANY API DATA ON THE PAGE AHHHHHHH

2026-02-13 18:02:35 -06:00
parent 6b176196d3
commit 51db9de171
7 changed files with 600 additions and 9 deletions
@@ -0,0 +1,167 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  interface Props {
+    title?: string;
+    message?: string;
+    details?: unknown;
+  }
+
+  let {
+    title = "Something went wrong",
+    message = "An unexpected error occurred",
+    details,
+  }: Props = $props();
+  let showDetails = $state(false);
+
+  onMount(() => {
+    if (details) {
+      console.error("Error details:", details);
+    }
+  });
+
+  function toggleDetails() {
+    showDetails = !showDetails;
+  }
+
+  function retry() {
+    location.reload();
+  }
+</script>
+
+<div class="error-boundary">
+  <div class="error-content">
+    <div class="error-icon">⚠️</div>
+    <h2>{title}</h2>
+    <p>{message}</p>
+
+    {#if details}
+      <button class="details-toggle" on:click={toggleDetails}>
+        {showDetails ? "Hide" : "Show"} Error Details
+      </button>
+
+      {#if showDetails}
+        <details class="error-details" open>
+          <summary>Error Information</summary>
+          <pre><code>{JSON.stringify(details, null, 2)}</code></pre>
+        </details>
+      {/if}
+    {/if}
+
+    <div class="error-actions">
+      <button class="btn btn-primary" on:click={retry}>Retry</button>
+      <a href="/" class="btn btn-secondary">Go Home</a>
+    </div>
+  </div>
+</div>
+
+<style>
+  .error-boundary {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem;
+    background: #fff3cd;
+    border: 1px solid #ffc107;
+    border-radius: 8px;
+    margin: 2rem 0;
+  }
+
+  .error-content {
+    max-width: 600px;
+    text-align: center;
+  }
+
+  .error-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+  }
+
+  h2 {
+    margin: 0 0 0.5rem;
+    color: #d32f2f;
+    font-size: 1.5rem;
+  }
+
+  p {
+    color: #666;
+    margin: 0 0 1.5rem;
+    line-height: 1.6;
+  }
+
+  .details-toggle {
+    background: none;
+    border: 1px solid #ffc107;
+    color: #856404;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-bottom: 1rem;
+    font-size: 0.875rem;
+  }
+
+  .details-toggle:hover {
+    background: rgba(255, 193, 7, 0.1);
+  }
+
+  .error-details {
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 4px;
+    padding: 1rem;
+    margin: 1rem 0;
+    text-align: left;
+  }
+
+  .error-details summary {
+    cursor: pointer;
+    color: #0066cc;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+  pre {
+    background: #f5f5f5;
+    padding: 1rem;
+    border-radius: 4px;
+    overflow-x: auto;
+    font-size: 0.75rem;
+    margin: 0;
+  }
+
+  .error-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    margin-top: 1.5rem;
+  }
+
+  .btn {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1rem;
+    text-decoration: none;
+    display: inline-block;
+    transition: all 0.3s ease;
+  }
+
+  .btn-primary {
+    background: #0066cc;
+    color: white;
+  }
+
+  .btn-primary:hover {
+    background: #0052a3;
+  }
+
+  .btn-secondary {
+    background: #e5e7eb;
+    color: #111;
+  }
+
+  .btn-secondary:hover {
+    background: #d1d5db;
+  }
+</style>