gfd

neerajrekwar · Sep 4, 2024 · 4833071 · 4833071
1 parent b390564
commit 4833071
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 24 deletions.
diff --git a/app/blog/data/posts.json b/app/blog/data/posts.json
@@ -36,7 +36,7 @@
   },
   {
     "slug": "third-post",
-    "title": "third Post",
+    "title": "",
     "imageUrl": "https://images.unsplash.com/photo-1724870069803-ee8d7119d608?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxNXx8fGVufDB8fHx8fA%3D%3D",
     "date": "2024-08-30",
     "content": "This is the content of the third post."

diff --git a/app/blog/first-post/page.tsx b/app/blog/first-post/page.tsx
@@ -2,6 +2,7 @@ import { IconShare, IconLink, IconHeartFilled, IconQuote } from '@tabler/icons-r
 import posts from '../data/posts.json';
 import LikeButton from '@/app/components/LikeButton';
 import Image from "next/image"
+import Link from 'next/link';
 
 const post = posts.find(p => p.slug === 'first-post');
 
@@ -12,22 +13,29 @@ export default function FirstPostPage() {
         <section className='mb-44'>
           <p className='p-[4px] font-semibold flex justify-center rounded-full items-center my-10 max-w-fit m-auto text-four border-2 border-four bg-primary px-2 uppercase text-sm'>think it</p>
           <article className="prose max-w-none min-h-screen p-4">
-            <h1 className="text-3xl text-five md:text-center md:text-4xl font-bold mb-4">{post?.title}</h1>
-            <div className='flex gap-2 md:gap-4  md:pb-4 tracking-wide text-xs md:text-sm  uppercase py-4 justify-center'>
+            <h1 className="text-3xl text-five md:text-center md:text-4xl font-bold mb-4">{post?.title ? (
+                      <Link
+                      className=""
+                      href={`/blog/${post?.slug}`}
+                    >
+                      {post?.title}
+                    </Link>
+                    ):(<div className=''>title in processing</div>)}</h1>
+            <div className='flex gap-2 md:gap-4  md:pb-4 tracking-wide text-xs  uppercase py-4 justify-center'>
 
-              <span className='opacity-50'>by</span>
+              <span className='opacity-75'>by</span>
               <span className='text-four'>
                 {post?.author}
               </span>
               <span>/</span>
-              <span className='opacity-50'>{new Date(post?.date as string).toLocaleString("en-US", {
+              <span className='opacity-75'>{new Date(post?.date as string).toLocaleString("en-US", {
                 day: 'numeric',
                 month: 'long',
                 year: 'numeric'
 
               })}</span>
               <span>/</span>
-              <span className='opacity-50'>
+              <span className='opacity-75'>
                 {post?.duration}
               </span>
             </div>

diff --git a/app/blog/layout.tsx b/app/blog/layout.tsx
@@ -15,8 +15,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-
-    <body className="bg-primary">
+    <>
       <header className=" border-b border-seven h-28 bg-primary  bg-custom-radial-lg justify-between items-center  text-five ">
         <div className="flex bg-transparent  basis-1/2 justify-between items-start  max-w-7xl m-auto">
           <div className={caveat.className}>
@@ -40,7 +39,6 @@ export default function RootLayout({
         </div>
       </header>
       {children}
-    </body>
-
+    </>
   );
 }
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
@@ -46,13 +46,15 @@ export default function BlogIndexPage() {
                   <div>No image available</div>
                 )}
               </div>
-              <div className="basis-3/4 flex-col flex justify-start border-red-400">
-                <Link
-                  className="text-xl md:text-2xl lg:text-3xl font-bold text-four py-2"
-                  href={`/blog/${post.slug}`}
-                >
-                  {post.title}
-                </Link>
+              <h2 className="basis-3/4 flex-col flex justify-start border-red-400">
+              {post.title ? (
+                      <Link
+                      className="text-2xl md:text-4xl text-five font-semibold"
+                      href={`/blog/${post.slug}`}
+                    >
+                      {post.title}
+                    </Link>
+                    ):(<div className=''>title in processing</div>)}
                 <div className="flex gap-1 md:gap-2 opacity-50  text-four md:pb-4 tracking-wide text-xs md:text-sm font-medium  py-2 justify-start">
                   <p>
                     {new Date(post.date).toLocaleDateString("en-US", {
@@ -61,7 +63,7 @@ export default function BlogIndexPage() {
                       day: "numeric",
                     })}
                   </p>
-                  <IconPointFilled width={12} height={16} />
+                  ●
                   <p>{post.author}</p>
                 </div>
                 <BlogExcerpt
@@ -81,7 +83,7 @@ export default function BlogIndexPage() {
                     <Link href={`/blog/${post.slug}`}>Read post</Link>
                   </span>
                 </div>
-              </div>
+              </h2>
             </li>
           ))}
         </ul>

diff --git a/app/components/footer.tsx b/app/components/footer.tsx
@@ -48,7 +48,7 @@ export default function Footer() {
 
   return (
     <>
-      <footer className="bg-primary bg-custom-radial-sm m-auto border-seven text-secondary">
+      <footer className="bg-primary border-t-2  bg-custom-radial-sm m-auto border-seven text-secondary">
         <div className="p-4 text-four  flex flex-col md:flex-row justify-between py-10 max-w-7xl m-auto">
           <ul className="flex  gap-2 mb-8 items-start flex-col">
             <li className="">
@@ -155,8 +155,8 @@ export default function Footer() {
             </div>
             <ul>
               {posts.map((post) => (
-                <li key={post.slug} className='flex gap-2  justify-start items-start'>
-                  <div className='basis-1/4 m-2 aspect-square mb-6 '>
+                <li key={post.slug} className='flex gap-1 m justify-start items-start'>
+                  <div className='basis-1/4 m-1 aspect-square'>
                     {post.imageUrl ? (
                       <Image
                         className="w-full rounded  aspect-square object-cover"
@@ -169,13 +169,15 @@ export default function Footer() {
                       <div>No image available</div>
                     )}
                   </div>
-                  <div className='basis-3/4  flex justify-start items-start flex-col'>
-                    <Link
+                  <div className='basis-3/4 m-1 flex justify-start items-start flex-col'>
+                    {post.title ? (
+                      <Link
                       className="md:text-sm  text-four "
                       href={`/blog/${post.slug}`}
                     >
                       {post.title}
                     </Link>
+                    ):(<div className='md:text-sm  text-four '>title in processing</div>)}
                     <p className='text-sm opacity-50'>{post.author}</p>
                   </div>
                 </li>