From 852646e40c4c8eb0f68bebef3d9b85a68ce39832 Mon Sep 17 00:00:00 2001
From: achmad <anakinskywalk1@gmail.com>
Date: Thu, 28 May 2026 22:30:32 +0700
Subject: [PATCH] feat: ArticleBody renderer and TagRow

---
 components/article/ArticleBody.tsx | 12 ++++++++++++
 components/article/TagRow.tsx      | 22 ++++++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 components/article/ArticleBody.tsx
 create mode 100644 components/article/TagRow.tsx

diff --git a/components/article/ArticleBody.tsx b/components/article/ArticleBody.tsx
new file mode 100644
index 0000000..852e861
--- /dev/null
+++ b/components/article/ArticleBody.tsx
@@ -0,0 +1,12 @@
+interface Props {
+  html: string
+}
+
+export default function ArticleBody({ html }: Props) {
+  return (
+    <div
+      className="article-body"
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+}
diff --git a/components/article/TagRow.tsx b/components/article/TagRow.tsx
new file mode 100644
index 0000000..07557ae
--- /dev/null
+++ b/components/article/TagRow.tsx
@@ -0,0 +1,22 @@
+import type { ArticleTag } from '@/lib/types'
+
+interface Props {
+  tags: ArticleTag[]
+}
+
+export default function TagRow({ tags }: Props) {
+  if (!tags || tags.length === 0) return null
+
+  return (
+    <div className="flex flex-wrap gap-2 pt-7 border-t border-border mt-8">
+      {tags.map(({ tags_id: tag }) => (
+        <span
+          key={tag.id}
+          className="bg-bg-card border border-border text-text-secondary text-xs px-3 py-1 rounded-sm hover:border-accent hover:text-accent transition-colors cursor-default"
+        >
+          {tag.name}
+        </span>
+      ))}
+    </div>
+  )
+}