feature: share and reset simulator

src/components/Form.vue

@@ -3,7 +3,7 @@
     class="text-center transition delay-5 duration-100 ease-in-out flex"
     :class="{ 'h-screen': validationCount === 0 }"
   >
-    <div class="m-auto">
+  <div class="m-auto container  max-w-2xl">
       <div class="relative md:h-44">
         <h4
           class="font-semibold"
@@ -21,14 +21,18 @@
           simulate your net income
         </p>
         <div class="flex justify-around items-center">
-          <div class="relative w-8/12 group">
+          <div
+            class="relative group" 
+            :class="income === null ? 'w-7/12' : 'w-6/12'"
+          >
             <div class="relative">
               <FormattedNumberInput
                 v-model:value="internalIncome"
                 placeholder="Income"
                 @click="showDropdown = true"
                 @update:value="showDropdown = false"
                 class="pl-7"
+                data-cy="income"
               />
 
               <ChevronDownIcon
@@ -129,12 +133,28 @@
             </transition>
           </div>
           <div class="w-1/12">/</div>
-          <div class="w-3/12">
+          <div
+            :class="income === null
+            ? 'w-4/12'
+            : 'w-3/12'
+            ">
             <FrequencyButton />
           </div>
+          <button
+            v-if="income !== null"
+            class="text-sm hover:text-income hover:font-medium pl-5 py-5 flex gap-2 items-center"
+            @click="store.reset()">reset
+            <ArrowPathIcon class="h-3" />
+          </button>
+          <button
+            v-if="income !== null"
+            class="text-sm hover:text-secondary hover:font-medium pl-5 py-5 flex gap-2 items-center" @click="share">share
+            <ShareIcon class="h-3" />
+          </button>
         </div>
       </div>
     </div>
+    <ToastDialog v-if="showToast" text="sharable link copied to clipboard" @close="closeToast" />
   </div>
 </template>
 <script setup lang="ts">
@@ -144,6 +164,7 @@ import { storeToRefs } from "pinia";
 import { useTaxesStore } from "@/store";
 import { useBreakpoint } from "@/composables/breakpoints";
 import CurrencyButton from "@/components/CurrencyButton.vue";
+import ToastDialog from "@/components/ToastDialog.vue";
 import FormattedNumberInput from "@/components/FormattedNumberInput.vue";
 import FrequencyButton from "@/components/FrequencyButton.vue";
 import { FrequencyChoices } from "@/typings";
@@ -196,4 +217,14 @@ const changeAmount = computed(() => {
       return { value: 5000, text: "5k" };
   }
 });
+
+// share
+const showToast = ref(false);
+const closeToast = () => {
+  showToast.value = false;
+};
+const share = () => {
+  navigator.clipboard.writeText(window.location.href);
+  showToast.value = true;
+};
 </script>

src/components/ToastDialog.vue

@@ -0,0 +1,30 @@
+<template>
+  <div v-click-outside="close" class="absolute left-1/2 transform -translate-x-1/2 top-3 z-50">
+    <div class="flex items-center w-full max-w-xs p-4 bg-neutral-200 rounded-lg shadow-lg">
+      <div class="ms-3 text-sm font-normal">{{ text }}</div>
+      <button
+type="button"
+        class="ms-auto -mx-1.5 -my-1.5 text-neutral-400 hover:text-neutral-600 rounded-lg p-1.5  inline-flex items-center justify-center h-8 w-8"
+        data-dismiss-target="#toast-default" aria-label="Close" @click="close()">
+        <span class="sr-only">Close</span>
+        <XMarkIcon />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { XMarkIcon } from "@heroicons/vue/24/outline";
+// store
+const emits = defineEmits(["close"]);
+defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+
+});
+
+setTimeout(() => close(), 3000);
+const close = () => emits('close');
+</script>