feat: add BlogPage and BlogContent components with blog data integration
This commit is contained in:
Poyraz Avsever
@@ -0,0 +1,5 @@
|
||||
import { BlogContent } from "@/components/blog-content";
|
||||
|
||||
export default function BlogPage() {
|
||||
return <BlogContent />;
|
||||
}
|
||||
+2
-2
@@ -48,8 +48,8 @@ export default function RootLayout({
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className="h-dvh overflow-hidden bg-background text-foreground antialiased">
|
||||
<div className="mx-auto flex h-dvh w-full max-w-4xl flex-col overflow-hidden px-4 py-8 sm:px-6 sm:py-10">
|
||||
<body className="min-h-dvh bg-background text-foreground antialiased">
|
||||
<div className="mx-auto flex w-full max-w-4xl flex-col overflow-hidden px-4 py-8 sm:px-6 sm:py-10">
|
||||
<SiteNavbar />
|
||||
<AnnouncementBar
|
||||
variant="branded"
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
import { Badge, Card, Typography } from "poyraz-ui/atoms";
|
||||
import {
|
||||
ArticleCard,
|
||||
NewsCard,
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "poyraz-ui/molecules";
|
||||
import {
|
||||
BLOG_ARTICLES,
|
||||
BLOG_CATEGORIES,
|
||||
BLOG_NEWS,
|
||||
RECENT_COMMENTS,
|
||||
} from "@/data/blog";
|
||||
|
||||
export function BlogContent() {
|
||||
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">
|
||||
{BLOG_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"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 md:grid-rows-[auto_1fr]">
|
||||
<Card className="rounded-sm border-border p-4">
|
||||
<Typography variant="large">Categories</Typography>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{BLOG_CATEGORIES.map((category, index) => (
|
||||
<Badge
|
||||
key={category}
|
||||
variant={index === 0 ? "default" : "outline"}
|
||||
className="rounded-sm"
|
||||
>
|
||||
{category}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="rounded-sm border-border p-4">
|
||||
<Typography variant="large">Recent comments</Typography>
|
||||
<div className="mt-3 space-y-2">
|
||||
{RECENT_COMMENTS.map((comment) => (
|
||||
<Card key={comment.id} className="rounded-sm border-border p-3">
|
||||
<Typography variant="small" className="font-semibold text-foreground">
|
||||
{comment.author}
|
||||
</Typography>
|
||||
<Typography variant="small" className="mt-1 text-muted-foreground">
|
||||
{comment.text}
|
||||
</Typography>
|
||||
<Typography variant="small" className="mt-2 text-red-600">
|
||||
{comment.date}
|
||||
</Typography>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="grid gap-3 md:grid-cols-3">
|
||||
{BLOG_ARTICLES.map((post) => (
|
||||
<ArticleCard
|
||||
key={post.id}
|
||||
image={post.image}
|
||||
category={post.category}
|
||||
title={post.title}
|
||||
excerpt={post.excerpt}
|
||||
date={post.date}
|
||||
readTime={post.readTime}
|
||||
href={post.href}
|
||||
className="rounded-sm border-border"
|
||||
author={{ name: "Poyraz Avsever", avatar: "/logo/logo.jpeg" }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Pagination className="mx-0 mt-4 justify-end">
|
||||
<PaginationContent className="justify-start">
|
||||
<PaginationItem>
|
||||
<PaginationPrevious href="/blog" />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="/blog" isActive>
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="/blog?page=2">2</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="/blog?page=3">3</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationNext href="/blog?page=2" />
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
+193
@@ -0,0 +1,193 @@
|
||||
export const BLOG_NEWS = [
|
||||
{
|
||||
id: "next-16-notes",
|
||||
title: "Next.js 16 Released with Major Performance Improvements",
|
||||
category: "Technology",
|
||||
image: "/news/performance.svg",
|
||||
date: "Mar 6, 2026",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
id: "ui-system-basics",
|
||||
title: "Minimalism in Modern UI: Less Is Truly More",
|
||||
category: "Design",
|
||||
image: "/news/design.svg",
|
||||
date: "Mar 5, 2026",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
id: "next-16-notes-2",
|
||||
title: "Next.js 16 Released with Major Performance Improvements",
|
||||
category: "Technology",
|
||||
image: "/news/performance.svg",
|
||||
date: "Mar 6, 2026",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
id: "ui-system-basics-2",
|
||||
title: "Minimalism in Modern UI: Less Is Truly More",
|
||||
category: "Design",
|
||||
image: "/news/design.svg",
|
||||
date: "Mar 5, 2026",
|
||||
href: "/blog",
|
||||
},
|
||||
] as const;
|
||||
|
||||
export const BLOG_ARTICLES = [
|
||||
{
|
||||
id: "article-design-systems-1",
|
||||
title: "Building Minimal Design Systems",
|
||||
excerpt:
|
||||
"A deep dive into creating clean, composable components with Tailwind CSS and Radix primitives.",
|
||||
category: "React",
|
||||
image: "/news/design.svg",
|
||||
date: "Mar 2026",
|
||||
readTime: "4 min",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-2",
|
||||
title: "Practical UI Consistency for Startup Teams",
|
||||
excerpt:
|
||||
"How to keep visual quality stable while features ship fast across multiple screens.",
|
||||
category: "Design",
|
||||
image: "/news/performance.svg",
|
||||
date: "Mar 2026",
|
||||
readTime: "5 min",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-3",
|
||||
title: "React Patterns That Age Well in Production",
|
||||
excerpt:
|
||||
"Component composition, state boundaries, and patterns that remain maintainable over time.",
|
||||
category: "React",
|
||||
image: "/news/performance.svg",
|
||||
date: "Mar 2026",
|
||||
readTime: "6 min",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-4",
|
||||
title: "Mobile-First Decisions for Web Developers",
|
||||
excerpt:
|
||||
"A short guide to adapting web habits when product constraints are mobile-first.",
|
||||
category: "Mobile",
|
||||
image: "/images/hero1.png",
|
||||
date: "Feb 2026",
|
||||
readTime: "4 min",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-5",
|
||||
title: "Design Tokens Without Enterprise Complexity",
|
||||
excerpt:
|
||||
"A lightweight token strategy for colors, spacing, and type that still scales.",
|
||||
category: "Design",
|
||||
image: "/news/design.svg",
|
||||
date: "Feb 2026",
|
||||
readTime: "5 min",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-6",
|
||||
title: "Improving Developer Experience in UI Projects",
|
||||
excerpt:
|
||||
"Naming, structure, and defaults that reduce friction for both current and future contributors.",
|
||||
category: "Development",
|
||||
image: "/news/performance.svg",
|
||||
date: "Feb 2026",
|
||||
readTime: "5 min",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-7",
|
||||
title: "Fast Feedback Loops for Better Frontend Quality",
|
||||
excerpt:
|
||||
"Practical review loops that catch UX and implementation issues before release.",
|
||||
category: "Career",
|
||||
image: "/images/hero2.png",
|
||||
date: "Jan 2026",
|
||||
readTime: "4 min",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-8",
|
||||
title: "Scaling Component Libraries Responsibly",
|
||||
excerpt:
|
||||
"When to abstract, when to duplicate, and how to avoid premature complexity.",
|
||||
category: "React",
|
||||
image: "/news/design.svg",
|
||||
date: "Jan 2026",
|
||||
readTime: "6 min",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-9",
|
||||
title: "Clean Navigation UX for Portfolio Sites",
|
||||
excerpt:
|
||||
"Simple navigation patterns that improve flow, clarity, and perceived polish.",
|
||||
category: "Design",
|
||||
image: "/news/performance.svg",
|
||||
date: "Jan 2026",
|
||||
readTime: "3 min",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-10",
|
||||
title: "What I Learned from Shipping Weekly",
|
||||
excerpt:
|
||||
"A personal workflow for shipping consistently without losing architectural direction.",
|
||||
category: "Productivity",
|
||||
image: "/images/hero1.png",
|
||||
date: "Dec 2025",
|
||||
readTime: "4 min",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-11",
|
||||
title: "Reducing UI Noise with Fewer Decisions",
|
||||
excerpt:
|
||||
"How constraints can improve speed, coherence, and confidence across a project.",
|
||||
category: "Design",
|
||||
image: "/news/design.svg",
|
||||
date: "Dec 2025",
|
||||
readTime: "4 min",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-12",
|
||||
title: "Portfolio Engineering Beyond Visuals",
|
||||
excerpt:
|
||||
"Performance, accessibility, and maintainability decisions that matter in real portfolios.",
|
||||
category: "Development",
|
||||
image: "/news/performance.svg",
|
||||
date: "Dec 2025",
|
||||
readTime: "6 min",
|
||||
href: "/blog",
|
||||
},
|
||||
] as const;
|
||||
|
||||
export const BLOG_CATEGORIES = [
|
||||
"All",
|
||||
"Development",
|
||||
"Design",
|
||||
"Mobile",
|
||||
"Career",
|
||||
"Productivity",
|
||||
] as const;
|
||||
|
||||
export const RECENT_COMMENTS = [
|
||||
{
|
||||
id: "comment-1",
|
||||
author: "Ahmet Y.",
|
||||
text: "The performance checklist was super practical. Thanks for sharing.",
|
||||
date: "2 days ago",
|
||||
},
|
||||
{
|
||||
id: "comment-2",
|
||||
author: "Merve K.",
|
||||
text: "I liked how you simplified the design system approach.",
|
||||
date: "4 days ago",
|
||||
},
|
||||
] as const;
|
||||
Reference in New Issue
Block a user