From 23ca0801dd2892740d68c15cd03ce2aa2892cfa2 Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Sun, 11 Dec 2022 23:58:18 +0600
Subject: [PATCH] update latest page

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 components/BlogCard.vue       |  4 ++--
 components/LatestBlogCard.vue | 19 +++++++++++++++++++
 components/NavbarCom.vue      |  4 ++--
 components/OneLineCard.vue    |  2 +-
 layouts/list.vue              |  9 +++++++++
 pages/index.vue               |  2 +-
 pages/latest.vue              | 14 ++++++++++----
 7 files changed, 44 insertions(+), 10 deletions(-)
 create mode 100644 components/LatestBlogCard.vue
 create mode 100644 layouts/list.vue

diff --git a/components/BlogCard.vue b/components/BlogCard.vue
index de129be..3f51f54 100644
--- a/components/BlogCard.vue
+++ b/components/BlogCard.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="space-y-2">
+  <div class="space-y-2 m-5">
     <h3 class="text-xl text-slate-800 font-semibold">This is a blog title</h3>
-    <p class="pr-5 text-slate-700">
+    <p class="text-slate-700">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, deserunt
       esse tenetur iusto dolor unde. Aliquam quidem ab qui velit?
     </p>
diff --git a/components/LatestBlogCard.vue b/components/LatestBlogCard.vue
new file mode 100644
index 0000000..57e1c04
--- /dev/null
+++ b/components/LatestBlogCard.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="bg-white mx-5 my-2 p-5 max-w-[530px] rounded-md">
+    <nuxt-link to="/" class="hover:underline">
+      <h4 class="text-xl text-slate-800 font-medium py-1">
+        This is latest blog card
+      </h4>
+    </nuxt-link>
+    <p class="text-xs text-slate-500 pb-3">Create 10 Dec 2022</p>
+
+    <p class="pb-2 text-slate-600">
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur
+      reprehenderit sit possimus quibusdam ad facilis, consectetur beatae
+      inventore sunt non.
+    </p>
+    <nuxt-link class="hover:underline" to="/">
+      <p class="font-medium">Read More</p>
+    </nuxt-link>
+  </div>
+</template>
diff --git a/components/NavbarCom.vue b/components/NavbarCom.vue
index 5bd35de..9b3caad 100644
--- a/components/NavbarCom.vue
+++ b/components/NavbarCom.vue
@@ -3,8 +3,8 @@ const theme = ref("light");
 </script>
 
 <template>
-  <header class="sticky top-0 p-6 bg-[#a2d9ff] font-poppins">
-    <div class="container px-3 mx-auto max-w-6xl flex justify-between">
+  <header class="sticky top-0 p-3 bg-[#a2d9ff] font-poppins">
+    <div class="container px-4 mx-auto max-w-6xl flex justify-between">
       <ul class="flex space-x-8 items-end">
         <li class="align">
           <nuxt-link to="/">
diff --git a/components/OneLineCard.vue b/components/OneLineCard.vue
index bd0aa5e..76c2629 100644
--- a/components/OneLineCard.vue
+++ b/components/OneLineCard.vue
@@ -5,7 +5,7 @@
         <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?
+        How to use vite in your nuxt 3 project a a a a a a a a
       </h4>
     </nuxt-link>
   </div>
diff --git a/layouts/list.vue b/layouts/list.vue
new file mode 100644
index 0000000..08eb72e
--- /dev/null
+++ b/layouts/list.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="bg-slate-300">
+    <navbar-com />
+    <div>
+      <slot />
+    </div>
+    <footer-com />
+  </div>
+</template>
diff --git a/pages/index.vue b/pages/index.vue
index 990375b..e626e14 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,7 +4,7 @@ let x = ref(10);
 
 <template>
   <div
-    class="container px-5 mx-auto max-w-6xl flex font-poppins gap-7 antialiased"
+    class="container px-4 mx-auto max-w-6xl flex font-poppins gap-14 antialiased"
   >
     <div class="flex-1">
       <h1 class="text-xl pb-8 tracking-wide text-[#e60067]">
diff --git a/pages/latest.vue b/pages/latest.vue
index f9a1396..8aaf89d 100644
--- a/pages/latest.vue
+++ b/pages/latest.vue
@@ -1,11 +1,17 @@
 <script setup lang="ts">
+definePageMeta({
+  layout: "list",
+});
 const { data } = await useAsyncData("home", () => queryContent("/").find());
-console.log(data);
 </script>
 
 <template>
-  <div>
-    <p class="text-5xl">Latest Page</p>
-    <pre>{{ data }}</pre>
+  <div class="container mx-auto max-w-6xl font-poppins antialiased">
+    <h1 class="font-semibold text-3xl mt-10 mx-5 mb-4 text-slate-800">
+      LATEST CONTENT
+    </h1>
+    <div class="flex justify-between flex-wrap">
+      <latest-blog-card v-for="n in 20" :key="n" />
+    </div>
   </div>
 </template>