50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
import Link from 'next/link'
|
|
|
|
import { ResponsiveImage } from 'components'
|
|
|
|
const Categories = props => {
|
|
//? Props
|
|
const { homePage, childCategories, color, name } = props
|
|
|
|
//? Re-Renders
|
|
if (childCategories.categories.length > 0 && color && name) {
|
|
return (
|
|
<section className="px-3">
|
|
<h4 className="mb-3 text-xl text-center">
|
|
<span
|
|
className="text-xl"
|
|
style={{
|
|
color,
|
|
}}
|
|
>
|
|
{name}
|
|
</span>
|
|
{' - '}
|
|
{childCategories.title}
|
|
</h4>
|
|
<div className="flex flex-wrap justify-center gap-4 mx-auto space-x-4 w-fit">
|
|
{childCategories.categories.map((item, index) => (
|
|
<div key={index} className="text-center">
|
|
<Link
|
|
href={homePage ? `/main/${item.slug}` : `/products?category=${item.slug}`}
|
|
className="text-center"
|
|
>
|
|
<ResponsiveImage
|
|
dimensions="w-24 h-24 lg:h-44 lg:w-44"
|
|
className="mx-auto mb-1"
|
|
src={item.image}
|
|
alt={item.name}
|
|
/>
|
|
<span className="text-sm text-black">{item.name}</span>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
return null
|
|
}
|
|
|
|
export default Categories
|