make it dynamic

Hetari · Aug 26, 2024 · fb956fd · fb956fd
1 parent 274ba11
commit fb956fd
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 14 deletions.
diff --git a/src/components/common/Button.vue b/src/components/common/Button.vue
@@ -1,5 +1,5 @@
 <template>
-  <a
+  <component  :is="url ? 'a' : 'button'" 
     id="button"
     class="leading-base group pointer-events-auto relative h-full max-w-fit transform-none overflow-clip rounded-full bg-flax-smoke-950 px-5 py-2 text-[1rem] font-semibold uppercase tracking-normal text-flax-smoke-100 sm:text-sm"
     :class="$attrs.class"
@@ -20,7 +20,7 @@
         >{{ label }}</span
       >
     </span>
-  </a>
+  </component :is="url ? 'a' : 'button'"">
 </template>
 
 <script setup lang="ts">
@@ -31,7 +31,7 @@
     },
     url: {
       type: String,
-      required: true,
+      required: false,
     },
   });
 </script>

diff --git a/src/components/design/Slider.vue b/src/components/design/Slider.vue
@@ -3,29 +3,27 @@
     <div class="relative flex h-full flex-col">
       <div>
         <p class="heading-4 mb-14 max-w-[35ch] font-semibold leading-none">
-          "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus
-          dolorem commodi nihil maxime odit reiciendis, architecto repudiandae
-          qui?"
+          {{ people[index].quote }}
         </p>
         <div class="heading-6 mb-6 font-semibold">
-          <p class="">Author here</p>
-          <p class="text-flax-smoke-400">Founder of</p>
+          <p class="">{{ people[index].author }}</p>
+          <p class="text-flax-smoke-400">{{ people[index].position }}</p>
         </div>
         <div class="flex gap-3">
           <p
             class="rounded-full border border-flax-smoke-500 px-3 uppercase text-flax-smoke-600"
-            v-for="i in 3"
+            v-for="i in people[index].tags"
             :key="i"
           >
-            Tag {{ i }}
+            {{ i }}
           </p>
         </div>
       </div>
 
       <div class="flex h-full items-end justify-end">
         <div class="flex gap-3">
-          <Button label="Prev" url="" />
-          <Button label="Next" url="" />
+          <Button label="Prev" @click="clickPrev" />
+          <Button label="Next" @click="clickNext" />
         </div>
       </div>
     </div>
@@ -34,7 +32,7 @@
       <div class="relative">
         <img
           class="aspect-[1/1.2] rounded-lg object-cover object-top mix-blend-screen brightness-90 grayscale"
-          :src="profile"
+          :src="people[index].profile"
           alt=""
         />
       </div>
@@ -43,6 +41,34 @@
 </template>
 
 <script setup lang="ts">
-  import { profile } from '@/assets/images';
+  import { profile, profile2 } from '@/assets/images';
   import { Button } from '../common';
+  import { ref } from 'vue';
+
+  const index = ref(0);
+  const people = [
+    {
+      quote:
+        'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus dolorem commodi nihil maxime odit reiciendis, architecto repudiandae qui?',
+      author: 'Author 1',
+      position: 'Founder of Company A',
+      tags: ['Tag 1', 'Tag 2', 'Tag 3'],
+      profile: profile,
+    },
+    {
+      quote:
+        'Another inspiring quote here. It is an example of dynamic content.',
+      author: 'Author 2',
+      position: 'CEO of Company B',
+      tags: ['Tag A', 'Tag B', 'Tag C'],
+      profile: profile2,
+    },
+  ];
+
+  const clickNext = () => {
+    index.value = (index.value + 1) % people.length;
+  };
+  const clickPrev = () => {
+    index.value = (index.value - 1 + people.length) % people.length;
+  };
 </script>