feat: add CardFull, CardMiddle, CardSmall, Grid, and List components for logo display; refactor Preview page to use CardFull

src/components/Grid.svelte

@@ -0,0 +1,41 @@
+<script>
+  import CardSquare from './CardMiddle.svelte';
+
+  export let logos = [];
+  export let onCopy;
+  export let onDownload;
+  export let setSearchQuery;
+  export let allLogos = [];
+
+  export let theme;
+</script>
+
+<div class="logo-grid">
+  {#each logos as logo}
+    <CardSquare
+      {logo}
+      {theme}
+      {onCopy}
+      {onDownload}
+      {setSearchQuery}
+      {allLogos}
+    />
+  {:else}
+    <p class="no-results">No logos found matching your search criteria.</p>
+  {/each}
+</div>
+
+<style>
+  .logo-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 1.5rem;
+  }
+
+  .no-results {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 2rem;
+    color: #666;
+  }
+</style>

src/components/List.svelte

@@ -1,6 +1,6 @@
 <script>
-  import CardList from './CardList.svelte';
-  import CardSquare from './CardSquare.svelte';
+  import CardSmall from './CardSmall.svelte';
+  import CardMiddle from './CardMiddle.svelte';
   import { getDefaultLogoColor } from '../utils/colorTheme.js';
 
   export let logos = [];
@@ -18,7 +18,7 @@
 <div class={`logos-container ${viewMode}-view`}>
   {#each logos as logo}
     {#if viewMode === "grid"}
-      <CardSquare
+      <CardMiddle
         {logo}
         {theme}
         {onCopy}
@@ -28,7 +28,7 @@
         {setTheme}
       />
     {:else}
-      <CardList
+      <CardSmall
         {logo}
         {theme}
         {onCopy}

src/components/RouteHeader.svelte

@@ -1,116 +0,0 @@
-<script>
-    export let searchQuery = "";
-    export let setSearchQuery = () => {};
-    export const viewMode = "grid";
-    // eslint-disable-next-line
-    export let theme = "system";
-    export let setTheme = () => {};
-
-    function onInput(event) {
-        searchQuery = event.target.value;
-        setSearchQuery(searchQuery);
-        // Update URL with search param
-        const params = new URLSearchParams(window.location.search);
-        if (searchQuery) {
-            params.set("search", searchQuery);
-        } else {
-            params.delete("search");
-        }
-        const newUrl =
-            window.location.pathname +
-            (params.toString() ? "?" + params.toString() : "");
-        history.replaceState(null, "", newUrl);
-    }
-</script>
-
-<header class="main-header">
-    <div class="header-row">
-        <div class="header-title">
-            <h1>Logo Gallery</h1>
-        </div>
-
-        <div class="theme-switcher">
-            <div class="theme-switch-group">
-                <button
-                    on:click={() => setTheme("system")}
-                    class:active={theme === "system"}
-                    aria-label="System theme"
-                >
-                    System
-                </button>
-                <button
-                    on:click={() => setTheme("light")}
-                    class:active={theme === "light"}
-                    aria-label="Light mode"
-                >
-                    Light
-                </button>
-                <button
-                    on:click={() => setTheme("dark")}
-                    class:active={theme === "dark"}
-                    aria-label="Dark mode"
-                >
-                    Dark
-                </button>
-            </div>
-        </div>
-    </div>
-    <div class="header-row">
-        <div class="search-bar">
-            <input
-                type="text"
-                placeholder="Search logos..."
-                bind:value={searchQuery}
-                on:input={onInput}
-                aria-label="Search logos"
-            />
-        </div>
-    </div>
-</header>
-
-<style>
-    .main-header {
-        padding: 1rem;
-        background: var(--color-card);
-        border-bottom: 1px solid var(--color-border);
-        margin-bottom: 1rem;
-    }
-
-    .header-row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 1rem;
-    }
-
-    .header-title h1 {
-        margin: 0;
-    }
-
-    .search-bar input {
-        width: 100%;
-        padding: 0.5rem;
-        border: 1px solid var(--color-border);
-        border-radius: 4px;
-        background: var(--color-bg);
-        color: var(--color-text);
-    }
-
-    .theme-switch-group {
-        display: flex;
-        gap: 0.5rem;
-    }
-
-    button {
-        padding: 0.5rem 1rem;
-        background: var(--color-bg);
-        border: 1px solid var(--color-border);
-        border-radius: 4px;
-        cursor: pointer;
-    }
-
-    button.active {
-        background: var(--color-accent);
-        color: white;
-    }
-</style>

src/pages/Preview.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount } from 'svelte';
-  import PreviewComponent from '../components/Preview.svelte';
+  import CardFull from '../components/CardFull.svelte';
   import Footer from '../components/Footer.svelte';
   import { push } from 'svelte-spa-router';
 
@@ -70,7 +70,7 @@
   </div>
 
   <div class="preview-container">
-    <PreviewComponent logo={logo} {theme} {onDownload} show={true} {setTheme} />
+    <CardFull logo={logo} {theme} {onDownload} show={true} {setTheme} />
   </div>
 
   <Footer />