From cb25b1a2196c837fd08a9008dd875d2f9298bde6 Mon Sep 17 00:00:00 2001 From: Aumansh Kaushal Date: Tue, 6 Jan 2026 19:44:34 +0530 Subject: [PATCH 1/3] feat(blog): initial blogs page UI and fetch posts from DB --- app/api/blogs/getBlogList/route.ts | 9 +++ app/blogs/[slug]/page.tsx | 14 ++++ app/blogs/page.tsx | 114 +++++++++++++++++++++++++++ components/blog-card.tsx | 97 +++++++++++++++++++++++ drizzle/0000_blue_charles_xavier.sql | 28 ++++++- lib/blogs/index.ts | 44 +++++++++++ lib/database/index.ts | 4 + lib/database/relations.ts | 13 ++- lib/database/schema.ts | 32 +++++++- next.config.ts | 9 +++ 10 files changed, 360 insertions(+), 4 deletions(-) create mode 100644 app/api/blogs/getBlogList/route.ts create mode 100644 app/blogs/[slug]/page.tsx create mode 100644 app/blogs/page.tsx create mode 100644 components/blog-card.tsx create mode 100644 lib/blogs/index.ts diff --git a/app/api/blogs/getBlogList/route.ts b/app/api/blogs/getBlogList/route.ts new file mode 100644 index 0000000..180cf4e --- /dev/null +++ b/app/api/blogs/getBlogList/route.ts @@ -0,0 +1,9 @@ +export const runtime = "nodejs"; + +import { NextResponse } from "next/server"; +import { getBlogList } from "@/lib/blogs/index"; + +export async function GET() { + const blogs = await getBlogList(); + return NextResponse.json(blogs); +} \ No newline at end of file diff --git a/app/blogs/[slug]/page.tsx b/app/blogs/[slug]/page.tsx new file mode 100644 index 0000000..c352b31 --- /dev/null +++ b/app/blogs/[slug]/page.tsx @@ -0,0 +1,14 @@ +"use client"; + +import { useParams } from 'next/navigation'; + +export default function BlogPage() { + const params = useParams(); + const { slug } = params; + + return ( +
+

Blog Page - {slug}

+
+ ); +} \ No newline at end of file diff --git a/app/blogs/page.tsx b/app/blogs/page.tsx new file mode 100644 index 0000000..b0d05ff --- /dev/null +++ b/app/blogs/page.tsx @@ -0,0 +1,114 @@ +"use client"; + +import { StaticImageData } from "next/image"; +import { Search } from "lucide-react"; +import BlogCard from "@/components/blog-card"; +import Footer from "@/components/footer"; +import { useEffect, useState } from "react"; + +type Blog = { + id: string; + title: string; + description: string; + author: string; + playlist: string; + date: string; + likes: number; + comments: number; + imageUrl?: string | StaticImageData; +}; + +export default function BlogsPage() { + const [blogs, setBlogs] = useState([]); +const [currentPage, setCurrentPage] = useState(1); + useEffect(() => { + fetch("/api/blogs/getBlogList") + .then((r) => r.json()) + .then(setBlogs); + }, []); + + return ( + <> +
+
+
+ + +
+
+ {blogs.map((blog) => ( + + ))} +
+
+ +
+
+ {[2, 3, 4].map((n) => ( + + ))} + +
+ + + +
+
+
+
+ +