feat: implement blog post detail page with markdown rendering, table of contents, and reading progress bar
This commit is contained in:
Poyraz Avsever
+163
-84
@@ -1,10 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { Badge, Card, Typography } from "poyraz-ui/atoms";
|
||||
import {
|
||||
ArticleCard,
|
||||
NewsCard,
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
@@ -19,72 +21,116 @@ type BlogContentProps = {
|
||||
data: BlogPageData;
|
||||
};
|
||||
|
||||
function pageHref(page: number, category: string) {
|
||||
const params = new URLSearchParams();
|
||||
function buildHref(params: { page?: number; category?: string; search?: string }) {
|
||||
const qs = new URLSearchParams();
|
||||
|
||||
if (page > 1) {
|
||||
params.set("page", String(page));
|
||||
}
|
||||
if (params.page && params.page > 1) qs.set("page", String(params.page));
|
||||
if (params.category && params.category !== "All") qs.set("category", params.category);
|
||||
if (params.search) qs.set("search", params.search);
|
||||
|
||||
if (category !== "All") {
|
||||
params.set("category", category);
|
||||
}
|
||||
|
||||
const query = params.toString();
|
||||
const query = qs.toString();
|
||||
return query ? `/blog?${query}` : "/blog";
|
||||
}
|
||||
|
||||
function categoryHref(category: string) {
|
||||
if (category === "All") {
|
||||
return "/blog";
|
||||
}
|
||||
|
||||
const params = new URLSearchParams();
|
||||
params.set("category", category);
|
||||
|
||||
return `/blog?${params.toString()}`;
|
||||
}
|
||||
|
||||
export function BlogContent({ data }: BlogContentProps) {
|
||||
const pageNumbers = Array.from({ length: data.totalPages }, (_, index) => index + 1);
|
||||
const router = useRouter();
|
||||
const [searchInput, setSearchInput] = useState(data.searchQuery);
|
||||
const pageNumbers = Array.from({ length: data.totalPages }, (_, i) => i + 1);
|
||||
const hasArticles = data.articles.length > 0;
|
||||
|
||||
const submitSearch = useCallback(
|
||||
(value: string) => {
|
||||
const trimmed = value.trim();
|
||||
router.push(buildHref({ category: data.selectedCategory, search: trimmed }));
|
||||
},
|
||||
[router, data.selectedCategory],
|
||||
);
|
||||
|
||||
const clearFilters = useCallback(() => {
|
||||
setSearchInput("");
|
||||
router.push("/blog");
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<section className="flex h-full flex-col gap-3 overflow-hidden">
|
||||
<div className="grid gap-3 md:grid-cols-[1.35fr_1fr]">
|
||||
<div className="space-y-2">
|
||||
{data.news.map((post) => (
|
||||
<NewsCard
|
||||
key={post.id}
|
||||
image={post.image}
|
||||
category={post.category}
|
||||
title={post.title}
|
||||
date={post.date}
|
||||
href={post.href}
|
||||
className="rounded-sm border-border"
|
||||
<section className="flex h-full flex-col gap-4 overflow-y-auto">
|
||||
{/* Filtre Çubuğu */}
|
||||
<Card className="rounded-sm border-border p-4">
|
||||
<div className="flex flex-col gap-3">
|
||||
{/* Kategoriler */}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Typography variant="small" className="mr-1 text-muted-foreground">
|
||||
Kategori:
|
||||
</Typography>
|
||||
{data.categories.map((category) => (
|
||||
<Link
|
||||
key={category}
|
||||
href={buildHref({ category, search: data.searchQuery })}
|
||||
>
|
||||
<Badge
|
||||
variant={category === data.selectedCategory ? "default" : "outline"}
|
||||
className="cursor-pointer rounded-sm transition-colors"
|
||||
>
|
||||
{category}
|
||||
</Badge>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Arama */}
|
||||
<div className="relative">
|
||||
<Icon
|
||||
icon="mdi:magnify"
|
||||
width={18}
|
||||
height={18}
|
||||
className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground"
|
||||
/>
|
||||
))}
|
||||
<input
|
||||
id="blog-search"
|
||||
type="text"
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") submitSearch(searchInput);
|
||||
}}
|
||||
placeholder="Başlık veya içerikte ara..."
|
||||
className="w-full rounded-sm border border-border bg-background py-2 pr-10 pl-9 text-sm text-foreground placeholder:text-muted-foreground focus:border-red-600 focus:ring-1 focus:ring-red-600/30 focus:outline-none"
|
||||
/>
|
||||
{searchInput && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSearchInput("");
|
||||
submitSearch("");
|
||||
}}
|
||||
className="absolute top-1/2 right-3 -translate-y-1/2 cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
<Icon icon="mdi:close" width={16} height={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="grid gap-3 md:grid-rows-[auto_1fr]">
|
||||
<Card className="rounded-sm border-border p-4">
|
||||
<Typography variant="large">Kategoriler</Typography>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{data.categories.map((category) => (
|
||||
<Link key={category} href={categoryHref(category)}>
|
||||
<Badge
|
||||
variant={category === data.selectedCategory ? "default" : "outline"}
|
||||
className="cursor-pointer rounded-sm"
|
||||
>
|
||||
{category}
|
||||
</Badge>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
{/* Aktif filtre göstergesi */}
|
||||
{(data.searchQuery || data.selectedCategory !== "All") && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Typography variant="small" className="text-muted-foreground">
|
||||
{data.articles.length} sonuç
|
||||
{data.searchQuery ? ` · "${data.searchQuery}"` : ""}
|
||||
{data.selectedCategory !== "All" ? ` · ${data.selectedCategory}` : ""}
|
||||
</Typography>
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearFilters}
|
||||
className="inline-flex cursor-pointer items-center gap-1 rounded-sm border border-border px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
<Icon icon="mdi:filter-remove-outline" width={14} height={14} />
|
||||
Temizle
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Yazı Kartları */}
|
||||
<div className="space-y-3">
|
||||
{hasArticles ? (
|
||||
<StaggerContainer className="grid gap-3 md:grid-cols-3">
|
||||
@@ -98,50 +144,83 @@ export function BlogContent({ data }: BlogContentProps) {
|
||||
date={post.date}
|
||||
readTime={post.readTime}
|
||||
href={post.href}
|
||||
className="rounded-sm border-border [&_h3]:line-clamp-2 [&_h3]:min-h-[2.5rem]"
|
||||
className="rounded-sm border-border [&_h3]:line-clamp-2 [&_h3]:min-h-[2.5rem] [&_p]:line-clamp-3"
|
||||
author={{ name: post.author, avatar: "/logo/logo.jpeg" }}
|
||||
/>
|
||||
</StaggerItem>
|
||||
))}
|
||||
</StaggerContainer>
|
||||
) : (
|
||||
<Card className="rounded-sm border-border p-5">
|
||||
<Card className="rounded-sm border-border p-8 text-center">
|
||||
<Icon
|
||||
icon="mdi:file-search-outline"
|
||||
width={40}
|
||||
height={40}
|
||||
className="mx-auto mb-3 text-muted-foreground/50"
|
||||
/>
|
||||
<Typography variant="p" className="text-muted-foreground">
|
||||
{data.selectedCategory === "All"
|
||||
? "Henüz blog yazısı bulunmuyor."
|
||||
: `"${data.selectedCategory}" kategorisinde henüz blog yazısı bulunmuyor.`}
|
||||
{data.searchQuery
|
||||
? `"${data.searchQuery}" aramasına uygun sonuç bulunamadı.`
|
||||
: data.selectedCategory === "All"
|
||||
? "Henüz blog yazısı bulunmuyor."
|
||||
: `"${data.selectedCategory}" kategorisinde henüz blog yazısı bulunmuyor.`}
|
||||
</Typography>
|
||||
{(data.searchQuery || data.selectedCategory !== "All") && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearFilters}
|
||||
className="mt-3 inline-flex cursor-pointer items-center gap-1.5 rounded-sm border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
<Icon icon="mdi:filter-remove-outline" width={16} height={16} />
|
||||
Filtreleri Temizle
|
||||
</button>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Pagination className="mx-0 mt-4 justify-start">
|
||||
<PaginationContent className="justify-start">
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
href={pageHref(Math.max(1, data.currentPage - 1), data.selectedCategory)}
|
||||
aria-disabled={data.currentPage <= 1}
|
||||
/>
|
||||
</PaginationItem>
|
||||
|
||||
{pageNumbers.map((page) => (
|
||||
<PaginationItem key={page}>
|
||||
<PaginationLink
|
||||
href={pageHref(page, data.selectedCategory)}
|
||||
isActive={page === data.currentPage}
|
||||
>
|
||||
{page}
|
||||
</PaginationLink>
|
||||
{/* Sayfalama */}
|
||||
{data.totalPages > 1 && (
|
||||
<Pagination className="mx-0 mt-4 justify-start">
|
||||
<PaginationContent className="justify-start">
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
href={buildHref({
|
||||
page: Math.max(1, data.currentPage - 1),
|
||||
category: data.selectedCategory,
|
||||
search: data.searchQuery,
|
||||
})}
|
||||
aria-disabled={data.currentPage <= 1}
|
||||
/>
|
||||
</PaginationItem>
|
||||
))}
|
||||
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
href={pageHref(Math.min(data.totalPages, data.currentPage + 1), data.selectedCategory)}
|
||||
aria-disabled={data.currentPage >= data.totalPages}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
{pageNumbers.map((page) => (
|
||||
<PaginationItem key={page}>
|
||||
<PaginationLink
|
||||
href={buildHref({
|
||||
page,
|
||||
category: data.selectedCategory,
|
||||
search: data.searchQuery,
|
||||
})}
|
||||
isActive={page === data.currentPage}
|
||||
>
|
||||
{page}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
))}
|
||||
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
href={buildHref({
|
||||
page: Math.min(data.totalPages, data.currentPage + 1),
|
||||
category: data.selectedCategory,
|
||||
search: data.searchQuery,
|
||||
})}
|
||||
aria-disabled={data.currentPage >= data.totalPages}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user