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 (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body className="h-dvh overflow-hidden bg-background text-foreground antialiased">
|
<body className="min-h-dvh 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">
|
<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 />
|
<SiteNavbar />
|
||||||
<AnnouncementBar
|
<AnnouncementBar
|
||||||
variant="branded"
|
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