feat: enhance blog detail page with engagement features including likes and comments

app/blog/[slug]/page.tsx

@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation";
 import { BlogDetailContent } from "@/components/blog-detail-content";
 import { getBlogDetailBySlug } from "@/data/blog-detail";
+import { getBlogEngagementBySlug } from "@/data/blog-engagement";
 
 type BlogDetailPageProps = {
   params: Promise<{ slug: string }>;
@@ -9,10 +10,11 @@ type BlogDetailPageProps = {
 export default async function BlogDetailPage({ params }: BlogDetailPageProps) {
   const { slug } = await params;
   const post = getBlogDetailBySlug(slug);
+  const engagement = getBlogEngagementBySlug(slug);
 
   if (!post) {
     notFound();
   }
 
-  return <BlogDetailContent post={post} />;
+  return <BlogDetailContent post={post} engagement={engagement} />;
 }

components/blog-content.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Badge, Card, Typography } from "poyraz-ui/atoms";
 import {
   ArticleCard,
@@ -68,6 +70,7 @@ export function BlogContent() {
               ))}
             </div>
           </Card>
+
         </div>
       </div>
 

components/blog-detail-content.tsx

@@ -5,13 +5,26 @@ import Link from "next/link";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Icon } from "@iconify/react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { Badge, Card, Typography } from "poyraz-ui/atoms";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Button,
+  Card,
+  Textarea,
+  Typography,
+} from "poyraz-ui/atoms";
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "poyraz-ui/molecules";
 import type { BlogDetail } from "@/data/blog-detail";
+import type { BlogComment, BlogEngagement } from "@/data/blog-engagement";
 
 type BlogDetailContentProps = {
   post: BlogDetail;
+  engagement: BlogEngagement;
 };
 
 function MermaidBlock({ chart }: { chart: string }) {
@@ -71,9 +84,16 @@ function MermaidBlock({ chart }: { chart: string }) {
   );
 }
 
-export function BlogDetailContent({ post }: BlogDetailContentProps) {
+export function BlogDetailContent({ post, engagement }: BlogDetailContentProps) {
   const scrollerRef = useRef<HTMLDivElement | null>(null);
   const [progress, setProgress] = useState(0);
+  const [liked, setLiked] = useState(false);
+  const [likeCount, setLikeCount] = useState(engagement.likes);
+  const [comments, setComments] = useState<BlogComment[]>(engagement.comments);
+  const [commentSheetOpen, setCommentSheetOpen] = useState(false);
+  const [githubAuthed, setGithubAuthed] = useState(false);
+  const [draft, setDraft] = useState("");
+  const [replyTo, setReplyTo] = useState<{ id: string; author: string } | null>(null);
 
   const progressWidth = useMemo(() => `${Math.min(100, Math.max(0, progress))}%`, [progress]);
 
@@ -90,25 +110,81 @@ export function BlogDetailContent({ post }: BlogDetailContentProps) {
     setProgress((el.scrollTop / scrollable) * 100);
   };
 
+  const toggleLike = () => {
+    setLiked((prev) => {
+      const next = !prev;
+      setLikeCount((count) => (next ? count + 1 : Math.max(0, count - 1)));
+      return next;
+    });
+  };
+
+  const handleReplyClick = (id: string, author: string) => {
+    setReplyTo({ id, author });
+    setCommentSheetOpen(true);
+  };
+
+  const handleSubmitComment = () => {
+    if (!githubAuthed) return;
+    const content = draft.trim();
+    if (!content) return;
+
+    if (replyTo) {
+      setComments((prev) =>
+        prev.map((item) =>
+          item.id === replyTo.id
+            ? {
+                ...item,
+                replies: [
+                  ...item.replies,
+                  {
+                    id: `reply-${Date.now()}`,
+                    author: "You (GitHub)",
+                    avatar: "/logo/logo.jpeg",
+                    date: "Just now",
+                    content,
+                    likes: 0,
+                  },
+                ],
+              }
+            : item,
+        ),
+      );
+      setReplyTo(null);
+    } else {
+      setComments((prev) => [
+        {
+          id: `comment-${Date.now()}`,
+          author: "You (GitHub)",
+          avatar: "/logo/logo.jpeg",
+          date: "Just now",
+          content,
+          likes: 0,
+          replies: [],
+        },
+        ...prev,
+      ]);
+    }
+
+    setDraft("");
+  };
+
   return (
+    <>
+      <div className="fixed top-0 left-0 z-50 h-1 w-full bg-border/70">
+        <div className="h-full bg-red-600 transition-[width] duration-100" style={{ width: progressWidth }} />
+      </div>
+
       <div
         ref={scrollerRef}
         onScroll={handleScroll}
         className="relative h-full overflow-y-auto rounded-sm border border-border"
       >
-      <div className="sticky top-0 z-20 h-1 w-full bg-border">
-        <div
-          className="h-full bg-red-600 transition-[width] duration-100"
-          style={{ width: progressWidth }}
-        />
-      </div>
-
         <article className="space-y-5 p-5 md:p-6">
           <Link
             href="/blog"
             className="inline-flex items-center rounded-sm border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
           >
-          ← Back to blog
+            {"<- Back to blog"}
           </Link>
 
           <header className="space-y-3">
@@ -134,6 +210,169 @@ export function BlogDetailContent({ post }: BlogDetailContentProps) {
             />
           </Card>
 
+          <div className="flex items-center justify-end gap-2">
+            <Button
+              type="button"
+              variant={liked ? "default" : "outline"}
+              className="h-9 w-9 rounded-sm p-0"
+              onClick={toggleLike}
+              aria-label={`Like post (${likeCount})`}
+              title={`Like (${likeCount})`}
+            >
+              <Icon icon={liked ? "mdi:heart" : "mdi:heart-outline"} width={18} height={18} />
+            </Button>
+
+            <Sheet open={commentSheetOpen} onOpenChange={setCommentSheetOpen}>
+              <SheetTrigger asChild>
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="h-9 w-9 rounded-sm p-0"
+                  aria-label={`Open comments (${comments.length})`}
+                  title={`Comments (${comments.length})`}
+                >
+                  <Icon icon="mdi:comment-outline" width={18} height={18} />
+                </Button>
+              </SheetTrigger>
+
+              <SheetContent side="right" className="flex h-dvh w-full max-w-xl flex-col p-0">
+                <div className="border-b border-border px-4 py-3">
+                  <SheetTitle>Comments</SheetTitle>
+                </div>
+
+                <div className="flex min-h-0 flex-1 flex-col gap-3 p-4">
+                  <div className="min-h-0 flex-1 space-y-3 overflow-y-auto pr-1">
+                    {comments.map((item) => (
+                      <Card key={item.id} className="overflow-visible rounded-sm border-border p-3">
+                        <div className="flex items-start gap-2">
+                          <Avatar className="h-8 w-8 rounded-sm">
+                            <AvatarImage src={item.avatar} alt={item.author} />
+                            <AvatarFallback className="rounded-sm bg-muted text-xs">
+                              {item.author.slice(0, 2).toUpperCase()}
+                            </AvatarFallback>
+                          </Avatar>
+                          <div className="min-w-0 flex-1">
+                            <div className="flex flex-wrap items-center gap-2">
+                              <Typography variant="small" className="font-semibold text-foreground">
+                                {item.author}
+                              </Typography>
+                              <Typography variant="small" className="text-muted-foreground">
+                                {item.date}
+                              </Typography>
+                            </div>
+                            <Typography variant="small" className="mt-1 text-muted-foreground">
+                              {item.content}
+                            </Typography>
+                            <div className="mt-2 flex items-center gap-2">
+                              <Button type="button" variant="outline" size="sm" className="rounded-sm">
+                                Like ({item.likes})
+                              </Button>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                className="rounded-sm"
+                                onClick={() => handleReplyClick(item.id, item.author)}
+                              >
+                                Reply
+                              </Button>
+                            </div>
+
+                            {item.replies.length > 0 ? (
+                              <div className="mt-3 grid gap-2 border-l border-border pl-3">
+                                {item.replies.map((reply) => (
+                                  <Card key={reply.id} className="rounded-sm border-border p-2.5">
+                                    <div className="flex items-start gap-2">
+                                      <Avatar className="h-7 w-7 rounded-sm">
+                                        <AvatarImage src={reply.avatar} alt={reply.author} />
+                                        <AvatarFallback className="rounded-sm bg-muted text-[10px]">
+                                          {reply.author.slice(0, 2).toUpperCase()}
+                                        </AvatarFallback>
+                                      </Avatar>
+                                      <div className="min-w-0">
+                                        <div className="flex flex-wrap items-center gap-2">
+                                          <Typography
+                                            variant="small"
+                                            className="font-semibold text-foreground"
+                                          >
+                                            {reply.author}
+                                          </Typography>
+                                          <Typography variant="small" className="text-muted-foreground">
+                                            {reply.date}
+                                          </Typography>
+                                        </div>
+                                        <Typography variant="small" className="mt-1 text-muted-foreground">
+                                          {reply.content}
+                                        </Typography>
+                                      </div>
+                                    </div>
+                                  </Card>
+                                ))}
+                              </div>
+                            ) : null}
+                          </div>
+                        </div>
+                      </Card>
+                    ))}
+                  </div>
+
+                  {!githubAuthed ? (
+                    <Card className="rounded-sm border-border p-3">
+                      <Typography variant="small" className="text-muted-foreground">
+                        You need to sign in with GitHub before posting comments.
+                      </Typography>
+                      <Button
+                        type="button"
+                        className="mt-2 rounded-sm"
+                        onClick={() => setGithubAuthed(true)}
+                      >
+                        Continue with GitHub
+                      </Button>
+                    </Card>
+                  ) : null}
+
+                  {replyTo ? (
+                    <Card className="rounded-sm border-border p-2">
+                      <div className="flex flex-wrap items-center justify-between gap-2">
+                        <Typography variant="small" className="text-muted-foreground">
+                          Replying to {replyTo.author}
+                        </Typography>
+                        <Button
+                          type="button"
+                          size="sm"
+                          variant="outline"
+                          className="rounded-sm"
+                          onClick={() => setReplyTo(null)}
+                        >
+                          Cancel
+                        </Button>
+                      </div>
+                    </Card>
+                  ) : null}
+
+                  <Card className="rounded-sm border-border p-3">
+                    <Textarea
+                      value={draft}
+                      onChange={(event) => setDraft(event.target.value)}
+                      placeholder={githubAuthed ? "Write your comment..." : "Sign in with GitHub first"}
+                      className="min-h-24 rounded-sm"
+                      disabled={!githubAuthed}
+                    />
+                    <div className="mt-2 flex justify-end">
+                      <Button
+                        type="button"
+                        className="rounded-sm"
+                        onClick={handleSubmitComment}
+                        disabled={!githubAuthed || !draft.trim()}
+                      >
+                        Post Comment
+                      </Button>
+                    </div>
+                  </Card>
+                </div>
+              </SheetContent>
+            </Sheet>
+          </div>
           <section className="space-y-4">
             <ReactMarkdown
               remarkPlugins={[remarkGfm]}
@@ -171,9 +410,7 @@ export function BlogDetailContent({ post }: BlogDetailContentProps) {
                 th: ({ children }) => (
                   <th className="px-3 py-2 text-left font-semibold text-foreground">{children}</th>
                 ),
-              td: ({ children }) => (
+                td: ({ children }) => <td className="px-3 py-2 align-top text-foreground">{children}</td>,
-                <td className="px-3 py-2 align-top text-foreground">{children}</td>
-              ),
                 code: ({ className, children }) => {
                   const match = /language-(\w+)/.exec(className ?? "");
                   const codeText = String(children).replace(/\n$/, "");
@@ -213,5 +450,6 @@ export function BlogDetailContent({ post }: BlogDetailContentProps) {
           </section>
         </article>
       </div>
+    </>
   );
 }

data/blog-engagement.ts

@@ -0,0 +1,73 @@
+export type BlogReply = {
+  id: string;
+  author: string;
+  avatar: string;
+  date: string;
+  content: string;
+  likes: number;
+};
+
+export type BlogComment = {
+  id: string;
+  author: string;
+  avatar: string;
+  date: string;
+  content: string;
+  likes: number;
+  replies: BlogReply[];
+};
+
+export type BlogEngagement = {
+  slug: string;
+  likes: number;
+  comments: BlogComment[];
+};
+
+export const BLOG_ENGAGEMENT: BlogEngagement[] = [
+  {
+    slug: "building-minimal-design-systems",
+    likes: 184,
+    comments: [
+      {
+        id: "comment-1",
+        author: "Merve K.",
+        avatar: "/avatars/berat.png",
+        date: "2 days ago",
+        content:
+          "The constraints-first point is very practical. We had the same issue with variant explosion.",
+        likes: 12,
+        replies: [
+          {
+            id: "reply-1",
+            author: "Poyraz Avsever",
+            avatar: "/logo/logo.jpeg",
+            date: "1 day ago",
+            content:
+              "Exactly. Once defaults are strong, most edge cases disappear without extra variants.",
+            likes: 6,
+          },
+        ],
+      },
+      {
+        id: "comment-2",
+        author: "Ahmet Y.",
+        avatar: "/avatars/ali.png",
+        date: "5 days ago",
+        content:
+          "Could you also share a checklist for documenting component states in PR reviews?",
+        likes: 8,
+        replies: [],
+      },
+    ],
+  },
+];
+
+const EMPTY_ENGAGEMENT: BlogEngagement = {
+  slug: "default",
+  likes: 0,
+  comments: [],
+};
+
+export function getBlogEngagementBySlug(slug: string): BlogEngagement {
+  return BLOG_ENGAGEMENT.find((item) => item.slug === slug) ?? EMPTY_ENGAGEMENT;
+}