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
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, deserunt
-      fugit adipisci quis iusto tempora veniam vitae explicabo corporis
+      esse tenetur iusto dolor unde. Aliquam quidem ab qui velit?
-      accusantium facilis iste, libero impedit dolorem perspiciatis dignissimos
-      cumque reprehenderit!
     </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>

content/js/hellojs.md

@@ -1 +1,6 @@
+---
+title: sdlfkjs
+des: sdfsdflkj
+---
+
 # hello js

pages/index.vue

@@ -4,21 +4,28 @@ let x = ref(10);
 
 <template>
   <div
-    class="container px-5 mx-auto max-w-6xl flex font-poppins space-x-5 antialiased"
+    class="container px-5 mx-auto max-w-6xl flex font-poppins gap-7 antialiased"
   >
     <div class="flex-1">
       <h1 class="text-xl pb-8 tracking-wide text-[#e60067]">
         RECENTLY PUBLISHED
       </h1>
       <div class="space-y-8">
-        <blog-card v-for="n in 10" :key="n" />
+        <blog-card v-for="n in 7" :key="n" />
       </div>
     </div>
-    <div class="max-w-[300px]">
+    <div class="max-w-[400px]">
       <div>
         <h2 class="text-xl pb-8 tracking-wide text-[#e60067]">
           TOP CATEGORIES
         </h2>
+        <topic-card />
+        <h2 class="text-xl py-8 tracking-wide text-[#e60067]">
+          POPULAR CONTENT
+        </h2>
+        <div class="space-y-5">
+          <one-line-card v-for="n in 5" :key="n" />
+        </div>
       </div>
     </div>
   </div>