From e9c76050a3820d65138850bda4b46bf436a7b04c Mon Sep 17 00:00:00 2001
From: Taron Chatoyan <chatoyan48@gmailc.com>
Date: Tue, 16 Apr 2024 16:01:22 +0400
Subject: [PATCH] created Bluerpints Cards Carusel

---
 components/home/Testimonials.vue             |   7 +-
 components/layout/BluerpintsCardsCarusel.vue | 168 +++++++++++++++++++
 components/layout/Container.vue              |   8 +-
 3 files changed, 175 insertions(+), 8 deletions(-)
 create mode 100644 components/layout/BluerpintsCardsCarusel.vue

diff --git a/components/home/Testimonials.vue b/components/home/Testimonials.vue
index f78b496b54..72e46c8abb 100644
--- a/components/home/Testimonials.vue
+++ b/components/home/Testimonials.vue
@@ -39,18 +39,13 @@
     import TestimonialsItem from './TestimonialsItem.vue';
     import ArrowLeft from "vue-material-design-icons/ArrowLeft.vue";
     import ArrowRight from "vue-material-design-icons/ArrowRight.vue";
-    import 'vue3-carousel/dist/carousel.css'
-    import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
+
     export default {
         components: {
             Section,
             TestimonialsItem,
             ArrowLeft,
             ArrowRight,
-            Carousel,
-            Slide,
-            Pagination,
-            Navigation,
         },
         data() {
             return {
diff --git a/components/layout/BluerpintsCardsCarusel.vue b/components/layout/BluerpintsCardsCarusel.vue
new file mode 100644
index 0000000000..fca2e21420
--- /dev/null
+++ b/components/layout/BluerpintsCardsCarusel.vue
@@ -0,0 +1,168 @@
+<template>
+    <div class="container">
+        <div class="title mb-3">
+            <p>Related Blueprints</p>
+        </div>
+        <div class="mt-3">
+            <Carousel v-bind="settings" :breakpoints="breakpoints">
+                <Slide v-for="blueprint in blueprints" :key="blueprint.id" >
+                    <div class="carousel--item">
+                        <BlueprintsListCard :blueprint="blueprint" :tags="tags"/>
+                    </div>
+                </Slide>
+                <template #addons>
+                    <navigation>
+                        <template #next>
+                            <div class="carousel-control carousel-control-next">
+                                <ChevronRight />
+                            </div>
+                        </template>
+                        <template #prev>
+                            <div class="carousel-control carousel-control-prev">
+                                <ChevronLeft />
+                            </div>
+                        </template>
+                    </navigation>
+                </template>
+            </Carousel>
+        </div>
+    </div>
+</template>
+<script setup>
+  const config = useRuntimeConfig();
+  const blueprints = ref([])
+  const props = defineProps({
+    query: {
+      type: String,
+      required: true
+    },
+  })
+
+  const { data: blueprintsData } = await useAsyncData('blueprints', () => {
+    return $fetch(`${config.public.apiUrl}/blueprints?type=${props.query}`)
+  });
+
+  const {data: tags} = await useAsyncData('blueprints-tags', () => {
+    return $fetch(`${config.public.apiUrl}/blueprints/tags`)
+  })
+  if(blueprintsData.value) {
+    blueprints.value = blueprintsData.value.results
+  }
+</script>
+
+<script>
+  import Section from '../layout/Section.vue';
+  import ChevronRight from "vue-material-design-icons/ChevronRight.vue";
+  import ChevronLeft from "vue-material-design-icons/ChevronLeft.vue";
+
+  export default {
+    components: {
+      ChevronLeft,
+      ChevronRight,
+      Section,
+    },
+    data() {
+      return {
+        settings: {
+          itemsToShow: 1,
+          snapAlign: 'center',
+        },
+        breakpoints: {
+          900: {
+            itemsToShow: 2,
+            snapAlign: 'start',
+          },
+          990: {
+            itemsToShow: 1,
+            snapAlign: 'start',
+          },
+          1024: {
+            itemsToShow: 1.5,
+            snapAlign: 'start',
+          },
+          1300: {
+            itemsToShow: 2,
+            snapAlign: 'start',
+          },
+          1500: {
+            itemsToShow: 2.4,
+            snapAlign: 'start',
+          },
+        },
+      };
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+    @import "../../assets/styles/variable";
+    .container {
+        border-top: $block-border;
+        padding: 3rem 0;
+        margin-top: 5rem;
+        .title {
+            padding: 0 $spacer;
+            border-left: 5px solid $purple-36;
+            p {
+                font-size: calc($font-size-base * 2.25);
+                font-weight: 600;
+                margin: 0;
+            }
+        }
+        :deep(.card) {
+            text-align: left;
+            min-width: calc($spacer * 17.7);
+            margin-right: $spacer;
+            min-height: calc($spacer * 19.1);
+        }
+        .carousel-control-prev, .carousel-control-next {
+            width: fit-content;
+            background-color: $primary-1;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            opacity: 1;
+            :deep(.material-design-icon > .material-design-icon__svg) {
+                bottom: 0;
+                color: $white;
+            }
+        }
+
+        .carousel--item {
+            width: 100%;
+            height: 100%;
+        }
+
+        :deep(.carousel) {
+            .carousel__viewport {
+                position: relative;
+                &:before {
+                    content: "";
+                    position: absolute;
+                    right: -142px;
+                    width: 16rem;
+                    top: -18px;
+                    background-color: #111113;
+                    height: 100%;
+                    z-index: 1;
+                    filter: blur(47px);
+                }
+            }
+            .carousel__prev {
+                left: calc($spacer * 3.6);
+            }
+            .carousel__next {
+                right: calc($spacer * 3.6);
+            }
+            .carousel__next,
+            .carousel__prev {
+                z-index: 2 !important;
+                opacity: 1;
+            }
+            .carousel__next--disabled,
+            .carousel__prev--disabled {
+                display: none;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/components/layout/Container.vue b/components/layout/Container.vue
index 8287dffa9c..a64209878b 100644
--- a/components/layout/Container.vue
+++ b/components/layout/Container.vue
@@ -33,6 +33,7 @@
                         data-bs-target="#nav-toc"
                     />
                     <PrevNext v-if="prevNext" :navigation="navigation" />
+                    <LayoutBluerpintsCardsCarusel :query="queryType" />
                 </div>
             </ContentRenderer>
         </article>
@@ -52,6 +53,7 @@
     const route = useRoute()
     const slug = computed(() => `/${props.type}/${route.params.slug instanceof Array ? route.params.slug.join('/') : route.params.slug}`);
     let page;
+    let queryType;
 
     const fetchNavigation = async () => {
         let navigationFetch;
@@ -95,9 +97,11 @@
         const parts = slug.value.split('/');
         let pageUrl;
         if (parts.length > 3) {
-            pageUrl = `/api/plugins?page=${parts[parts.length - 1].replace(/.md$/, "")}&type=definitions`
+            queryType = parts[parts.length - 1]
+            pageUrl = `/api/plugins?page=${queryType.replace(/.md$/, "")}&type=definitions`
         } else {
-            pageUrl = `/api/plugins?page=${parts[2]}&type=plugin`
+            queryType = parts[2];
+            pageUrl = `/api/plugins?page=${queryType}&type=plugin`
         }
 
         const {data: pluginInformation} = await useAsyncData(`Container-${hash(pageUrl)}`, () => {