66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Navbar from '../components/Navbar'
|
|
import Footer from '../components/Footer'
|
|
import DynamicPageRenderer from '../components/DynamicPageRenderer'
|
|
import { API_BASE, type Category, type PageSection } from '../types'
|
|
|
|
export default function HomePage() {
|
|
const [categories, setCategories] = useState<Category[]>([])
|
|
const [sections, setSections] = useState<PageSection[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [categoriesLoading, setCategoriesLoading] = useState(true)
|
|
const { i18n } = useTranslation()
|
|
|
|
useEffect(() => {
|
|
const fetchCategories = async () => {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/categories?lang=${i18n.language}`)
|
|
const cats: Category[] = await res.json()
|
|
setCategories(cats)
|
|
} catch (err) {
|
|
console.error('Categories error:', err)
|
|
} finally {
|
|
setCategoriesLoading(false)
|
|
}
|
|
}
|
|
|
|
const fetchPageLayout = async () => {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/pages/home?lang=${i18n.language}`)
|
|
const pageData = await res.json()
|
|
if (pageData && pageData.sections) {
|
|
setSections(pageData.sections)
|
|
}
|
|
} catch (err) {
|
|
console.error('Page layout error:', err)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchCategories()
|
|
fetchPageLayout()
|
|
}, [i18n.language])
|
|
|
|
return (
|
|
<div className="min-h-screen bg-pop-bg">
|
|
<Navbar categories={categories} isTransparent={true} />
|
|
|
|
{loading ? (
|
|
<div className="min-h-[60vh] flex items-center justify-center">
|
|
<div className="w-12 h-12 border-4 border-pop-pink border-t-transparent rounded-full animate-spin"></div>
|
|
</div>
|
|
) : (
|
|
<DynamicPageRenderer
|
|
sections={sections}
|
|
categories={categories}
|
|
categoriesLoading={categoriesLoading}
|
|
/>
|
|
)}
|
|
|
|
<Footer categories={categories} />
|
|
</div>
|
|
)
|
|
}
|