add sidebar

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

components/BlogCard.vue

@@ -1,11 +1,9 @@
 <template>
   <div class="space-y-2">
-    <h3 class="text-2xl text-slate-800 font-semibold">Color formate in CSS</h3>
+    <h3 class="text-xl text-slate-800 font-semibold">This is a blog title</h3>
     <p class="pr-5 text-slate-700">
-      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea rem, maiores
-      fugit adipisci quis iusto tempora veniam vitae explicabo corporis
-      accusantium facilis iste, libero impedit dolorem perspiciatis dignissimos
-      cumque reprehenderit!
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, deserunt
+      esse tenetur iusto dolor unde. Aliquam quidem ab qui velit?
     </p>
     <p class="font-semibold">Read more</p>
   </div>

components/OneLineCard.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="antialiased font-poppins hover:underline">
+    <nuxt-link to="/">
+      <h4>
+        <span class="mr-2">
+          <icon calss="bg-red" name="ant-design:arrow-right-outlined" />
+        </span>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, a?
+      </h4>
+    </nuxt-link>
+  </div>
+</template>

components/TopicBtn.vue

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

components/TopicCard.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <topic-btn v-for="n in 7" :key="n" />
+  </div>
+</template>