64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { NextPage } from 'next'
|
|
import Layout from '@/hoc/Layout'
|
|
import Carousel from './home/components/Carousel'
|
|
import HotOffer from './home/components/HotOffer'
|
|
import Categories from './home/components/Categories'
|
|
import Banners3 from './home/components/Banners3'
|
|
import Blogs from './home/components/Blogs'
|
|
import NewestProducts from './home/components/LatestProducts'
|
|
import Banners4 from './home/components/Banners4'
|
|
import PopularProducts from './home/components/PopularProducts'
|
|
import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query'
|
|
import { Suspense } from 'react'
|
|
import PageLoading from '@/components/PageLoading'
|
|
import { getLandingQueryOptions } from './home/hooks/useHomeData'
|
|
|
|
const HomePage: NextPage = () => {
|
|
|
|
return (
|
|
<div>
|
|
<Carousel />
|
|
<div className='mt-24 px-20'>
|
|
<HotOffer />
|
|
<div className='mt-24'>
|
|
<Categories />
|
|
</div>
|
|
<div className='mt-24'>
|
|
<Banners3 />
|
|
</div>
|
|
</div>
|
|
|
|
<div className='mt-24 bg-[#FAF8F6] p-20'>
|
|
<NewestProducts />
|
|
<div className='mt-24'>
|
|
<Banners4 />
|
|
</div>
|
|
<div className='mt-20'>
|
|
<PopularProducts />
|
|
</div>
|
|
</div>
|
|
|
|
<div className='mt-24 px-20'>
|
|
<Blogs />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default async function HomePageWithLayout() {
|
|
const queryClient = new QueryClient()
|
|
|
|
await queryClient.prefetchQuery(getLandingQueryOptions)
|
|
|
|
const dehydratedState = dehydrate(queryClient)
|
|
|
|
return (
|
|
<Layout>
|
|
<Suspense fallback={<PageLoading />}>
|
|
<HydrationBoundary state={dehydratedState}>
|
|
<HomePage />
|
|
</HydrationBoundary>
|
|
</Suspense>
|
|
</Layout>
|
|
)
|
|
} |