add components

src/components/Components.vue

@@ -0,0 +1,49 @@
+<template>
+  <div v-for="component in components">
+    <div v-if="component.bg === true" class="component component-bg-top"> </div>
+    <div :class="`component ${component.type}`">
+        <h3>{{component.label}}</h3>
+        <Content :jsonContent="component.content" />
+    </div>
+    <div v-if="component.bg === true" class="component component-bg-bottom"> </div>
+  </div>
+</template>
+
+<script lang="ts">
+ import { useComponentStore } from '@/stores/component'
+ import { useI18n } from 'vue-i18n'
+ import Content from '@/components/Content.vue'
+
+  export default {
+      name: 'Components',
+      components:{Content},
+      data () {
+          return {
+            components: [] as Array<any>,
+            componentStore: null as any
+          }
+      },
+      setup(){
+        const { t } = useI18n({
+          inheritLocale: true
+        })
+        return{
+          t
+        }
+      },
+      async mounted () {
+        if(!this.componentStore){
+          this.componentStore = useComponentStore()
+        }
+        this.components = await this.componentStore.getComponents(this.$i18n.locale)
+      },
+      async update () {
+        if(!this.componentStore){
+          this.componentStore = useComponentStore()
+        }
+        this.components = await this.componentStore.getComponents(this.$i18n.locale)
+      }
+
+  }
+</script>
+

src/stores/component.ts

@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia'
+import axios from 'axios'
+
+
+export const useComponentStore = defineStore('components',{
+  state: () => ({
+    components: [] as Array<any>,
+    locale: (localStorage.getItem('lang') || 'de')
+  }),
+  actions: {
+    async getComponents(locale: string){
+      await this.setLocale(locale)
+      return this.components
+
+    },
+
+    async setLocale(locale: string){
+      if(this.components.length == 0 || this.locale != locale ){
+        this.locale = locale
+        await this.fetchComponents()
+      }
+    },
+
+    async fetchComponents(){
+      const response = await axios.get('https://strapi.kornblum.one/api/components?locale='+this.locale, {
+      headers: {
+          Authorization: "Bearer "+ import.meta.env.VITE_STRAPI_TOKEN,
+      },
+      })
+      this.components = response.data.data
+    },
+  }
+})
+
+

src/views/HomeView.vue

@@ -2,6 +2,7 @@
   import logo from '../assets/images/logo-blue.svg'
   import Countdown from '@/components/Countdown.vue';
   import Timeline from '@/components/Timeline.vue';
+  import Components from '@/components/Components.vue';
   import { useI18n } from 'vue-i18n'
   const { t } = useI18n({
             inheritLocale: true
@@ -18,7 +19,9 @@
         <img class="logo lazy" data-original="{{ item.img }}" g
                     v-bind:src="logo" alt="">
       </div>
+
       <div class="component component-bg-bottom"> </div>
+      <Components/>
       <div class="component component-dark">
           <Countdown/>
       </div>