refactor: move about into to about

components/BasketButton.vue

@@ -1,20 +1,23 @@
 <script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+
 defineProps({
   isVisible: Boolean,
 })
 
 const rStore = useRecipeStore()
+const { displayedRecipe } = storeToRefs(rStore)
 </script>
 
 <template>
   <button
-    v-show="rStore.displayedRecipe.length !== rStore.recipes.length && isVisible"
+    v-show="displayedRecipe.length !== rStore.recipes.length && isVisible"
     class="fixed z-9 inline-flex cursor-pointer items-center justify-center rounded rounded-full shadow hover:shadow-md"
     bg="green-50 dark:green-900" w="10" h="10"
     bottom="18" right="4"
     text="green-600 dark:green-300"
   >
-    <span v-if="rStore.displayedRecipe.length">
+    <span v-if="displayedRecipe.length > 0">
       <div i-mdi-bowl-mix-outline />
     </span>
     <span v-else>