238 lines
8.1 KiB
TypeScript
238 lines
8.1 KiB
TypeScript
import React, { useEffect, useMemo, useState } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
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 { SITE } from '../site'
|
|
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(undefined, {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
})
|
|
}
|
|
|
|
const getCategoryTitle = (post: Post): string | undefined => {
|
|
const first = post.categories?.[0]
|
|
return isCategory(first) ? first.title : undefined
|
|
}
|
|
|
|
const FEATURED_KEYS = [
|
|
{ title: 'home.feature.1.title', description: 'home.feature.1.desc' },
|
|
{ title: 'home.feature.2.title', description: 'home.feature.2.desc' },
|
|
{ title: 'home.feature.3.title', description: 'home.feature.3.desc' },
|
|
] as const
|
|
|
|
export const Home: React.FC = () => {
|
|
const { t, locale } = 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: 6,
|
|
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">
|
|
<section className="grid gap-10 py-12 lg:grid-cols-2 lg:items-center">
|
|
<div>
|
|
<p className="text-sm font-semibold tracking-wide text-red-700">
|
|
{locale === 'zh' ? SITE.nameZh : SITE.nameTh}
|
|
</p>
|
|
<h1 className="mt-3 text-5xl font-semibold tracking-tight">
|
|
{t('home.hero.title')}
|
|
</h1>
|
|
<p className="mt-4 max-w-xl text-zinc-600">{t('home.hero.desc')}</p>
|
|
|
|
<div className="mt-7 flex flex-wrap gap-3">
|
|
<Link
|
|
to="/menu"
|
|
className="inline-flex items-center justify-center rounded-xl bg-zinc-900 px-5 py-3 text-sm font-semibold text-white"
|
|
>
|
|
{t('home.hero.cta.menu')}
|
|
</Link>
|
|
<Link
|
|
to="/contact"
|
|
className="inline-flex items-center justify-center rounded-xl border border-zinc-200 bg-white px-5 py-3 text-sm font-semibold text-zinc-900 hover:bg-zinc-50"
|
|
>
|
|
{t('home.hero.cta.contact')}
|
|
</Link>
|
|
</div>
|
|
|
|
<dl className="mt-8 grid max-w-xl grid-cols-2 gap-4 text-sm">
|
|
<div className="rounded-2xl border border-zinc-200 bg-white p-4">
|
|
<dt className="font-semibold text-zinc-900">{t('common.phone')}</dt>
|
|
<dd className="mt-1 text-zinc-600">
|
|
<a className="underline" href={`tel:${SITE.phone}`}>
|
|
{SITE.phone}
|
|
</a>
|
|
</dd>
|
|
</div>
|
|
<div className="rounded-2xl border border-zinc-200 bg-white p-4">
|
|
<dt className="font-semibold text-zinc-900">{t('common.hours')}</dt>
|
|
<dd className="mt-1 text-zinc-600">
|
|
{t('home.hoursPreview')}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div className="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&w=1400&q=80"
|
|
alt="อาหารจีนรสจัดเสิร์ฟบนโต๊ะ"
|
|
className="h-80 w-full object-cover lg:h-[520px]"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid gap-6 md:grid-cols-3">
|
|
{FEATURED_KEYS.map((item) => (
|
|
<div
|
|
key={item.title}
|
|
className="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm"
|
|
>
|
|
<h2 className="text-lg font-semibold">{t(item.title)}</h2>
|
|
<p className="mt-2 text-sm text-zinc-600">{t(item.description)}</p>
|
|
</div>
|
|
))}
|
|
</section>
|
|
|
|
<section className="mt-12" aria-labelledby="latest-news">
|
|
<div className="flex items-end justify-between gap-4">
|
|
<div>
|
|
<h2 id="latest-news" className="text-2xl font-semibold tracking-tight">
|
|
{t('home.section.latestNews')}
|
|
</h2>
|
|
<p className="mt-2 text-sm text-zinc-600">
|
|
{t('home.section.latestNews.desc')}
|
|
</p>
|
|
</div>
|
|
<Link
|
|
to="/news"
|
|
className="text-sm font-semibold text-red-700 hover:underline"
|
|
>
|
|
{t('home.section.latestNews.more')}
|
|
</Link>
|
|
</div>
|
|
|
|
{error ? (
|
|
<div
|
|
role="alert"
|
|
className="mt-6 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-red-800"
|
|
>
|
|
{error}
|
|
</div>
|
|
) : null}
|
|
|
|
<div 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}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{!loading && items.length === 0 && !error ? (
|
|
<div className="py-12 text-center text-zinc-600">
|
|
{t('home.emptyNews')}
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
|
|
<section className="mt-14 rounded-3xl bg-zinc-900 px-6 py-10 text-white">
|
|
<h2 className="text-3xl font-semibold tracking-tight">
|
|
{t('home.cta.title')}
|
|
</h2>
|
|
<p className="mt-3 max-w-2xl text-zinc-200">{t('home.cta.desc')}</p>
|
|
<div className="mt-6 flex flex-wrap gap-3">
|
|
<a
|
|
href={`tel:${SITE.phone}`}
|
|
className="inline-flex items-center justify-center rounded-xl bg-white px-5 py-3 text-sm font-semibold text-zinc-900"
|
|
>
|
|
{t('home.cta.call')}
|
|
</a>
|
|
<Link
|
|
to="/contact"
|
|
className="inline-flex items-center justify-center rounded-xl border border-white/30 px-5 py-3 text-sm font-semibold text-white hover:bg-white/10"
|
|
>
|
|
{t('home.cta.map')}
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<div className="h-14" />
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|