manual save(2026-01-19 16:32)

src/pages/News.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { Header } from '../components/Header'
+import { Footer } from '../components/Footer'
+import { PostCard } from '../components/PostCard'
+import { PostCardSkeleton } from '../components/PostCardSkeleton'
+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 } 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 stripHtml = (html: string): string => {
+  const tmp = document.createElement('div')
+  tmp.innerHTML = html
+  return tmp.textContent || tmp.innerText || ''
+}
+
+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 News: React.FC = () => {
+  const { t } = useI18n()
+  const [posts, setPosts] = useState<Post[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchPosts = async () => {
+      try {
+        setLoading(true)
+        setError(null)
+
+        const response = (await Posts.listPosts({
+          client,
+          query: {
+            limit: 12,
+            sort: '-createdAt',
+          },
+        })) as ListPostsResult
+
+        setPosts(response.data?.docs ?? [])
+      } catch (err) {
+        setError(err instanceof Error ? err.message : t('common.loadFailed'))
+        console.error('Fetch posts failed:', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchPosts()
+  }, [t])
+
+  const items = useMemo(() => posts, [posts])
+
+  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-10">
+        <header className="mb-10" aria-label={t('news.title')}>
+          <h1 className="text-4xl font-semibold tracking-tight">{t('news.title')}</h1>
+          <p className="mt-3 max-w-2xl text-zinc-600">{t('news.subtitle')}</p>
+        </header>
+
+        {error ? (
+          <div
+            role="alert"
+            className="rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-red-800"
+          >
+            {error}
+          </div>
+        ) : null}
+
+        <section className="mt-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {loading
+            ? Array.from({ length: 6 }).map((_, i) => <PostCardSkeleton key={i} />)
+            : items.map((post) => (
+                <PostCard
+                  key={post.id}
+                  title={post.title}
+                  excerpt={stripHtml(post.content_html ?? '') || post.title}
+                  category={getCategoryTitle(post)}
+                  date={formatDate(post.createdAt)}
+                  to={`/news/${post.slug}`}
+                />
+              ))}
+        </section>
+
+        {!loading && items.length === 0 && !error ? (
+          <div className="py-14 text-center text-zinc-600">{t('news.empty')}</div>
+        ) : null}
+      </main>
+
+      <Footer />
+    </div>
+  )
+}