From 30beff7b674b5c76c1b96d8fafa7fc29dd4f4091 Mon Sep 17 00:00:00 2001
From: Pablo Hdez <62877300+pheralb@users.noreply.github.com>
Date: Thu, 16 Mar 2023 11:26:01 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=20Create=20container,=20search=20&?=
 =?UTF-8?q?=20svgCard=20components.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/container.svelte |  3 ++
 src/components/search.svelte    | 12 +++++
 src/components/svgCard.svelte   | 79 +++++++++++++++++++++++++++++++++
 3 files changed, 94 insertions(+)
 create mode 100644 src/components/container.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..0c2c197
--- /dev/null
+++ b/src/components/container.svelte
@@ -0,0 +1,3 @@
+<div class="container mx-auto pt-4">
+  <slot />
+</div>
diff --git a/src/components/search.svelte b/src/components/search.svelte
new file mode 100644
index 0000000..127c3bc
--- /dev/null
+++ b/src/components/search.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let searchTerm: string;
+</script>
+
+<input
+  type="text"
+  placeholder="Search..."
+  autocomplete="off"
+  class="w-full rounded-md border border-neutral-800 bg-neutral-700/10 p-3 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-700"
+  bind:value={searchTerm}
+  on:input
+/>
diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte
new file mode 100644
index 0000000..853b26c
--- /dev/null
+++ b/src/components/svgCard.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+  import download from 'downloadjs';
+  import toast from 'svelte-french-toast';
+  import type { iSVG } from '../types/svg';
+  import { MIMETYPE, getSvgContent } from '../utils/getSvgContent';
+
+  // Icons:
+  import DownloadSimple from 'phosphor-svelte/lib/DownloadSimple';
+  import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
+  import Copy from 'phosphor-svelte/lib/Copy';
+
+  // Props:
+  export let svgInfo: iSVG;
+
+  // Download SVG:
+  const downloadSvg = (url?: string) => {
+    download(url || '');
+    toast('Downloading', {
+      icon: '🎉',
+      style: 'border-radius: 200px; background: #333; color: #fff;'
+    });
+  };
+
+  // Copy SVG to clipboard:
+  const copyToClipboard = async (url?: string) => {
+    const data = {
+      [MIMETYPE]: getSvgContent(url, true)
+    };
+    try {
+      const clipboardItem = new ClipboardItem(data);
+      await navigator.clipboard.write([clipboardItem]);
+    } catch (error) {
+      const content = (await getSvgContent(url, false)) as string;
+      await navigator.clipboard.writeText(content);
+    }
+    toast('Copied to clipboard', {
+      icon: '👏',
+      style: 'border-radius: 200px; background: #333; color: #fff;'
+    });
+  };
+</script>
+
+<div
+  class="flex flex-col items-center justify-center rounded-md border border-neutral-800 bg-neutral-700/10 p-4"
+>
+  <img src={svgInfo.route} alt={svgInfo.title} class="mb-4 mt-2 h-10" />
+  <div class="mb-3 flex flex-col items-center justify-center">
+    <p class="truncate text-[15px] font-medium">{svgInfo.title}</p>
+    <span class="text-sm lowercase text-neutral-500">{svgInfo.category}</span>
+  </div>
+  <div class="flex items-center space-x-1">
+    <button
+      title="Copy to clipboard"
+      on:click={() => {
+        copyToClipboard(svgInfo.route);
+      }}
+      class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
+    >
+      <Copy size={17} />
+    </button>
+    <button
+      title="Download"
+      on:click={() => {
+        downloadSvg(svgInfo.route);
+      }}
+      class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
+    >
+      <DownloadSimple size={17} />
+    </button>
+    <a
+      href={svgInfo.url}
+      title="Website"
+      target="_blank"
+      class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
+    >
+      <ArrowUpRight size={17} />
+    </a>
+  </div>
+</div>