fix: add sparecomponent

src/views/ProfileView.vue

 <script lang="ts" setup>
 import authInterceptor from '@/services/authInterceptor'
-import { computed, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import type { Profile } from '@/types/profile'
 import CardTemplate from '@/views/CardTemplate.vue'
-import InteractiveSpare from '@/components/InteractiveSpare.vue'
 import type { Challenge } from '@/types/challenge'
 import type { Goal } from '@/types/goal'
 import CardGoal from '@/components/CardGoal.vue'
 import router from '@/router'
+import SpareComponent from "@/components/SpareComponent.vue";
 
 const profile = ref<Profile>()
 const completedGoals = ref<Goal[]>([])
 const completedChallenges = ref<Challenge[]>([])
-const isModalOpen = ref(false)
+const speech = ref<string[]>([])
+const newSpeechAvailable = ref(false)
 
 onMounted(async () => {
     await authInterceptor('/profile')
@@ -41,12 +42,15 @@ onMounted(async () => {
         })
 })
 
-const welcome = computed(() => {
-    return [`Velkommen, ${profile.value?.firstName} ${profile.value?.lastName} !`]
-})
+const openSpare = () => {
+  let welcomeSpeechShown = localStorage.getItem('welcomeSpeechShown');
 
-const openInteractiveSpare = () => {
-    isModalOpen.value = true
+  if (!welcomeSpeechShown) {
+    speech.value = [`Velkommen, ${profile.value?.firstName} ${profile.value?.lastName} !`,
+      'Her kan du finne en oversikt over dine profilinstillinger!',
+      'Du kan også se dine fullførte sparemål og utfordringer!']
+    localStorage.setItem('welcomeSpeechShown', 'true');
+  }
 }
 </script>
 
@@ -92,21 +96,15 @@ const openInteractiveSpare = () => {
             </div>
 
             <div class="flex flex-col">
-                <InteractiveSpare
-                    :png-size="10"
-                    :speech="welcome"
-                    direction="left"
-                    :isModalOpen="isModalOpen"
-                />
-                <div class="flex items-center">
-                    <a @click="openInteractiveSpare" class="hover:bg-transparent z-20">
-                        <img
-                            alt="Spare"
-                            class="scale-x-[-1] md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer ml-14 md:ml-10"
-                            src="@/assets/spare.png"
-                        />
-                    </a>
-                </div>
+              <SpareComponent
+                  :speech="speech"
+                  :png-size="15"
+                  :imageDirection="'left'"
+                  :direction="'right'"
+                  :notification="newSpeechAvailable"
+                  @openSpare="openSpare"
+                  class="mb-5"
+              ></SpareComponent>
                 <div class="flex flex-row justify-between mx-4">
                     <p class="font-bold">Fullførte sparemål</p>
                     <a class="hover:p-0 cursor-pointer" v-text="'Se alle'" />