refactor : refactoring the dynamic blog flow and breaking code into c…

…omponents.

src/app/(app)/blog/[postSlug]/page.tsx → src/app/(app)/blogs/[postSlug]/page.tsx

@@ -74,7 +74,7 @@ export default async function PageComponent({ params }: PageParams) {
             })}
           </p>
           <div
-            className="pb-12 pt-8 prose max-w-3xl text-foreground dark:text-white" // Updated for dark mode
+            className="pb-12 pt-8 prose max-w-3xl text-foreground dark:text-white"
             dangerouslySetInnerHTML={{
               __html: post.content.html,
             }}

src/app/(app)/blogs/page.tsx

@@ -1,106 +1,6 @@
-'use client'; // Add this line at the top
-
-import Link from 'next/link';
-import Image from 'next/image';
-import { Post } from '@/types/posts';
-import Container from '@/components/Container';
 import Footer from '@/components/footer';
-import { fetchBlogPosts } from '@/utils/hashnode';
-
-// Blog component with revamped layout, styles, and gradient effect
-export async function Blog() {
-  const publication = await fetchBlogPosts();
-  if (!publication) {
-    throw new Error('Failed to fetch blog posts');
-  }
-
-  const posts: Array<Post> = publication.posts.edges.map(
-    ({ node }: { node: Post }) => node,
-  );
-
-  return (
-    <Container className="max-w-6xl mx-auto space-y-16">
-      {/* Header */}
-      <div className="text-center mt-16">
-        <h1 className="text-5xl font-bold mb-4">
-          Insights for Building Web Applications
-        </h1>
-        <p className="text-lg text-gray-500">
-          Dive deep into the latest trends, tips, and techniques for creating
-          powerful, user-focused web applications.
-        </p>
-      </div>
+import { Blog } from '@/components/blog';
 
-      {/* Featured Post */}
-      {/* Featured Post */}
-      <div className="relative flex flex-col md:flex-row gap-8 items-center text-white rounded-lg p-8 shadow-lg overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-pink-500 opacity-70 animate-liquid"></div>
-        <div className="w-full md:w-1/2 relative z-10 text-center md:text-left">
-          <h2 className="text-2xl font-semibold">{posts[0].title}</h2>
-          <p className="mt-2">{posts[0].excerpt}</p>
-          <Link href={`/blog/${posts[0].slug}`}>
-            <button className="mt-4 py-2 px-4 bg-white text-purple-600 font-semibold rounded-lg hover:bg-gray-100">
-              Read More
-            </button>
-          </Link>
-        </div>
-        <Image
-          width={300}
-          height={200}
-          src={posts[0].coverImage.url}
-          alt="Featured Post Image"
-          className="rounded-lg relative z-10 w-full md:w-auto"
-        />
-      </div>
-
-      {/* Blog Grid */}
-      <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mt-8">
-        {posts.map((post) => (
-          <li
-            key={post.id}
-            className="bg-white rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:-translate-y-1 overflow-hidden"
-          >
-            <Link href={`/blog/${post.slug}`} className="block">
-              <div className="relative">
-                <Image
-                  width={400}
-                  height={250}
-                  className="object-cover w-full h-48"
-                  src={post.coverImage.url}
-                  alt={post.title}
-                />
-                <div className="absolute top-2 left-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-full p-2">
-                  <span className="text-lg">➔</span>
-                </div>
-              </div>
-              <div className="p-4">
-                <h3 className="text-xl font-semibold text-gray-800">
-                  {post.title}
-                </h3>
-                <p className="text-gray-500 mt-2 text-sm">
-                  {new Date(post.publishedAt).toLocaleDateString('en-us', {
-                    weekday: 'long',
-                    year: 'numeric',
-                    month: 'short',
-                    day: 'numeric',
-                  })}
-                </p>
-                <p className="mt-4 text-gray-600 text-sm">{post.excerpt}</p>
-              </div>
-              <div className="p-4">
-                <button className="py-2 px-4 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors">
-                  Read More
-                </button>
-              </div>
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </Container>
-  );
-}
-
-// Blogs page wrapper
 const Blogs = () => {
   return (
     <div className="container mt-32 font-semibold flex flex-col items-center gap-20">
@@ -111,23 +11,3 @@ const Blogs = () => {
 };
 
 export default Blogs;
-
-// CSS for liquid effect
-<style jsx>{`
-  @keyframes liquid {
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
-  }
-
-  .animate-liquid {
-    animation: liquid 8s ease-in-out infinite;
-    background-size: 200% 200%;
-  }
-`}</style>;

src/app/(app)/components/[[...slug]]/page.tsx

@@ -1,6 +1,5 @@
 import { allDocuments } from 'contentlayer/generated';
 import { notFound } from 'next/navigation';
-
 import { ChevronRightIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import Balancer from 'react-wrap-balancer';

src/components/blog-grid.tsx

@@ -0,0 +1,59 @@
+import { Post } from '@/types/posts';
+import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
+import { Button } from './ui/button';
+
+interface BlogGridProps {
+  posts: Post[];
+}
+
+const BlogGrid = ({ posts }: BlogGridProps) => {
+  return (
+    <>
+      <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mt-8">
+        {posts?.slice(1)?.map((post) => (
+          <li
+            key={post.id}
+            className="bg-white rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:-translate-y-1 overflow-hidden"
+          >
+            <Link href={`/blogs/${post.slug}`} className="block">
+              <div className="relative">
+                <Image
+                  width={400}
+                  height={250}
+                  className="object-cover w-full h-48"
+                  src={post.coverImage.url}
+                  alt={post.title}
+                />
+                <div className="absolute top-2 left-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-full p-2">
+                  <span className="text-lg">➔</span>
+                </div>
+              </div>
+              <div className="p-4">
+                <h3 className="text-xl font-semibold text-gray-800">
+                  {post.title}
+                </h3>
+                <p className="text-gray-500 mt-2 text-sm">
+                  {new Date(post.publishedAt).toLocaleDateString('en-us', {
+                    weekday: 'long',
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                  })}
+                </p>
+              </div>
+              <div className="p-4">
+                <Button className="py-2 px-4 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors">
+                  Read More
+                </Button>
+              </div>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};
+
+export default BlogGrid;

src/components/blog.tsx

@@ -0,0 +1,36 @@
+import { Post } from '@/types/posts';
+import { fetchBlogPosts } from '@/utils/hashnode';
+import Container from '@/components/Container';
+import FeaturedBlogPost from './featured-blog-post';
+import BlogGrid from './blog-grid';
+
+export async function Blog() {
+  const publication = await fetchBlogPosts();
+  if (!publication) {
+    throw new Error('Failed to fetch blog posts');
+  }
+
+  const posts: Array<Post> = publication.posts.edges.map(
+    ({ node }: { node: Post }) => node,
+  );
+  return (
+    <Container className="max-w-6xl mx-auto space-y-16">
+      <div className="text-center mt-16">
+        <h1 className="text-5xl font-bold mb-4">
+          Insights for Building Web Applications
+        </h1>
+        <p className="text-lg text-gray-500">
+          Dive deep into the latest trends, tips, and techniques for creating
+          powerful, user-focused web applications.
+        </p>
+      </div>
+      <FeaturedBlogPost
+        title={posts[0].title}
+        slug={posts[0].slug}
+        imageUrl={posts[0].coverImage.url}
+      />
+
+      <BlogGrid posts={posts} />
+    </Container>
+  );
+}

src/components/featured-blog-post.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button } from './ui/button';
+import Image from 'next/image';
+import { BlogParams } from '@/types/blog';
+import Link from 'next/link';
+
+const FeaturedBlogPost = ({ title, slug, imageUrl }: BlogParams) => {
+  return (
+    <div className="relative flex flex-col md:flex-row gap-8 items-center text-white rounded-lg p-8 shadow-lg overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-pink-500 opacity-70 animate-liquid"></div>
+      <div className="w-full md:w-1/2 relative z-10 text-center md:text-left">
+        <h2 className="text-2xl font-semibold">{title}</h2>
+        <Link href={`/blogs/${slug}`}>
+          <Button className="mt-4 py-2 px-4 bg-white text-purple-600 font-semibold rounded-lg hover:bg-gray-100">
+            Read More
+          </Button>
+        </Link>
+      </div>
+      <Image
+        width={300}
+        height={200}
+        src={imageUrl}
+        alt="Featured Post Image"
+        className="rounded-lg relative z-10 w-full md:w-auto"
+      />
+    </div>
+  );
+};
+
+export default FeaturedBlogPost;

src/types/blog.ts

@@ -0,0 +1,5 @@
+export interface BlogParams {
+  title: string;
+  slug: string;
+  imageUrl: string;
+}