41 lines
1.1 KiB
JavaScript
41 lines
1.1 KiB
JavaScript
import Link from 'next/link'
|
|
|
|
import { ResponsiveImage, SubCategoriesSkeleton } from 'components'
|
|
|
|
const SubCategories = props => {
|
|
//? Props
|
|
const { childCategories, isLoading } = props
|
|
|
|
//? Render(s)
|
|
return (
|
|
<section className="px-4 my-7">
|
|
{isLoading ? (
|
|
<SubCategoriesSkeleton />
|
|
) : childCategories && childCategories.length > 0 ? (
|
|
<>
|
|
<h4 className="mb-4 text-base text-black lg:pt-4">类别</h4>
|
|
<div className="flex gap-3 pb-3 overflow-x-auto">
|
|
{childCategories.map(item => (
|
|
<Link
|
|
key={item._id}
|
|
href={`/products?category=${item.slug}`}
|
|
className="px-3 pt-4 pb-2 text-center border-4 border-gray-100 rounded-md"
|
|
>
|
|
<ResponsiveImage
|
|
dimensions="w-24 h-24 md:h-32 md:w-32 xl:w-40 xl:h-40"
|
|
src={item.image}
|
|
alt={item.name}
|
|
/>
|
|
|
|
<span className="inline-block mt-2">{item.name}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</>
|
|
) : null}
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default SubCategories
|