diff --git a/app/api/blogs/getBlogList/route.ts b/app/api/blogs/getBlogList/route.ts new file mode 100644 index 0000000..da6062a --- /dev/null +++ b/app/api/blogs/getBlogList/route.ts @@ -0,0 +1,14 @@ +export const runtime = "nodejs"; + +import { NextResponse } from "next/server"; +import { getBlogList } from "@/lib/blogs/index"; + +export async function GET(request: Request) { + const { searchParams } = new URL(request.url); + const page = parseInt(searchParams.get("page") || "1", 10); + const limit = parseInt(searchParams.get("limit") || "6", 10); + const search = searchParams.get("search") || undefined; + + const blogs = await getBlogList(page, limit, search); + 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..e1a83c1 --- /dev/null +++ b/app/blogs/page.tsx @@ -0,0 +1,95 @@ +"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"; +import Pagination from "@/components/pagination"; +import { set } from "zod"; + +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); + const [searchTerm, setSearchTerm] = useState(""); + const [totalPages, setTotalPages] = useState(1); + const blogsPerPage = 6; + useEffect(() => { + fetch(`/api/blogs/getBlogList?page=${currentPage}&limit=${blogsPerPage}&search=${searchTerm}`) + .then((r) => r.json()) + .then((data) => { + setBlogs(data.blogs); + setTotalPages(data.meta.totalPages); + }); + }, [currentPage, searchTerm]); + + return ( + <> +
+
+
+ { + setSearchTerm(e.target.value); + setCurrentPage(1); + }} + /> + +
+
+ {blogs.map((blog) => ( + + ))} +
+
+ +
+ + { + setCurrentPage(page); + window.scrollTo({ + top: 0, + behavior: "smooth" + }); + }} /> + +