From 0da0ccfc374dd164b8293c3afcd431686b57dabb Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Mon, 25 Aug 2025 19:07:05 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Add=20new=20UI=20components:=20C?=
 =?UTF-8?q?ontainer,=20Grid,=20Header,=20ModeToggle,=20Search,=20SvgCard?=
 =?UTF-8?q?=20&=20CopySvg,=20DownloadSvg=20with=20improved=20functionality?=
 =?UTF-8?q?=20and=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/container.svelte     |  11 +
 src/components/copySvg.svelte       | 551 ++++++++++++++++++++++++++++
 src/components/downloadSvg.svelte   | 282 ++++++++++++++
 src/components/grid.svelte          |  16 +
 src/components/layout/header.svelte |  71 ++++
 src/components/modeToggle.svelte    |  26 ++
 src/components/search.svelte        |  88 +++++
 src/components/svgCard.svelte       | 213 +++++++++++
 8 files changed, 1258 insertions(+)
 create mode 100644 src/components/container.svelte
 create mode 100644 src/components/copySvg.svelte
 create mode 100644 src/components/downloadSvg.svelte
 create mode 100644 src/components/grid.svelte
 create mode 100644 src/components/layout/header.svelte
 create mode 100644 src/components/modeToggle.svelte
 create mode 100644 src/components/search.svelte
 create mode 100644 src/components/svgCard.svelte

diff --git a/src/components/container.svelte b/src/components/container.svelte
new file mode 100644
index 0000000..799d6d2
--- /dev/null
+++ b/src/components/container.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { cn } from "@/utils/cn";
+
+  let { className, children }: { className?: string; children?: Snippet } =
+    $props();
+</script>
+
+<div class={cn("container mx-auto px-4", className)}>
+  {@render children?.()}
+</div>
diff --git a/src/components/copySvg.svelte b/src/components/copySvg.svelte
new file mode 100644
index 0000000..55176dd
--- /dev/null
+++ b/src/components/copySvg.svelte
@@ -0,0 +1,551 @@
+<script lang="ts">
+  import type { iSVG } from "@/types/svg";
+
+  // Utils:
+  import { clipboard } from "@/utils/clipboard";
+  import { getPrefixFromSvgUrl, prefixSvgIds } from "@/utils/prefixSvgIds";
+  import { copyToClipboard as figmaCopyToClipboard } from "@/figma/copy-to-clipboard";
+
+  // Icons:
+  import XIcon from "@lucide/svelte/icons/x";
+  import CopyIcon from "@lucide/svelte/icons/copy";
+  import LoaderIcon from "@lucide/svelte/icons/loader";
+  import ClipboardIcon from "@lucide/svelte/icons/clipboard";
+
+  // UI Components:
+  import { toast } from "svelte-sonner";
+  import * as Tabs from "@/components/ui/tabs";
+  import { Button } from "@/components/ui/button";
+  import * as Popover from "@/components/ui/popover";
+
+  // Templates:
+  import { getSource } from "@/templates/getSource";
+  import { getVueCode } from "@/templates/getVueCode";
+  import { getReactCode } from "@/templates/getReactCode";
+  import { getAstroCode } from "@/templates/getAstroCode";
+  import { getSvelteCode } from "@/templates/getSvelteCode";
+  import { getAngularCode } from "@/templates/getAngularCode";
+  import { getWebComponent } from "@/templates/getWebComponent";
+
+  // SVGs:
+  import Vue from "@/components/logos/vue.svelte";
+  import React from "@/components/logos/react.svelte";
+  import Astro from "@/components/logos/astro.svelte";
+  import Svelte from "@/components/logos/svelte.svelte";
+  import Angular from "@/components/logos/angular.svelte";
+  import WebComponents from "@/components/logos/webComponents.svelte";
+
+  // Props:
+  interface Props {
+    size?: number;
+    iconStroke?: number;
+    isInFigma?: boolean;
+    isWordmarkSvg?: boolean;
+    svgInfo: iSVG;
+  }
+
+  let {
+    size = 24,
+    iconStroke = 2,
+    isInFigma = false,
+    isWordmarkSvg = false,
+    svgInfo,
+  }: Props = $props();
+
+  // States:
+  let optionsOpen = $state<boolean>(false);
+  let isLoading = $state<boolean>(false);
+
+  const getSvgUrl = () => {
+    let svgUrlToCopy;
+    const dark = document.documentElement.classList.contains("dark");
+
+    if (isWordmarkSvg) {
+      const svgHasTheme = typeof svgInfo.wordmark !== "string";
+      if (!svgHasTheme) {
+        svgUrlToCopy =
+          typeof svgInfo.wordmark === "string"
+            ? svgInfo.wordmark
+            : "Something went wrong. Couldn't copy the SVG.";
+      }
+
+      svgUrlToCopy =
+        typeof svgInfo.wordmark !== "string"
+          ? dark
+            ? svgInfo.wordmark?.dark
+            : svgInfo.wordmark?.light
+          : svgInfo.wordmark;
+    } else {
+      const svgHasTheme = typeof svgInfo.route !== "string";
+      if (!svgHasTheme) {
+        svgUrlToCopy =
+          typeof svgInfo.route === "string"
+            ? svgInfo.route
+            : "Something went wrong. Couldn't copy the SVG.";
+      }
+      svgUrlToCopy =
+        typeof svgInfo.route !== "string"
+          ? dark
+            ? svgInfo.route.dark
+            : svgInfo.route.light
+          : svgInfo.route;
+    }
+
+    return svgUrlToCopy;
+  };
+
+  // Copy SVG to clipboard:
+  const copyToClipboard = async () => {
+    const svgUrlToCopy = getSvgUrl();
+    optionsOpen = false;
+
+    let content = await getSource({
+      url: svgUrlToCopy,
+    });
+
+    if (svgUrlToCopy) {
+      content = prefixSvgIds(content, getPrefixFromSvgUrl(svgUrlToCopy));
+    }
+
+    if (isInFigma) {
+      figmaCopyToClipboard(content);
+    }
+
+    await clipboard(content);
+
+    const category = Array.isArray(svgInfo.category)
+      ? svgInfo.category.sort().join(" - ")
+      : svgInfo.category;
+
+    if (isInFigma) {
+      toast.success("Ready to paste in Figma", {
+        description: `${svgInfo.title} - ${category}`,
+      });
+      return;
+    }
+
+    if (isWordmarkSvg) {
+      toast.success("Copied wordmark SVG to clipboard", {
+        description: `${svgInfo.title} - ${category}`,
+      });
+      return;
+    }
+
+    toast.success("Copied to clipboard", {
+      description: `${svgInfo.title} - ${category}`,
+    });
+  };
+
+  // Convert SVG as React component:
+  const convertSvgReactComponent = async (tsx: boolean) => {
+    const svgUrlToCopy = getSvgUrl();
+    optionsOpen = false;
+
+    isLoading = true;
+
+    const title = svgInfo.title.split(" ").join("");
+    let content = await getSource({
+      url: svgUrlToCopy,
+    });
+
+    if (svgUrlToCopy) {
+      content = prefixSvgIds(content, getPrefixFromSvgUrl(svgUrlToCopy));
+    }
+
+    const dataComponent = { code: content, typescript: tsx, name: title };
+    const { data, error } = await getReactCode(dataComponent);
+
+    if (error || !data) {
+      toast.error("Failed to fetch React component", {
+        description: `${error ?? ""}`,
+        duration: 5000,
+      });
+      isLoading = false;
+      return;
+    }
+
+    await clipboard(data);
+
+    toast.success(`Copied as React ${tsx ? "TSX" : "JSX"} component`, {
+      description: `${svgInfo.title} - ${svgInfo.category}`,
+    });
+
+    isLoading = false;
+  };
+
+  // Copy SVG as Vue Component:
+  const convertSvgVueComponent = async (ts: boolean) => {
+    try {
+      const svgUrlToCopy = getSvgUrl();
+
+      optionsOpen = false;
+
+      let content = await getSource({
+        url: svgUrlToCopy,
+      });
+
+      if (svgUrlToCopy) {
+        content = prefixSvgIds(content, getPrefixFromSvgUrl(svgUrlToCopy));
+      }
+
+      const copyCode = getVueCode({
+        content: content,
+        lang: ts ? "ts" : "js",
+      });
+
+      if (copyCode) {
+        await clipboard(copyCode);
+      }
+
+      const category = Array.isArray(svgInfo?.category)
+        ? svgInfo.category.sort().join(" - ")
+        : svgInfo.category;
+
+      toast.success(`Copied as Vue ${ts ? "TS" : "JS"} component`, {
+        description: `${svgInfo?.title} - ${category}`,
+      });
+    } catch (err) {
+      console.error(`Error copying Vue component:`, err);
+      toast.error(`Failed to copy Vue component`);
+    }
+  };
+
+  // Copy SVG as Svelte Component:
+  const convertSvgSvelteComponent = async (ts: boolean) => {
+    try {
+      const svgUrlToCopy = getSvgUrl();
+
+      optionsOpen = false;
+
+      let content = await getSource({
+        url: svgUrlToCopy,
+      });
+
+      if (svgUrlToCopy) {
+        content = prefixSvgIds(content, getPrefixFromSvgUrl(svgUrlToCopy));
+      }
+
+      const copyCode = getSvelteCode({
+        content: content,
+        lang: ts ? "ts" : "js",
+      });
+
+      if (copyCode) {
+        await clipboard(copyCode);
+      }
+
+      const category = Array.isArray(svgInfo?.category)
+        ? svgInfo.category.sort().join(" - ")
+        : svgInfo.category;
+
+      toast.success(`Copied as Svelte ${ts ? "TS" : "JS"} component`, {
+        description: `${svgInfo?.title} - ${category}`,
+      });
+    } catch (err) {
+      console.error(`Error copying Svelte component:`, err);
+      toast.error(`Failed to copy Svelte component`);
+    }
+  };
+
+  // Copy SVG as Standalone Angular component:
+  const convertSvgAngularComponent = async () => {
+    isLoading = true;
+    optionsOpen = false;
+
+    const title = svgInfo.title.split(" ").join("");
+    const svgUrlToCopy = getSvgUrl();
+    let content = await getSource({
+      url: svgUrlToCopy,
+    });
+
+    if (svgUrlToCopy) {
+      content = prefixSvgIds(content, getPrefixFromSvgUrl(svgUrlToCopy));
+    }
+
+    if (!content) {
+      toast.error("Failed to fetch the SVG content", {
+        duration: 5000,
+      });
+      isLoading = false;
+      return;
+    }
+
+    const angularComponent = getAngularCode({
+      componentName: title,
+      svgContent: content,
+    });
+
+    await clipboard(angularComponent);
+
+    toast.success(`Copied as Standalone Angular component`, {
+      description: `${svgInfo.title} - ${svgInfo.category}`,
+    });
+
+    isLoading = false;
+  };
+
+  // Copy SVG as Web Component:
+  const convertSvgWebComponent = async () => {
+    isLoading = true;
+    optionsOpen = false;
+
+    const title = svgInfo.title.split(" ").join("");
+    const svgUrlToCopy = getSvgUrl();
+    let content = await getSource({
+      url: svgUrlToCopy,
+    });
+
+    if (svgUrlToCopy) {
+      content = prefixSvgIds(content, getPrefixFromSvgUrl(svgUrlToCopy));
+    }
+
+    if (!content) {
+      toast.error("Failed to fetch the SVG content", {
+        duration: 5000,
+      });
+      isLoading = false;
+      return;
+    }
+
+    const webComponentCode = getWebComponent({
+      name: title,
+      content: content,
+    });
+
+    await clipboard(webComponentCode);
+
+    toast.success(`Copied as Web Component`, {
+      description: `${svgInfo.title} - ${svgInfo.category}`,
+    });
+
+    isLoading = false;
+  };
+
+  // Copy SVG as Astro component:
+  const convertSvgAstroComponent = async () => {
+    isLoading = true;
+    optionsOpen = false;
+
+    const svgUrlToCopy = getSvgUrl();
+    let content = await getSource({
+      url: svgUrlToCopy,
+    });
+
+    if (svgUrlToCopy) {
+      content = prefixSvgIds(content, getPrefixFromSvgUrl(svgUrlToCopy));
+    }
+
+    if (!content) {
+      toast.error("Failed to fetch the SVG content", {
+        duration: 5000,
+      });
+      isLoading = false;
+      return;
+    }
+
+    const astroComponentCode = getAstroCode({
+      svgContent: content,
+    });
+
+    await clipboard(astroComponentCode);
+
+    toast.success(`Copied as Astro Component`, {
+      description: `${svgInfo.title} - ${svgInfo.category}`,
+    });
+
+    isLoading = false;
+  };
+</script>
+
+<Popover.Root bind:open={optionsOpen}>
+  <Popover.Trigger
+    title="Copy SVG element as svg file, React TSX code, or React JSX code"
+    class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+  >
+    {#if optionsOpen}
+      <XIcon {size} strokeWidth={iconStroke} />
+    {:else if isLoading}
+      <LoaderIcon {size} strokeWidth={iconStroke} class="animate-spin" />
+    {:else}
+      <CopyIcon {size} strokeWidth={iconStroke} />
+    {/if}
+  </Popover.Trigger>
+  <Popover.Content class="flex flex-col space-y-2 p-4" sideOffset={2}>
+    <Tabs.Root value="source" class="flex w-full flex-col space-y-1">
+      <Tabs.List>
+        <Tabs.Trigger value="source">Source</Tabs.Trigger>
+        <div
+          class="ml-3 flex flex-row space-x-0.5 border-l border-dashed border-neutral-200 pl-3 dark:border-neutral-800"
+        >
+          <Tabs.Trigger value="web-component" title="Web Component">
+            <WebComponents size={21} />
+          </Tabs.Trigger>
+          <Tabs.Trigger value="react" title="React">
+            <React size={20} />
+          </Tabs.Trigger>
+          <Tabs.Trigger value="vue" title="Vue">
+            <Vue size={20} />
+          </Tabs.Trigger>
+          <Tabs.Trigger value="svelte" title="Svelte">
+            <Svelte size={20} />
+          </Tabs.Trigger>
+          <Tabs.Trigger value="angular" title="Angular">
+            <Angular size={20} />
+          </Tabs.Trigger>
+          <Tabs.Trigger
+            value="astro"
+            title="Astro"
+            class="text-black dark:text-white"
+          >
+            <Astro size={21} />
+          </Tabs.Trigger>
+        </div>
+      </Tabs.List>
+      <!-- Source -->
+      <Tabs.Content value="source">
+        <section class="flex flex-col space-y-2">
+          <Button
+            variant="outline"
+            title={isWordmarkSvg
+              ? "Copy wordmark SVG to clipboard"
+              : "Copy SVG to clipboard"}
+            onclick={() => copyToClipboard()}
+          >
+            <ClipboardIcon size={16} strokeWidth={2} />
+            <span>Copy SVG</span>
+          </Button>
+        </section>
+      </Tabs.Content>
+      <!-- React -->
+      <Tabs.Content value="react">
+        <section class="flex flex-col space-y-2">
+          <Button
+            variant="outline"
+            title="Copy as React component"
+            disabled={isLoading}
+            onclick={() => convertSvgReactComponent(true)}
+          >
+            <React size={18} />
+            <span>Copy TSX</span>
+          </Button>
+          <Button
+            variant="outline"
+            title="Copy as React component"
+            disabled={isLoading}
+            onclick={() => convertSvgReactComponent(false)}
+          >
+            <React size={18} />
+            <span>Copy JSX</span>
+          </Button>
+        </section>
+      </Tabs.Content>
+      <!-- Svelte -->
+      <Tabs.Content value="svelte">
+        <section class="flex flex-col space-y-2">
+          <Button
+            variant="outline"
+            title="Copy as Svelte component"
+            disabled={isLoading}
+            onclick={() => convertSvgSvelteComponent(false)}
+          >
+            <Svelte size={18} />
+            <span>Copy JS</span>
+          </Button>
+
+          <Button
+            variant="outline"
+            title="Copy as Svelte component"
+            disabled={isLoading}
+            onclick={() => convertSvgSvelteComponent(false)}
+          >
+            <Svelte size={18} />
+            <span>Copy JS</span>
+          </Button>
+
+          <Button
+            variant="outline"
+            title="Copy as Svelte component"
+            disabled={isLoading}
+            onclick={() => convertSvgSvelteComponent(true)}
+          >
+            <Svelte size={18} />
+            <span>Copy TS</span>
+          </Button>
+        </section>
+      </Tabs.Content>
+      <!-- Vue -->
+      <Tabs.Content value="vue">
+        <section class="flex flex-col space-y-2">
+          <Button
+            variant="outline"
+            title="Copy as Vue component"
+            disabled={isLoading}
+            onclick={() => convertSvgVueComponent(false)}
+          >
+            <Vue size={18} />
+            <span>Copy JS</span>
+          </Button>
+          <Button
+            variant="outline"
+            title="Copy as Vue component"
+            disabled={isLoading}
+            onclick={() => convertSvgVueComponent(true)}
+          >
+            <Vue size={18} />
+            <span>Copy TS</span>
+          </Button>
+        </section>
+      </Tabs.Content>
+      <!-- Angular -->
+      <Tabs.Content value="angular">
+        <section class="flex flex-col space-y-2">
+          <Button
+            variant="outline"
+            title="Copy as Standalone Component"
+            disabled={isLoading}
+            onclick={() => convertSvgAngularComponent()}
+          >
+            <Angular size={18} />
+            <span>Copy Standalone Component</span>
+          </Button>
+        </section>
+      </Tabs.Content>
+      <!-- Web Component -->
+      <Tabs.Content value="web-component">
+        <section class="flex flex-col space-y-2">
+          <Button
+            variant="outline"
+            title="Copy as Web Component"
+            disabled={isLoading}
+            onclick={() => convertSvgWebComponent()}
+          >
+            <WebComponents size={18} />
+            <span>Copy Web Component</span>
+          </Button>
+        </section>
+      </Tabs.Content>
+      <!-- Astro -->
+      <Tabs.Content value="astro">
+        <section class="flex flex-col space-y-2">
+          <Button
+            variant="outline"
+            title="Copy as Astro Component"
+            disabled={isLoading}
+            onclick={() => convertSvgAstroComponent()}
+          >
+            <Astro size={18} />
+            <span>Copy Astro Component</span>
+          </Button>
+        </section>
+      </Tabs.Content>
+    </Tabs.Root>
+    <div
+      class="mt-1 flex w-full items-center text-center text-[12px] text-neutral-600 dark:text-neutral-400"
+    >
+      <p>
+        Remember to request permission from the creators for the use of the SVG.
+        Modification is not allowed.
+      </p>
+    </div>
+  </Popover.Content>
+</Popover.Root>
diff --git a/src/components/downloadSvg.svelte b/src/components/downloadSvg.svelte
new file mode 100644
index 0000000..d22e22f
--- /dev/null
+++ b/src/components/downloadSvg.svelte
@@ -0,0 +1,282 @@
+<script lang="ts">
+  import type { iSVG } from "@/types/svg";
+
+  import { toast } from "svelte-sonner";
+  import DownloadIcon from "@lucide/svelte/icons/download";
+
+  // Utils:
+  import { cn } from "@/utils/cn";
+  import { downloadAllVariants, downloadSvg } from "@/utils/downloadSvg";
+
+  // Components:
+  import * as Dialog from "@/components/ui/dialog";
+  import { Button, buttonVariants } from "@/components/ui/button";
+
+  // Props:
+  interface Props {
+    svgInfo: iSVG;
+    isDarkTheme: () => boolean;
+  }
+  let { svgInfo, isDarkTheme }: Props = $props();
+
+  // Shared:
+  let iconSize = 16;
+  let iconStroke = 2;
+  let cardDownloadStyles =
+    "flex w-full h-full flex-col p-4 rounded-md shadow-sm dark:bg-neutral-800/20 bg-neutral-200/10 border border-neutral-200 dark:border-neutral-800 space-y-2";
+
+  // Functions:
+  const handleDownloadSvg = async (url?: string) => {
+    const result = await downloadSvg({
+      url: url!,
+    });
+
+    const category = Array.isArray(svgInfo.category)
+      ? svgInfo.category.sort().join(" - ")
+      : svgInfo.category;
+
+    if (result) {
+      toast.success(`Downloading...`, {
+        description: `${svgInfo.title} - ${category}`,
+      });
+    } else {
+      toast.error(`Error downloading SVG`, {
+        description: `${svgInfo.title} - ${category}`,
+      });
+    }
+  };
+
+  const handleDownloadAllVariants = async ({
+    lightRoute,
+    darkRoute,
+    isWordmark,
+  }: {
+    lightRoute: string;
+    darkRoute: string;
+    isWordmark?: boolean;
+  }) => {
+    const result = await downloadAllVariants({
+      svgInfo,
+      lightRoute,
+      darkRoute,
+      isWordmark,
+    });
+
+    const category = Array.isArray(svgInfo.category)
+      ? svgInfo.category.sort().join(" - ")
+      : svgInfo.category;
+
+    if (result) {
+      toast.success("Downloading light & dark variants...", {
+        description: isWordmark
+          ? `${svgInfo.title} - Wordmark - ${category}`
+          : `${svgInfo.title} - ${category}`,
+      });
+    } else {
+      toast.error(`Error downloading SVG`, {
+        description: `${svgInfo.title} - ${category}`,
+      });
+    }
+  };
+</script>
+
+{#if typeof svgInfo.route === "string" && svgInfo.wordmark === undefined}
+  <Button
+    title="Download Light & Dark variants"
+    variant="ghost"
+    size="icon"
+    onclick={() => {
+      if (typeof svgInfo.route === "string") {
+        handleDownloadSvg(svgInfo.route);
+        return;
+      }
+    }}
+  >
+    <DownloadIcon size={iconSize} strokeWidth={iconStroke} />
+  </Button>
+{:else}
+  <Dialog.Root>
+    <Dialog.Trigger
+      title="Download SVG"
+      class={cn(buttonVariants({ variant: "ghost", size: "icon" }))}
+    >
+      <DownloadIcon size={iconSize} strokeWidth={iconStroke} />
+    </Dialog.Trigger>
+    <Dialog.Content class="max-w-[630px]">
+      <Dialog.Header>
+        <Dialog.Title>Download {svgInfo.title} SVG</Dialog.Title>
+        <Dialog.Description>
+          This logo has multiple options to download:
+        </Dialog.Description>
+      </Dialog.Header>
+      <div
+        class={cn(
+          "flex h-full flex-col space-y-2 pt-4 pb-0.5",
+          "md:flex-row md:items-center md:justify-center md:space-y-0 md:space-x-2",
+        )}
+      >
+        {#if typeof svgInfo.route === "string"}
+          <div class={cardDownloadStyles}>
+            <img
+              src={isDarkTheme() ? svgInfo.route : svgInfo.route}
+              alt={svgInfo.title}
+              class="my-4 h-8"
+            />
+            <Button
+              title="Download logo"
+              variant="outline"
+              onclick={() => {
+                if (typeof svgInfo.route === "string") {
+                  handleDownloadSvg(svgInfo.route);
+                  return;
+                }
+              }}
+            >
+              <DownloadIcon class="mr-2" size={iconSize} />
+              <p>Icon logo</p>
+            </Button>
+          </div>
+        {:else}
+          <div class={cardDownloadStyles}>
+            <img
+              src={isDarkTheme() ? svgInfo.route.dark : svgInfo.route.light}
+              alt={svgInfo.title}
+              class="my-4 h-10"
+            />
+            <Button
+              title="Logo with light & dark variants"
+              variant="outline"
+              onclick={() => {
+                if (typeof svgInfo.route !== "string") {
+                  handleDownloadAllVariants({
+                    lightRoute: svgInfo.route.light,
+                    darkRoute: svgInfo.route.dark,
+                  });
+                }
+              }}
+            >
+              <DownloadIcon size={iconSize} />
+              <p>Light & dark variants</p>
+            </Button>
+
+            <Button
+              title="Download light variant"
+              variant="outline"
+              onclick={() => {
+                if (typeof svgInfo.route !== "string") {
+                  handleDownloadSvg(svgInfo.route.light);
+                  return;
+                }
+              }}
+            >
+              <DownloadIcon class="mr-2" size={iconSize} />
+              <p>Only light variant</p>
+            </Button>
+
+            <Button
+              title="Download dark variant"
+              variant="outline"
+              onclick={() => {
+                if (typeof svgInfo.route !== "string") {
+                  handleDownloadSvg(svgInfo.route.dark);
+                  return;
+                }
+              }}
+            >
+              <DownloadIcon class="mr-2" size={iconSize} />
+              <p>Only dark variant</p>
+            </Button>
+          </div>
+        {/if}
+
+        {#if typeof svgInfo.wordmark === "string" && svgInfo.wordmark !== undefined}
+          <div class={cardDownloadStyles}>
+            <img
+              src={isDarkTheme() ? svgInfo.wordmark : svgInfo.wordmark}
+              alt={svgInfo.title}
+              class="my-4 h-8"
+            />
+            <Button
+              title="Download Wordmark logo"
+              variant="outline"
+              onclick={() => {
+                if (typeof svgInfo.wordmark === "string") {
+                  handleDownloadSvg(svgInfo.wordmark);
+                  return;
+                }
+              }}
+            >
+              <DownloadIcon class="mr-2" size={iconSize} />
+              <p>Wordmark logo</p>
+            </Button>
+          </div>
+        {/if}
+
+        {#if typeof svgInfo.wordmark !== "string" && svgInfo.wordmark !== undefined}
+          <div class={cardDownloadStyles}>
+            <img
+              src={isDarkTheme()
+                ? svgInfo.wordmark.dark
+                : svgInfo.wordmark.light}
+              alt={svgInfo.title}
+              class="my-4 h-10"
+            />
+            <Button
+              title="Download Wordmark light variant"
+              variant="outline"
+              onclick={() => {
+                if (typeof svgInfo.wordmark !== "string") {
+                  handleDownloadAllVariants({
+                    lightRoute: svgInfo.wordmark?.light || "",
+                    darkRoute: svgInfo.wordmark?.dark || "",
+                    isWordmark: true,
+                  });
+                  return;
+                }
+              }}
+            >
+              <DownloadIcon class="mr-2" size={iconSize} />
+              <p>Light & dark variants</p>
+            </Button>
+
+            <Button
+              title="Download Wordmark light variant"
+              variant="outline"
+              onclick={() => {
+                if (typeof svgInfo.wordmark !== "string") {
+                  handleDownloadSvg(svgInfo.wordmark?.light);
+                  return;
+                }
+              }}
+            >
+              <DownloadIcon class="mr-2" size={iconSize} />
+              <p>Wordmark light variant</p>
+            </Button>
+
+            <Button
+              title="Download Wordmark dark variant"
+              variant="outline"
+              onclick={() => {
+                if (typeof svgInfo.wordmark !== "string") {
+                  handleDownloadSvg(svgInfo.wordmark?.dark);
+                  return;
+                }
+              }}
+            >
+              <DownloadIcon class="mr-2" size={iconSize} />
+              <p>Wordmark dark variant</p>
+            </Button>
+          </div>
+        {/if}
+      </div>
+      <Dialog.Footer
+        class="mt-3 text-xs text-neutral-600 dark:text-neutral-400"
+      >
+        <p>
+          Remember to request permission from the creators for the use of the
+          SVG. Modification is not allowed.
+        </p>
+      </Dialog.Footer>
+    </Dialog.Content>
+  </Dialog.Root>
+{/if}
diff --git a/src/components/grid.svelte b/src/components/grid.svelte
new file mode 100644
index 0000000..47b3936
--- /dev/null
+++ b/src/components/grid.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { cn } from "@/utils/cn";
+
+  let { className, children }: { className?: string; children?: Snippet } =
+    $props();
+</script>
+
+<div
+  class={cn(
+    "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5",
+    className,
+  )}
+>
+  {@render children?.()}
+</div>
diff --git a/src/components/layout/header.svelte b/src/components/layout/header.svelte
new file mode 100644
index 0000000..a4cf878
--- /dev/null
+++ b/src/components/layout/header.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { cn } from "@/utils/cn";
+  import { globals } from "@/globals";
+  import { mode } from "mode-watcher";
+  import ModeToggle from "@/components/modeToggle.svelte";
+
+  import Svgl from "@/components/logos/svgl.svelte";
+  import Github from "@/components/logos/github.svelte";
+  import Twitter from "@/components/logos/twitter.svelte";
+
+  import Badge from "@/components/ui/badge/badge.svelte";
+  import { buttonVariants } from "@/components/ui/button";
+  import SendIcon from "@/components/ui/moving-icons/send-icon.svelte";
+
+  const headerItemsClasses = cn(
+    buttonVariants({ variant: "ghost" }),
+    "hover:bg-neutral-200 dark:hover:bg-neutral-800",
+  );
+</script>
+
+<header
+  class="sticky top-0 w-full bg-neutral-100 px-4 py-4 dark:bg-neutral-950"
+>
+  <nav class="flex w-full items-center justify-between">
+    <div class="flex items-center space-x-3">
+      <a
+        href="/"
+        class="flex items-center space-x-2.5 transition-colors hover:text-neutral-700 dark:hover:text-neutral-300"
+      >
+        <Svgl size={28} />
+        <h2 class="font-onest text-xl font-medium tracking-tight">svgl</h2>
+      </a>
+      <Badge variant="outline">{globals.currentVersion}</Badge>
+    </div>
+    <div class="flex items-center">
+      <div
+        class="mr-4 flex items-center space-x-0.5 border-r border-neutral-300 pr-3 dark:border-neutral-800"
+      >
+        <a
+          target="_blank"
+          title="X/Twitter"
+          href={globals.twitterUrl}
+          class={cn(headerItemsClasses, "h-9 w-9")}
+        >
+          <Twitter size={18} />
+        </a>
+        <a
+          target="_blank"
+          title="GitHub Repository"
+          href={globals.githubUrl}
+          class={cn(headerItemsClasses, "h-9 w-9")}
+        >
+          <Github size={20} />
+        </a>
+        <ModeToggle className={cn(headerItemsClasses, "h-9 w-9")} />
+      </div>
+      <a
+        target="_blank"
+        href={globals.submitUrl}
+        class={cn(
+          buttonVariants({
+            variant: mode.current === "dark" ? "default" : "radial",
+          }),
+        )}
+      >
+        <SendIcon size={14} />
+        <span>Submit</span>
+      </a>
+    </div>
+  </nav>
+</header>
diff --git a/src/components/modeToggle.svelte b/src/components/modeToggle.svelte
new file mode 100644
index 0000000..df67d73
--- /dev/null
+++ b/src/components/modeToggle.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import SunIcon from "@lucide/svelte/icons/sun";
+  import MoonIcon from "@lucide/svelte/icons/moon";
+
+  import { toggleMode } from "mode-watcher";
+
+  interface Props {
+    className?: string;
+  }
+
+  let { className }: Props = $props();
+</script>
+
+<button class={className} onclick={toggleMode} title="Mode Toggle">
+  <SunIcon
+    size={20}
+    strokeWidth={1.5}
+    class="scale-100 rotate-0 !transition-all dark:scale-0 dark:-rotate-90"
+  />
+  <MoonIcon
+    size={20}
+    strokeWidth={1.5}
+    class="absolute scale-0 rotate-90 !transition-all dark:scale-100 dark:rotate-0"
+  />
+  <span class="sr-only">Toggle theme</span>
+</button>
diff --git a/src/components/search.svelte b/src/components/search.svelte
new file mode 100644
index 0000000..8559ec6
--- /dev/null
+++ b/src/components/search.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { cn } from "@/utils/cn";
+  import { onMount } from "svelte";
+
+  import { page } from "$app/state";
+  import { goto } from "$app/navigation";
+
+  import SearchIcon from "@lucide/svelte/icons/search";
+  import CommandIcon from "@lucide/svelte/icons/command";
+  import { SvelteURLSearchParams } from "svelte/reactivity";
+
+  interface Props {
+    searchValue: string;
+    onSearch: (value: string) => void;
+    placeholder?: string;
+  }
+
+  let { searchValue, onSearch, placeholder }: Props = $props();
+  let inputElement: HTMLInputElement;
+
+  const onInput = (event: Event) => {
+    const param = "search";
+    const value = (event.target as HTMLInputElement).value;
+    onSearch(value);
+    const params = new SvelteURLSearchParams(page.url.searchParams);
+    if (value) {
+      params.set(param, value);
+    } else {
+      params.delete(param);
+    }
+    goto(`?${params.toString()}`, {
+      keepFocus: true,
+      noScroll: true,
+      replaceState: true,
+    });
+  };
+
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (event.ctrlKey && event.key === "k") {
+      event.preventDefault();
+      inputElement?.focus();
+    }
+  };
+
+  onMount(() => {
+    window.addEventListener("keydown", handleKeydown);
+    return () => {
+      window.removeEventListener("keydown", handleKeydown);
+    };
+  });
+</script>
+
+<div class="relative">
+  <SearchIcon
+    size={20}
+    strokeWidth={2}
+    class={cn(
+      "pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 transition-colors",
+      searchValue
+        ? "text-black dark:text-white"
+        : "text-neutral-400 dark:text-neutral-600",
+    )}
+  />
+  <input
+    bind:this={inputElement}
+    type="search"
+    autocomplete="off"
+    placeholder={placeholder || "Search..."}
+    oninput={onInput}
+    value={searchValue}
+    class={cn(
+      "overflow-hidden shadow-sm",
+      "w-full py-1.5 pr-3 pl-10",
+      "text-lg placeholder:text-neutral-400 dark:placeholder:text-neutral-400",
+      "bg-white dark:bg-neutral-900",
+      "rounded-md border border-neutral-200 dark:border-neutral-800",
+      "focus:border-neutral-400 focus:outline-none dark:focus:border-neutral-600",
+    )}
+  />
+  {#if !searchValue}
+    <div
+      class="absolute top-1/2 right-2 flex -translate-y-1/2 items-center space-x-1.5 rounded-md p-1 text-sm text-neutral-400 transition-colors hover:text-neutral-600"
+    >
+      <CommandIcon size={16} strokeWidth={1.5} />
+      <span class="select-none">K</span>
+    </div>
+  {/if}
+</div>
diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte
new file mode 100644
index 0000000..9816a96
--- /dev/null
+++ b/src/components/svgCard.svelte
@@ -0,0 +1,213 @@
+<script lang="ts">
+  import type { iSVG } from "@/types/svg";
+  import { cn } from "@/utils/cn";
+
+  // Icons:
+  import XIcon from "@lucide/svelte/icons/x";
+  import TagIcon from "@lucide/svelte/icons/tag";
+  import LinkIcon from "@lucide/svelte/icons/link";
+  import SparklesIcon from "@lucide/svelte/icons/sparkles";
+  import BaselineIcon from "@lucide/svelte/icons/baseline";
+  import PaletteIcon from "@lucide/svelte/icons/palette";
+  import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+
+  // UI Components:
+  import * as Popover from "@/components/ui/popover";
+  import { badgeVariants } from "@/components/ui/badge";
+  import { Button, buttonVariants } from "@/components/ui/button";
+
+  // Components:
+  import CopySvg from "@/components/copySvg.svelte";
+  import DownloadSvg from "@/components/downloadSvg.svelte";
+
+  // Props:
+  interface Props {
+    svgInfo: iSVG;
+  }
+
+  let { svgInfo }: Props = $props();
+
+  // States:
+  let wordmarkSvg = $state<boolean>(false);
+  let moreTagsOptions = $state<boolean>(false);
+
+  // Icon Stroke & Size:
+  let iconStroke = 1.8;
+  let iconSize = 16;
+  let maxVisibleCategories = 1;
+
+  // Global Styles:
+  const globalImageStyles = "mb-4 mt-2 h-10 select-none pointer-events-none";
+</script>
+
+<div
+  class={cn(
+    "group flex flex-col items-center justify-center p-4",
+    "rounded-md border border-neutral-200 dark:border-neutral-800",
+    "transition-colors duration-100 hover:bg-neutral-100/80 dark:hover:bg-neutral-800/20",
+  )}
+>
+  <!-- Image -->
+  {#if wordmarkSvg == true && svgInfo.wordmark !== undefined}
+    <img
+      class={cn("hidden dark:block", globalImageStyles)}
+      src={typeof svgInfo.wordmark !== "string"
+        ? svgInfo.wordmark?.dark || ""
+        : svgInfo.wordmark || ""}
+      alt={svgInfo.title}
+      title={svgInfo.title}
+      loading="lazy"
+    />
+    <img
+      class={cn("block dark:hidden", globalImageStyles)}
+      src={typeof svgInfo.wordmark !== "string"
+        ? svgInfo.wordmark?.light || ""
+        : svgInfo.wordmark || ""}
+      alt={svgInfo.title}
+      title={svgInfo.title}
+      loading="lazy"
+    />
+  {:else}
+    <img
+      class={cn("hidden dark:block", globalImageStyles)}
+      src={typeof svgInfo.route !== "string"
+        ? svgInfo.route.dark
+        : svgInfo.route}
+      alt={svgInfo.title}
+      title={svgInfo.title}
+      loading="lazy"
+    />
+    <img
+      class={cn("block dark:hidden", globalImageStyles)}
+      src={typeof svgInfo.route !== "string"
+        ? svgInfo.route.light
+        : svgInfo.route}
+      alt={svgInfo.title}
+      title={svgInfo.title}
+      loading="lazy"
+    />
+  {/if}
+  <!-- Title -->
+  <div class="mb-3 flex flex-col items-center justify-center space-y-1">
+    <p
+      class="truncate text-center text-[15px] font-medium text-balance select-all"
+    >
+      {svgInfo.title}
+    </p>
+    <div class="flex items-center justify-center space-x-1">
+      {#if Array.isArray(svgInfo.category)}
+        {#each svgInfo.category.slice(0, maxVisibleCategories) as c, index}
+          <a
+            href={`/directory/${c.toLowerCase()}`}
+            class={badgeVariants({ variant: "outline" })}
+            title={`This icon is part of the ${svgInfo.category} category`}
+          >
+            {c}
+          </a>
+        {/each}
+
+        {#if svgInfo.category.length > maxVisibleCategories}
+          <Popover.Root
+            open={moreTagsOptions}
+            onOpenChange={(isOpen) => (moreTagsOptions = isOpen)}
+          >
+            <Popover.Trigger
+              class={badgeVariants({ variant: "outline" })}
+              title="More Tags"
+            >
+              {#if moreTagsOptions}
+                <XIcon size={15} strokeWidth={1.5} />
+              {:else}
+                <EllipsisIcon size={15} strokeWidth={1.5} />
+              {/if}
+            </Popover.Trigger>
+            <Popover.Content class="flex flex-col space-y-2">
+              <p class="font-medium">More tags:</p>
+              {#each svgInfo.category.slice(maxVisibleCategories) as c}
+                <a
+                  href={`/directory/${c.toLowerCase()}`}
+                  class={cn(buttonVariants({ variant: "outline" }), "w-full")}
+                >
+                  <TagIcon size={15} strokeWidth={1.5} />
+                  <span>{c}</span>
+                </a>
+              {/each}
+            </Popover.Content>
+          </Popover.Root>
+        {/if}
+      {:else}
+        <a
+          href={`/directory/${svgInfo.category.toLowerCase()}`}
+          class={badgeVariants({ variant: "outline" })}
+        >
+          {svgInfo.category}
+        </a>
+      {/if}
+    </div>
+  </div>
+  <!-- Actions -->
+  <div class="flex items-center space-x-1">
+    {#if wordmarkSvg && svgInfo.wordmark !== undefined}
+      <CopySvg
+        size={iconSize}
+        {iconStroke}
+        {svgInfo}
+        isInFigma={false}
+        isWordmarkSvg={true}
+      />
+    {:else}
+      <CopySvg
+        size={iconSize}
+        {iconStroke}
+        {svgInfo}
+        isInFigma={false}
+        isWordmarkSvg={false}
+      />
+    {/if}
+
+    <DownloadSvg
+      {svgInfo}
+      isDarkTheme={() => {
+        const dark = document.documentElement.classList.contains("dark");
+        return dark;
+      }}
+    />
+
+    <a
+      href={svgInfo.url}
+      title="Website"
+      target="_blank"
+      rel="noopener noreferrer"
+      class={buttonVariants({ variant: "ghost" })}
+    >
+      <LinkIcon size={iconSize} strokeWidth={iconStroke} />
+    </a>
+    {#if svgInfo.wordmark !== undefined}
+      <Button
+        title={wordmarkSvg ? "Show logo SVG" : "Show wordmark SVG"}
+        onclick={() => {
+          wordmarkSvg = !wordmarkSvg;
+        }}
+        variant="ghost"
+        size="icon"
+      >
+        {#if wordmarkSvg}
+          <SparklesIcon size={iconSize} strokeWidth={iconStroke} />
+        {:else}
+          <BaselineIcon size={iconSize} strokeWidth={iconStroke} />
+        {/if}
+      </Button>
+    {/if}
+    {#if svgInfo.brandUrl !== undefined}
+      <a
+        href={svgInfo.brandUrl}
+        title="Brand Assets"
+        target="_blank"
+        rel="noopener noreferrer"
+        class={buttonVariants({ variant: "ghost" })}
+      >
+        <PaletteIcon size={iconSize} strokeWidth={iconStroke} />
+      </a>
+    {/if}
+  </div>
+</div>