Got all options working for copying and downloading

package.json

@@ -16,7 +16,7 @@
     "postcss-loader": "^2.1.1",
     "purgecss-webpack-plugin": "^1.4.0",
     "style-loader": "^0.20.3",
-    "tailwindcss": "^1.4.5",
+    "tailwindcss": "^1.6.0",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.3.0",
     "webpack-dev-server": "^3.2.1"

src/index.html

@@ -31,7 +31,7 @@
           x-ref="searchField"
           x-model="search"
           x-on:keydown.window.prevent.slash="$refs.searchField.focus()"
-          placeholder="Search 420 System UIcons"
+          x-bind:placeholder="'Search ' + myForData.length + ' System UIcons'"
           type="text"
           name="search"
           value=""
@@ -45,40 +45,48 @@
       <div
         class="flex flex-col space-y-4 md:space-y-0 md:flex-row border-t border-gray-300 bg-white py-4 px-8 sticky top-0 z-10"
       >
-        <label
-          class="inline-flex items-center cursor-pointer rounded px-2 text-sm lg:text-base hover:bg-gray-900 hover:text-white"
-        >
-          <input
-            type="radio"
-            class="form-radio"
-            name="clickType"
-            value="copy"
-            checked
-          />
-          <span class="ml-2">Copy SVG Code</span>
-        </label>
-        <label
-          class="inline-flex items-center md:ml-2 lg:ml-4 cursor-pointer rounded px-2 text-sm lg:text-base hover:bg-gray-900 hover:text-white"
-        >
-          <input
-            type="radio"
-            class="form-radio"
-            name="clickType"
-            value="link"
-          />
-          <span class="ml-2">Copy CDN Link</span>
-        </label>
-        <label
-          class="inline-flex items-center md:ml-2 lg:ml-4 cursor-pointer rounded px-2 text-sm lg:text-base hover:bg-gray-900 hover:text-white"
-        >
-          <input
-            type="radio"
-            class="form-radio"
-            name="clickType"
-            value="download"
-          />
-          <span class="ml-2">Download SVGs</span>
-        </label>
+        <div class="bg-gray-200 p-1 rounded">
+          <label
+            class="inline-flex h-full items-center cursor-pointer rounded px-2 text-sm lg:text-base hover:bg-gray-900"
+            :class="downloadType === 'copy-svg' ? 'bg-white shadow' : 'text-blue-500 hover:text-blue-800'"
+          >
+            <input
+              type="radio"
+              class="form-radio"
+              name="copy-svg"
+              x-model="downloadType"
+              :value="'copy-svg'"
+              checked
+            />
+            <span class="ml-2">Copy SVG Code</span>
+          </label>
+          <label
+            class="inline-flex h-full items-center md:ml-2 lg:ml-4 cursor-pointer rounded px-2 text-sm lg:text-base hover:bg-gray-900 hover:text-white"
+            :class="downloadType === 'copy-cdn' ? 'bg-white shadow' : 'text-blue-500 hover:text-blue-800'"
+          >
+            <input
+              type="radio"
+              class="form-radio"
+              name="copy-cdn"
+              x-model="downloadType"
+              :value="'copy-cdn'"
+            />
+            <span class="ml-2">Copy CDN Link</span>
+          </label>
+          <label
+            class="inline-flex h-full items-center md:ml-2 lg:ml-4 cursor-pointer rounded px-2 text-sm lg:text-base hover:bg-gray-900 hover:text-white"
+            :class="downloadType === 'download-svg' ? 'bg-white shadow' : 'text-blue-500 hover:text-blue-800'"
+          >
+            <input
+              type="radio"
+              class="form-radio"
+              name="download-svg"
+              x-model="downloadType"
+              :value="'download-svg'"
+            />
+            <span class="ml-2">Download SVGs</span>
+          </label>
+        </div>
         <button
           class="flex flex-row items-center ml-auto p-3 rounded bg-black text-white text-sm lg:text-base hover:bg-gray-900 w-full md:w-auto"
         >
@@ -115,8 +123,16 @@
       >
         <template x-for="(item, index) in filteredIcons" :key="index">
           <a
-            href="#"
+            href=""
+            x-bind:href="document.location.protocol +
+            '//' +
+            document.location.host +
+            `/images/` +
+            item.icon_path +
+            `.svg`"
+            x-bind:download="downloadType === 'download-svg' && item.icon_name"
             class="flex flex-col relative items-center group justify-center text-gray-700 rounded shadow hover:shadow-xl bg-white cursor-pointer transition duration-150 ease-in-out h-48"
+            @click="handleClick(item, downloadType, $event)"
           >
             <img
               :src="`images/` + item.icon_path + `.svg`"
@@ -1258,6 +1274,7 @@
       function loadIcons() {
         return {
           search: "",
+          downloadType: "copy-svg",
           myForData: sourceData,
           get filteredIcons() {
             if (this.search === "") {
@@ -1269,6 +1286,32 @@
                 .includes(this.search.toLowerCase());
             });
           },
+          handleClick(item, downloadType, event) {
+            console.log(item.icon_name, downloadType);
+            if (downloadType === "copy-svg") {
+              event.preventDefault();
+              var url =
+                document.location.protocol +
+                "//" +
+                document.location.host +
+                `/images/` +
+                item.icon_path +
+                `.svg`;
+              fetch(url).then(function (response) {
+                if (response.ok) {
+                  response.text().then(function (svg) {
+                    navigator.clipboard.writeText(svg);
+                  });
+                }
+              });
+            }
+            if (downloadType === "copy-cdn") {
+              event.preventDefault();
+              var url =
+                document.location.host + `/images/` + item.icon_path + `.svg`;
+              navigator.clipboard.writeText(url);
+            }
+          },
         };
       }
     </script>

tailwind.config.js

@@ -9,6 +9,7 @@ module.exports = {
   },
   variants: {
     scale: ["responsive", "hover", "focus", "group-hover"],
+    backgroundColor: ["responsive", "hover", "focus", "focus-within"],
   },
   plugins: [
     // Some useful comment

yarn.lock

@@ -786,10 +786,10 @@ chalk@^2.4.1, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.0.0.tgz#6e98081ed2d17faab615eb52ac66ec1fe6209e72"
-  integrity sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==
+"chalk@^3.0.0 || ^4.0.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
+  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
   dependencies:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
@@ -4943,16 +4943,16 @@ svgo@^0.7.0:
     sax "~1.2.1"
     whet.extend "~0.9.9"
 
-tailwindcss@^1.4.5:
-  version "1.4.6"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.4.6.tgz#17b37166ccda08d7e7f9ca995ea48ce1e0089700"
-  integrity sha512-qV0qInUq1FWih39Bc5CWECdgObSzRrbjGD4ke4kAPSIq6WXrPhv0wwOcUWJgJ66ltT9j+XnSRYikG8WNRU/fTQ==
+tailwindcss@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.6.0.tgz#cdad8cdd225129ad41bff6aa607aa39ad6524593"
+  integrity sha512-UZEex5ebsQlCTIBjI0oZITL67HBjOrzMgA4ceLOf8mrBGquLSn7LsO92do1nBSBZBV2Qqpivz9QUwT3zMSQkMA==
   dependencies:
     "@fullhuman/postcss-purgecss" "^2.1.2"
     autoprefixer "^9.4.5"
     browserslist "^4.12.0"
     bytes "^3.0.0"
-    chalk "^4.0.0"
+    chalk "^3.0.0 || ^4.0.0"
     color "^3.1.2"
     detective "^5.2.0"
     fs-extra "^8.0.0"