-
暂无文章
+
+
+
+
+ {t('home.section.latestNews')}
+
+
+ {t('home.section.latestNews.desc')}
+
+
+
+ {t('home.section.latestNews.more')}
+
+ {error}
+
+ ) : null}
+
+
+ {loading
+ ? Array.from({ length: 6 }).map((_, i) => (
+
+ ))
+ : items.map((post) => (
+
+ ))}
+
+ {t('home.emptyNews')}
+
+ ) : null}
+
+
+
+
+ {t('home.cta.title')}
+
+ {t('home.cta.desc')}
+
+
+
+
diff --git a/src/pages/Menu.tsx b/src/pages/Menu.tsx
new file mode 100644
index 0000000..03915cd
--- /dev/null
+++ b/src/pages/Menu.tsx
@@ -0,0 +1,243 @@
+import React from 'react'
+import { Header } from '../components/Header'
+import { Footer } from '../components/Footer'
+import { SITE } from '../site'
+import { useI18n } from '../i18n/useI18n'
+
+type MenuItem = {
+ nameTh: string
+ nameZh: string
+ nameEn?: string
+ descriptionTh: string
+ descriptionZh: string
+ spicyLevel: 0 | 1 | 2 | 3
+ priceThb?: number
+}
+
+const formatPrice = (priceThb?: number) => {
+ if (!priceThb) return undefined
+ return new Intl.NumberFormat('th-TH', {
+ style: 'currency',
+ currency: 'THB',
+ maximumFractionDigits: 0,
+ }).format(priceThb)
+}
+
+const getSpicyLabel = (locale: 'th' | 'zh', level: MenuItem['spicyLevel']) => {
+ return locale === 'zh' ? `辣度 ${level}/3` : `ระดับความเผ็ด ${level}/3`
+}
+
+const SpicyDots: React.FC<{ level: MenuItem['spicyLevel']; locale: 'th' | 'zh' }> = ({
+ level,
+ locale,
+}) => {
+ const dots = Array.from({ length: 3 }, (_, i) => i < level)
+
+ return (
+
+ {dots.map((on, idx) => (
+
+ ))}
+
+ )
+}
+
+const SECTIONS: Array<{
+ titleTh: string
+ titleZh: string
+ subtitleTh: string
+ subtitleZh: string
+ items: MenuItem[]
+}> = [
+ {
+ titleTh: 'เมนูซิกเนเจอร์',
+ titleZh: '招牌菜',
+ subtitleTh: 'จานที่ลูกค้ากลับมาซ้ำบ่อยที่สุด',
+ subtitleZh: '回头客点得最多的招牌必点',
+ items: [
+ {
+ nameTh: 'หมูผัดพริกแห้งหูหนาน',
+ nameZh: '湘味干辣椒小炒肉',
+ nameEn: 'Hunan Stir-fried Pork',
+ descriptionTh: 'พริกแห้งหอม ๆ ผัดไฟแรง รสเผ็ดหอมเค็มหวานกำลังดี',
+ descriptionZh: '干辣椒香气十足，猛火快炒，香辣开胃。',
+ spicyLevel: 3,
+ priceThb: 220,
+ },
+ {
+ nameTh: 'ปลากะพงนึ่งพริกสด',
+ nameZh: '鲜椒蒸鲈鱼',
+ nameEn: 'Steamed Fish with Chili',
+ descriptionTh: 'เนื้อปลานุ่ม ซอสพริกสดจัดจ้าน หอมกระเทียมต้นหอม',
+ descriptionZh: '鱼肉细嫩，鲜椒酱汁香辣，蒜香葱香更提味。',
+ spicyLevel: 2,
+ priceThb: 420,
+ },
+ {
+ nameTh: 'ไก่ผัดขิงหูหนาน',
+ nameZh: '湘味姜爆鸡',
+ nameEn: 'Hunan Ginger Chicken',
+ descriptionTh: 'ขิงสดเผ็ดร้อน หอมกลิ่นกระทะ ทานกับข้าวสวยร้อน ๆ',
+ descriptionZh: '鲜姜爆香，锅气十足，配米饭特别下饭。',
+ spicyLevel: 1,
+ priceThb: 190,
+ },
+ ],
+ },
+ {
+ titleTh: 'กับข้าว',
+ titleZh: '热菜',
+ subtitleTh: 'ปรับระดับความเผ็ดได้',
+ subtitleZh: '可按口味调整辣度',
+ items: [
+ {
+ nameTh: 'ผัดผักรวมซอสกระเทียม',
+ nameZh: '蒜香清炒时蔬',
+ descriptionTh: 'ผักกรอบหวาน ผัดซอสกระเทียมหอม ๆ',
+ descriptionZh: '时蔬清甜爽脆，蒜香提味。',
+ spicyLevel: 0,
+ priceThb: 140,
+ },
+ {
+ nameTh: 'เต้าหู้ผัดซอสพริกหูหนาน',
+ nameZh: '湘味椒香炒豆腐',
+ descriptionTh: 'เต้าหู้นุ่ม ซอสพริกหูหนานเข้มข้น',
+ descriptionZh: '豆腐嫩滑，湘味辣酱浓郁入味。',
+ spicyLevel: 2,
+ priceThb: 160,
+ },
+ {
+ nameTh: 'ซี่โครงหมูอบพริกไทยดำ',
+ nameZh: '黑椒焖排骨',
+ descriptionTh: 'ซี่โครงนุ่ม ๆ ซอสพริกไทยดำเข้มข้น',
+ descriptionZh: '排骨软烂入味，黑胡椒酱浓香。',
+ spicyLevel: 1,
+ priceThb: 260,
+ },
+ ],
+ },
+ {
+ titleTh: 'ข้าวและเส้น',
+ titleZh: '饭/面',
+ subtitleTh: 'จานอิ่มเร็ว เหมาะกับมื้อกลางวัน',
+ subtitleZh: '快速饱腹，午餐首选',
+ items: [
+ {
+ nameTh: 'ข้าวผัดหูหนาน',
+ nameZh: '湘味炒饭',
+ descriptionTh: 'ข้าวผัดไฟแรง กลิ่นกระทะชัด ใส่ผักและเนื้อสัตว์ตามเลือก',
+ descriptionZh: '大火炒制锅气足，可选配菜与肉类。',
+ spicyLevel: 1,
+ priceThb: 120,
+ },
+ {
+ nameTh: 'หมี่ผัดซอสเผ็ดหูหนาน',
+ nameZh: '湘味香辣炒面',
+ descriptionTh: 'เส้นเหนียวนุ่ม ซอสเผ็ดหอม ท็อปด้วยงาขาว',
+ descriptionZh: '面条劲道，香辣酱汁开胃，撒白芝麻更香。',
+ spicyLevel: 2,
+ priceThb: 150,
+ },
+ ],
+ },
+]
+
+export const Menu: React.FC = () => {
+ const { t, locale } = useI18n()
+ const isZh = locale === 'zh'
+
+ return (
+
+
+
+
+
+
+
+ {SECTIONS.map((section) => (
+
+
+ {isZh ? section.titleZh : section.titleTh}
+
+
+ {isZh ? section.subtitleZh : section.subtitleTh}
+
+
+
+ {section.items.map((item) => (
+
+
+
+
+ {(isZh ? item.nameZh : item.nameTh)}{' '}
+ {item.nameEn ? (
+
+ ({item.nameEn})
+
+ ) : null}
+
+
+ {isZh ? item.descriptionZh : item.descriptionTh}
+
+
+
+
+ {formatPrice(item.priceThb) ? (
+
+ {formatPrice(item.priceThb)}
+
+ ) : null}
+
+
+ ))}
+
+
{t('menu.allergy.title')}
+ {t('menu.allergy.desc')}
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/News.tsx b/src/pages/News.tsx
new file mode 100644
index 0000000..aeff1d5
--- /dev/null
+++ b/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
= { docs: T[] }
+
+type ListPostsResult = { data?: ListResponse }
+
+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([])
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(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 (
+
+
+
+
+
+ {t('news.title')}
+ {t('news.subtitle')}
+
+
+ {error ? (
+
+ {error}
+
+ ) : null}
+
+
+ {loading
+ ? Array.from({ length: 6 }).map((_, i) => )
+ : items.map((post) => (
+
+ ))}
+
+
+ {!loading && items.length === 0 && !error ? (
+ {t('news.empty')}
+ ) : null}
+
+
+
+
+
+
+ {t('notFound.title')}
+ {t('notFound.desc')}
+
+
+ {t('notFound.back')}
+
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
@@ -92,17 +108,19 @@ export const PostDetail: React.FC = () => {
if (error || !post) {
return (
-
+
-
-
-
{error || '文章不存在'}
-
+
+
+
{error || 'ไม่พบข้อมูลข่าวสาร'}
+
+
+ {t('post.back')}
+
+
@@ -111,43 +129,44 @@ export const PostDetail: React.FC = () => {
}
return (
-
+
-
-
-
- {post.heroImage && (
+ {hero?.url ? (
- )}
+ ) : null}
-
-