refactor: moved all svgs to icon folder

Author: technikhil314

components/buttons/copyLink.vue

@@ -1,10 +1,27 @@
 <template>
   <div>
     <button
+      id="copyLinkButton"
       type="button"
-      class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow outline-none justify-self-end focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg copy-uri-button"
+      class="
+        inline-flex
+        items-center
+        justify-center
+        gap-1
+        p-2
+        text-sm
+        transition-transform
+        transform
+        rounded-md
+        shadow
+        outline-none
+        justify-self-end
+        focus:ring-4
+        active:scale-y-75
+        hover:scale-105 hover:shadow-lg
+        copy-uri-button
+      "
       aria-label="Click here to copy url to clipboard"
-      id="copyLinkButton"
       :class="{
         'bg-blue-500 text-white': !copied,
         'bg-green-500 text-gray-800': copied,
@@ -17,37 +34,11 @@
         role="status"
       >
         <span v-show="copied" class="inline" aria-hidden="true">
-          <svg
-            class="w-4 h-4"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
-            ></path>
-          </svg>
+          <Copied />
         </span>
         <span v-show="copied" class="hidden md:inline-block">Copied</span>
         <span v-show="!copied" class="inline" aria-hidden="true">
-          <svg
-            class="w-4 h-4"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
-            ></path>
-          </svg>
+          <Link />
         </span>
         <span v-show="!copied" class="hidden md:inline-block">Copy link</span>
       </span>
@@ -56,7 +47,10 @@
 </template>
 <script lang="ts">
 import Vue from 'vue'
+import Link from '~/components/icons/link.vue'
+import Copied from '~/components/icons/copied.vue'
 export default Vue.extend({
+  components: { Link, Copied },
   props: {
     clickHandler: {
       type: Function,

components/buttons/nextDiff.vue

@@ -2,39 +2,44 @@
   <div id="nextDiffSection" class="inline-flex items-center gap-1">
     <button
       id="nextDiff"
-      class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
+      class="
+        inline-flex
+        items-center
+        justify-center
+        px-1
+        py-1
+        text-sm text-gray-600
+        transition-transform
+        transform
+        bg-gray-300
+        border border-gray-800
+        rounded-sm
+        outline-none
+        dark:border-gray-400 dark:text-white dark:bg-gray-800
+        align-center
+        focus:ring-4
+        active:scale-y-75
+        hover:scale-105 hover:shadow-lg
+      "
       aria-label="Go to next diff"
       type="button"
       @click="clickHandler"
     >
-      <svg
-        aria-hidden="true"
-        class="w-4 h-4"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M16 17l-4 4m0 0l-4-4m4 4V3"
-        ></path>
-      </svg>
+      <Down />
       <span aria-hidden="true">Next diff</span>
     </button>
   </div>
-  </template>
-  <script lang="ts">
-    import Vue from 'vue'
-    export default Vue.extend({
-      props: {
-        clickHandler: {
-          type: Function,
-          required: true,
-        },
-      },
-    })
-  </script>
 </template>
+<script lang="ts">
+import Vue from 'vue'
+import Down from '~/components/icons/down.vue'
+export default Vue.extend({
+  components: { Down },
+  props: {
+    clickHandler: {
+      type: Function,
+      required: true,
+    },
+  },
+})
+</script>

components/buttons/prevDiff.vue

@@ -2,33 +2,39 @@
   <div id="prevDiffSection" class="inline-flex items-center gap-1">
     <button
       id="prevDiff"
-      class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
+      class="
+        inline-flex
+        items-center
+        justify-center
+        px-1
+        py-1
+        text-sm text-gray-600
+        transition-transform
+        transform
+        bg-gray-300
+        border border-gray-800
+        rounded-sm
+        outline-none
+        dark:border-gray-400 dark:text-white dark:bg-gray-800
+        align-center
+        focus:ring-4
+        active:scale-y-75
+        hover:scale-105 hover:shadow-lg
+      "
       aria-label="Go to previous diff"
       type="button"
       @click="clickHandler"
     >
-      <svg
-        aria-hidden="true"
-        class="w-4 h-4"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M8 7l4-4m0 0l4 4m-4-4v18"
-        ></path>
-      </svg>
+      <Up />
       <span aria-hidden="true">Previous diff</span>
     </button>
   </div>
 </template>
 <script>
 import Vue from 'vue'
+import Up from '~/components/icons/up.vue'
 export default Vue.extend({
+  components: { Up },
   props: {
     clickHandler: {
       type: Function,

components/buttons/stickyCopy.vue

@@ -1,7 +1,20 @@
 <template>
   <div class="sticky top-0 text-right z-1">
     <button
-      class="absolute top-0 right-0 p-2 text-gray-800 transition-all transform rounded-full shadow  dark:text-gray-50 z-1 hover:shadow-lg hover:scale-110 hover:rotate-12"
+      class="
+        absolute
+        top-0
+        right-0
+        p-2
+        text-gray-800
+        transition-all
+        transform
+        rounded-full
+        shadow
+        dark:text-gray-50
+        z-1
+        hover:shadow-lg hover:scale-110 hover:rotate-12
+      "
       :class="{
         'bg-gray-100 dark:bg-gray-600': !copied,
         'bg-green-500': copied,
@@ -11,7 +24,7 @@
       @click="handleClick"
     >
       <span aria-live="assertive" role="status">
-        <span aria-label="copy to clipboard" v-show="!copied">
+        <span v-show="!copied" aria-label="copy to clipboard">
           <svg
             aria-hidden="true"
             class="w-6 h-6"
@@ -28,7 +41,7 @@
             ></path>
           </svg>
         </span>
-        <span aria-label="copied" v-show="copied">
+        <span v-show="copied" aria-label="copied">
           <svg
             aria-hidden="true"
             class="w-6 h-6"

components/buttons/toggleInlineDiffView.vue

@@ -3,7 +3,25 @@
     <button
       id="toggleInlineDiffView"
       type="button"
-      class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none  dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
+      class="
+        inline-flex
+        items-center
+        justify-center
+        px-1
+        py-1
+        text-sm text-gray-600
+        transition-transform
+        transform
+        bg-gray-300
+        border border-gray-800
+        rounded-sm
+        outline-none
+        dark:border-gray-400 dark:text-white dark:bg-gray-800
+        align-center
+        focus:ring-4
+        active:scale-y-75
+        hover:scale-105 hover:shadow-lg
+      "
       @click="toggleInlineDiffView"
     >
       <svg
@@ -15,7 +33,7 @@
         viewBox="0 0 122.88 101.61"
         stroke="currentColor"
         xml:space="preserve"
-        class="w-4 h-4 mr-1 transition-all duration-500 transform transform-gpu"
+        class="w-4 h-4 mr-1 transition-all duration-500 transform-gpu"
         :class="{
           'rotate-90': isEnabled,
         }"

components/footer.vue

@@ -1,57 +1,31 @@
 <template>
   <footer
-    class="sticky py-4 mt-4 text-center text-gray-800  top-full bg-inherit dark:text-gray-50 min-h-max"
+    class="
+      sticky
+      py-4
+      mt-4
+      text-center text-gray-800
+      top-full
+      bg-inherit
+      dark:text-gray-50
+      min-h-max
+    "
   >
     Made with &hearts; using
     <a
       href="https://nuxtjs.org"
       title="nuxtjs a vuejs based framework inspired by nextjs"
       aria-label="nuxtjs a vuejs based framework inspired by nextjs"
     >
-      <svg
-        class="inline w-4 h-4"
-        viewBox="0 0 124 124"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M55.7498 27.1551C52.5277 21.615 44.4723 21.6149 41.2502 27.1551L6.13404 87.5346C2.91191 93.0748 6.93956 100 13.3838 100H40.7975C38.0438 97.5934 37.0241 93.4303 39.1079 89.8584L65.7033 44.2694L55.7498 27.1551Z"
-          fill="#80EEC0"
-        />
-        <path
-          d="M78.0002 40.3997C80.6668 35.8668 87.3332 35.8668 89.9998 40.3997L119.061 89.801C121.728 94.3339 118.395 100 113.062 100H54.9383C49.6052 100 46.2719 94.3339 48.9385 89.801L78.0002 40.3997Z"
-          fill="#00DC82"
-        />
-      </svg>
+      <Nuxt />
     </a>
     <span>&</span>
     <a
       href="https://tailwindcss.com/"
       title="tailwind css"
       aria-label="tailwind css"
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 54 33"
-        class="inline w-4 h-4"
-      >
-        <g clip-path="url(#prefix__clip0)">
-          <path
-            fill="#38bdf8"
-            fill-rule="evenodd"
-            d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z"
-            clip-rule="evenodd"
-          />
-        </g>
-        <defs>
-          <clipPath id="prefix__clip0">
-            <path fill="#fff" d="M0 0h54v32.4H0z" />
-          </clipPath>
-        </defs>
-      </svg>
+      <Tailwind />
     </a>
     by &copy;
     <a
@@ -61,3 +35,11 @@
     >
   </footer>
 </template>
+<script lang="ts">
+import Vue from 'vue'
+import Tailwind from '~/components/icons/tailwind.vue'
+import Nuxt from '~/components/icons/nuxt.vue'
+export default Vue.extend({
+  components: { Tailwind, Nuxt },
+})
+</script>

components/icons/back.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    class="w-6 h-6"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M10 19l-7-7m0 0l7-7m-7 7h18"
+    ></path>
+  </svg>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({})
+</script>