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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
import odooApi from '@/core/api/odooApi'
import Link from '@/core/components/elements/Link/Link'
import DesktopView from '@/core/components/views/DesktopView'
import { createSlug } from '@/core/utils/slug'
import { ChevronRightIcon } from '@heroicons/react/24/outline'
import Image from 'next/image'
import { useEffect, useState } from 'react'
import PopularBrand from './PopularBrand'
import { bannerApi } from '@/api/bannerApi';
const { useQuery } = require('react-query')
const Category = () => {
const [categories, setCategories] = useState([])
const [openCategories, setOpenCategory] = useState([]);
const [banner, setBanner] = useState([]);
// const promotionProgram = useQuery('banner-promo-category-card', bannerApi({ type: 'banner-promo-category-card' }));
useEffect(() => {
const loadCategories = async () => {
let dataCategories = await odooApi('GET', '/api/v1/category/tree')
dataCategories = dataCategories?.map((category) => {
category.childs = category.childs.map((child1Category) => {
return {
...child1Category,
isOpen: false
}
})
return {
...category,
isOpen: false
}
})
setCategories(dataCategories)
}
loadCategories()
}, [])
return (
<DesktopView>
<div className='category-mega-box'>
{categories?.map((category) => (
<div key={category.id} className='flex'>
<Link
href={createSlug('/shop/category/', category.name, category.id)}
className='category-mega-box__parent flex items-center'
>
<div className='mr-2 flex justify-center items-center'>
<Image src={category.image} alt='' width={25} height={25} />
</div>
{category.name}
</Link>
<div className='category-mega-box__child-wrapper'>
<div className='grid grid-cols-3 gap-x-4 gap-y-6 max-h-full !w-[590px] overflow-auto'>
{category.childs.map((child1Category) => (
<div key={child1Category.id} className='w-full'>
<Link
href={createSlug('/shop/category/', child1Category.name, child1Category.id)}
className='category-mega-box__child-one mb-4 w-full h-8 flex justify-center line-clamp-2'
>
{child1Category.name}
</Link>
<div className='flex flex-col gap-y-3 w-full'>
{child1Category.childs.map((child2Category, index) => (
(index < 4) && (
<Link
href={createSlug('/shop/category/', child2Category.name, child2Category.id)}
className='category-mega-box__child-two truncate'
key={child2Category.id}
>
{child2Category.name}
</Link>
)
))}
{child1Category.childs.length > 5 && (
<div className='flex hover:bg-gray_r-8/35 rounded-10'>
<Link
href={createSlug('/shop/category/', child1Category.name, child1Category.id)}
className='category-mega-box__child-one flex items-center gap-4 font-bold hover:ml-4'
>
<p className='mt-2 mb-0 text-danger-500 font-semibold'>Lihat Semua</p>
<ChevronRightIcon className='w-4 text-danger-500 font-bold' />
</Link>
</div>
)}
</div>
</div>
))}
</div>
{/* <div className='category-mega-box__child-wrapper !w-[260px] !flex !flex-col !gap-4'>
<PopularBrand category={category} />
{Array.isArray(promotionProgram?.data) && promotionProgram?.data.length > 0 && promotionProgram?.data[0]?.map((banner, index) => (
<div key={index} className='flex w-60 h-20 object-cover'>
<Image src={`${banner.image}`} alt={`${banner.name}`} width={275} height={4} />
</div>
))}
</div> */}
</div>
</div>
))}
</div>
</DesktopView>
)
}
export default Category
|
