feat: use indexDB instead of array filter

components/BasketButton.vue

@@ -1,18 +1,21 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import recipes from '~/data/recipe.json'
 
-defineProps({
+const props = defineProps({
   isVisible: Boolean,
 })
 
 const rStore = useRecipeStore()
 const { displayedRecipe } = storeToRefs(rStore)
+
+const showBasketBtn = computed(async () => {
+  return displayedRecipe.value.length !== rStore.recipesLength && props.isVisible
+})
 </script>
 
 <template>
   <button
-    v-show="displayedRecipe.length !== recipes.length && isVisible"
+    v-show="showBasketBtn"
     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"