make index page dynamic

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

components/BlogCard.vue

@@ -1,15 +1,25 @@
+<script setup lang="ts">
+const props = defineProps({
+  title: String,
+  description: String,
+  path: String,
+});
+</script>
+
 <template>
   <div class="space-y-2 my-5 text-slate-800 group">
-    <h3 class="text-xl font-semibold group-hover:text-sky-500">
-      This is a blog title
-    </h3>
+    <nuxt-link
+      :to="path"
+      class="text-xl font-semibold group-hover:text-sky-500"
+    >
+      {{ title }}
+    </nuxt-link>
     <p class="text-slate-600">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, deserunt
-      esse tenetur iusto dolor unde. Aliquam quidem ab qui velit?
+      {{ description }}
     </p>
-    <p class="font-semibold group-hover:text-sky-500">
+    <nuxt-link :to="path" class="font-semibold group-hover:text-sky-500">
       Read more
       <span class="hidden group-hover:inline"> ->> </span>
-    </p>
+    </nuxt-link>
   </div>
 </template>

components/OneLineCard.vue

@@ -1,11 +1,18 @@
+<script setup lang="ts">
+const props = defineProps({
+  title: String,
+  path: String,
+});
+</script>
+
 <template>
   <div class="group font-semibold antialiased text-slate-800 font-ibmmono">
-    <nuxt-link class="flex items-baseline space-x-3" to="/">
+    <nuxt-link class="flex items-baseline space-x-3" :to="path">
       <div class="group-hover:scale-125 transition">
         <icon name="ant-design:arrow-right-outlined" />
       </div>
       <h4 class="group-hover:underline">
-        How to use vite in your nuxt 3 project a a a riyad
+        {{ title }}
       </h4>
     </nuxt-link>
   </div>

components/TopicBtn.vue

@@ -1,7 +0,0 @@
-<template>
-  <button
-    class="bg-[#a2d9ff] px-2 py-1 m-2 transition hover:scale-105 rounded-md"
-  >
-    Javascript
-  </button>
-</template>

components/TopicCard.vue

@@ -1,5 +1,20 @@
+<script setup lang="ts">
+const props = defineProps({
+  title: String,
+});
+
+const router = useRouter();
+
+const onClick = () => {
+  router.push(`/tags/${props.title}`);
+};
+</script>
+
 <template>
-  <div>
-    <topic-btn v-for="n in 7" :key="n" />
-  </div>
+  <button
+    @click="onClick"
+    class="bg-[#a2d9ff] px-2 py-1 m-2 transition hover:scale-105 rounded-md"
+  >
+    {{ title }}
+  </button>
 </template>