merge

frontend/pages/articles.vue

@@ -52,9 +52,9 @@ if (response.isError) {
 
         <!-- This is for masonry js package -->
 
-        <ClientOnly>
-            <ArticlesList :articles="articles!.results" />
-        </ClientOnly>
+
+        <ArticlesList :articles="articles!.results" />
+
 
         <div class="w-full flex-center pt-24 pb-10">
             <Pagination :items="[]" :total="100" />

frontend/pages/index.vue

@@ -23,10 +23,12 @@ if (response.isError) {
 
 <template>
     <div class="w-full">
+<!--        <LoadingOverlay />-->
         <Hero />
         <Preview />
-        <Categories />
+        <ProductsShowcase />
         <ProductsSlider title="محصولات پرفروش" />
+        <Categories />
         <Brands />
         <MostRecentComments />
         <LatestStories />

frontend/pages/product/[id].vue

@@ -1,9 +1,20 @@
 <script lang="ts" setup>
 
+// import
+
 import ChatButton from "~/components/product/ChatBox/ChatButton.vue";
 import useGetProduct from "~/composables/api/product/useGetProduct";
 import useGetComments from "~/composables/api/product/useGetComments";
 
+// type
+
+export type ProductVariantProvideType = {
+    selectedVariant: Ref<ProductVariant>,
+    changeSelectedVariant: (value: ProductVariant) => void
+}
+
+// state
+
 const route = useRoute();
 
 const id = route.params.id as string | undefined;
@@ -12,6 +23,15 @@ const page = ref(1);
 const { suspense: suspenseProduct } = useGetProduct(id);
 const { suspense: suspenseComments } = useGetComments(id, page);
 
+const selectedVariant = ref<ProductVariant>();
+
+// provide / inject
+
+provide("productVariant", {
+    selectedVariant,
+    changeSelectedVariant: (value: ProductVariant) => selectedVariant.value = value
+});
+
 // ssr
 
 const productResponse = await suspenseProduct();
@@ -27,7 +47,7 @@ if (productResponse.isError || commentsResponse.isError) {
 </script>
 
 <template>
-    <div class="w-full flex flex-col gap-20">
+    <div class="w-full flex flex-col ">
         <ProductHero />
         <ProductVideo />
         <ProductComments />