fix: showing error toast if no data on either side

Author: technikhil314

components/Toast.vue

@@ -15,8 +15,9 @@
       v-bind:class="{
         '-translate-y-screen': !toastState.show,
         '-translate-y-0': !toastState.show,
-        'bg-green-400': toastState.theme === 'success',
-        'bg-blue-400': toastState.theme !== 'success',
+        'bg-green-400 text-gray-800': toastState.theme === 'success',
+        'bg-red-400 text-white': toastState.theme === 'error',
+        'bg-blue-400 text-white': toastState.theme !== 'success',
       }"
     >
       <div class="flex justify-between gap-2">

pages/diff/_diff.vue

@@ -8,7 +8,7 @@
           class="inline-flex justify-center px-4 py-2 text-white transition-transform transform rounded-md shadow-lg outline-none  copy-uri-button align-center focus:ring-4 active:scale-y-75"
           v-bind:class="{
             'bg-blue-600 text-white': !copied,
-            'bg-green-500 text-black': copied,
+            'bg-green-500 text-gray-800': copied,
           }"
         >
           <span class="inline-flex justify-center" v-show="copied">

pages/index.vue

@@ -46,6 +46,27 @@ export default Vue.extend({
       ) as HTMLTextAreaElement
       const rhs: string = rhsTextArea?.value || ''
       if (!lhs || !rhs) {
+        this.$store.commit('toast/show', {
+          show: true,
+          content: 'Please enter some data on both sides to compare',
+          iconHTML: `
+            <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+              ></path>
+            </svg>
+          `,
+          theme: 'error',
+        })
         return
       }
       const originalLhs = lhs.split('\n')