Squashed commit message

frontend/spa/src/components/MainPage/MainPage.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+      v-if="blocks.blocks?.length > 0"
+      v-for="(block, index) in blocks.blocks"
+  >
+    <template v-if="blockTypeToComponentMap[block.type]">
+      <component
+          v-if="block.is_enabled"
+          :is="blockTypeToComponentMap[block.type]"
+          :block="block"
+      />
+    </template>
+
+    <div v-else-if="blockTypeToComponentMap[block.type] === undefined">
+      <div role="alert" class="alert alert-error mx-4">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+        <span>Unsupported Block Type: <span class="font-bold">{{ block.type }}</span></span>
+      </div>
+    </div>
+  </div>
+
+  <EmptyBlocks v-else/>
+</template>
+
+<script setup>
+import SliderBlock from "@/components/MainPage/Blocks/SliderBlock.vue";
+import CategoriesTopBlock from "@/components/MainPage/Blocks/CategoriesTopBlock.vue";
+import {useBlocksStore} from "@/stores/BlocksStore.js";
+import ErrorBlock from "@/components/MainPage/Blocks/ErrorBlock.vue";
+import ProductsFeedBlock from "@/components/MainPage/Blocks/ProductsFeedBlock.vue";
+import EmptyBlocks from "@/components/MainPage/EmptyBlocks.vue";
+import ProductsCarouselBlock from "@/components/MainPage/Blocks/ProductsCarouselBlock.vue";
+
+const blockTypeToComponentMap = {
+  slider: SliderBlock,
+  categories_top: CategoriesTopBlock,
+  products_feed: ProductsFeedBlock,
+  products_carousel: ProductsCarouselBlock,
+  error: ErrorBlock,
+};
+
+const blocks = useBlocksStore();
+</script>