src/lib/home/components/CategoryHome.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import ProductSlider from '@/lib/product/components/ProductSlider'
import useCategoryHome from '../hooks/useCategoryHome'
import PopularProductSkeleton from './Skeleton/PopularProductSkeleton'

const CategoryHome = ({ id }) => {
  const { categoryHome } = useCategoryHome({ id })

  return (
    <div className='p-4 sm:py-8 relative bg-yellow_r-2 border border-yellow_r-5'>
      {categoryHome.data ? (
        <ProductSlider
          products={{
            products: categoryHome.data?.[0].products,
            banner: {
              image: categoryHome.data?.[0].image,
              name: categoryHome.data?.[0].name,
              url: `/shop/search?category=${categoryHome.data?.[0].name}`
            }
          }}
          simpleTitle
          bannerMode
        />
      ) : (
        <PopularProductSkeleton />
      )}
    </div>
  )
}

export default CategoryHome