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,119 @@
+<script>
+  import { goto } from "$app/navigation";
+  import ErrorBoundary from "$lib/../components/ErrorBoundary.svelte";
+
+  export let data;
+  export let error;
+
+  function signOut() {
+    goto("/logout");
+  }
+</script>
+
+<svelte:head>
+  <title>Company Detail — App</title>
+</svelte:head>
+
+<header class="header container">
+  <h1>Company Detail</h1>
+  <nav>
+    <a href="/companies">Companies</a>
+    <a href="/">Home</a>
+    <button on:click={signOut}>Sign out</button>
+  </nav>
+</header>
+
+<main class="container">
+  {#if error}
+    <ErrorBoundary
+      title="Failed to Load Company"
+      message={error.message ||
+        "We couldn't load the company details. Please try again."}
+      details={error}
+    />
+  {:else}
+    <section>
+      <h2>API Response</h2>
+      <pre><code>{JSON.stringify(data.company, null, 2)}</code></pre>
+    </section>
+  {/if}
+</main>
+
+<style>
+  :global(body) {
+    margin: 0;
+    font-family:
+      system-ui,
+      -apple-system,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial;
+    background: #f7f7f8;
+    color: #111;
+  }
+
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem;
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #e5e7eb;
+    background: #fff;
+  }
+
+  nav {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  nav a,
+  nav button {
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+    color: #0066cc;
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-size: 1rem;
+  }
+
+  nav a:hover,
+  nav button:hover {
+    text-decoration: underline;
+  }
+
+  main {
+    padding: 2rem 1rem;
+  }
+
+  section {
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 2rem;
+  }
+
+  h2 {
+    margin-top: 0;
+  }
+
+  pre {
+    background-color: #f5f5f5;
+    padding: 1rem;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 0;
+  }
+
+  code {
+    font-family: "Courier New", monospace;
+    font-size: 0.875rem;
+  }
+</style>