first commit

src/pages/PostDetail.tsx

@@ -0,0 +1,177 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { Link, useParams } from 'react-router-dom'
+import { Header } from '../components/Header'
+import { Footer } from '../components/Footer'
+import { Posts } from '../clientsdk/sdk.gen'
+import { createClient } from '../clientsdk/client'
+import { customQuerySerializer } from '../clientsdk/querySerializer'
+import type { Post } from '../clientsdk/types.gen'
+import { TENANT_API_KEY, TENANT_SLUG, API_URL } from '../config'
+import { isCategory, isMedia } from '../utils/payload'
+import { useI18n } from '../i18n/useI18n'
+
+type ListResponse<T> = { docs: T[] }
+
+type ListPostsResult = { data?: ListResponse<Post> }
+
+const client = createClient({
+  baseUrl: API_URL,
+  querySerializer: customQuerySerializer,
+  headers: {
+    'X-Tenant-Slug': TENANT_SLUG,
+    'X-API-Key': TENANT_API_KEY,
+  },
+})
+
+const formatDate = (dateString: string): string => {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('th-TH', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+
+const getCategoryTitle = (post: Post): string | undefined => {
+  const first = post.categories?.[0]
+  return isCategory(first) ? first.title : undefined
+}
+
+export const PostDetail: React.FC = () => {
+  const { t } = useI18n()
+  const { slug } = useParams<{ slug: string }>()
+  const [post, setPost] = useState<Post | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!slug) return
+
+    const fetchPost = async () => {
+      try {
+        setLoading(true)
+        setError(null)
+
+        const response = (await Posts.listPosts({
+          client,
+          query: {
+            where: {
+              slug: {
+                equals: slug,
+              },
+            },
+            limit: 1,
+          },
+        })) as ListPostsResult
+
+        setPost(response.data?.docs?.[0] ?? null)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : t('common.loadFailed'))
+        console.error('Fetch post failed:', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchPost()
+  }, [slug, t])
+
+  const hero = useMemo(() => {
+    if (!post) return undefined
+    return isMedia(post.heroImage) ? post.heroImage : undefined
+  }, [post])
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-zinc-50 text-zinc-900">
+        <Header />
+        <main className="mx-auto w-full max-w-3xl px-4 py-10">
+          <div
+            className="rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm sm:p-10"
+            aria-label="กำลังโหลด"
+          >
+            <div className="animate-pulse">
+              <div className="h-8 rounded bg-zinc-200/70" />
+              <div className="mt-4 h-4 w-1/3 rounded bg-zinc-200/70" />
+              <div className="mt-8 space-y-3">
+                <div className="h-4 rounded bg-zinc-200/70" />
+                <div className="h-4 rounded bg-zinc-200/70" />
+                <div className="h-4 w-3/4 rounded bg-zinc-200/70" />
+              </div>
+            </div>
+          </div>
+        </main>
+        <Footer />
+      </div>
+    )
+  }
+
+  if (error || !post) {
+    return (
+      <div className="min-h-screen bg-zinc-50 text-zinc-900">
+        <Header />
+        <main className="mx-auto w-full max-w-6xl px-4 py-16">
+          <div className="rounded-2xl border border-zinc-200 bg-white p-8 text-center shadow-sm">
+            <p className="text-red-700">{error || 'ไม่พบข้อมูลข่าวสาร'}</p>
+            <div className="mt-6">
+              <Link
+                to="/news"
+                className="inline-flex items-center justify-center rounded-xl bg-zinc-900 px-4 py-2 text-sm font-semibold text-white"
+              >
+                {t('post.back')}
+              </Link>
+            </div>
+          </div>
+        </main>
+        <Footer />
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-zinc-50 text-zinc-900">
+      <Header />
+
+      <main className="mx-auto w-full max-w-3xl px-4 py-10">
+        <article className="rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm sm:p-10">
+          <header>
+            {getCategoryTitle(post) ? (
+              <p className="text-sm font-semibold text-red-700">
+                {getCategoryTitle(post)}
+              </p>
+            ) : null}
+            <h1 className="mt-2 text-4xl font-semibold tracking-tight">
+              {post.title}
+            </h1>
+            <p className="mt-3 text-sm text-zinc-500">{formatDate(post.createdAt)}</p>
+          </header>
+
+          {hero?.url ? (
+            <img
+              src={hero.url}
+              alt={hero.alt || post.title}
+              className="mt-6 h-auto w-full rounded-2xl"
+              loading="lazy"
+            />
+          ) : null}
+
+          <div
+            className="prose prose-zinc mt-8 max-w-none prose-headings:scroll-mt-24"
+            dangerouslySetInnerHTML={{ __html: post.content_html || '' }}
+          />
+
+          <div className="mt-10 border-t border-zinc-200 pt-6">
+            <Link
+              to="/news"
+              className="inline-flex items-center justify-center rounded-xl bg-zinc-900 px-4 py-2 text-sm font-semibold text-white"
+            >
+              {t('post.back')}
+            </Link>
+          </div>
+        </article>
+      </main>
+
+      <Footer />
+    </div>
+  )
+}