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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
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'
const Category = () => {
const [categories, setCategories] = useState([])
const [openCategories, setOpenCategory] = useState([]);
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'
>
{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'>
<div className='flex flex-col'>
<div className='grid grid-cols-2 max-h-full w-full gap-2'>
{category.childs.map((brand, index) => (
(index < 8 ) && (
<div key={brand.id} className='w-full flex items-center justify-center pb-2'>
<Link
href={createSlug('/shop/category/', brand.name, brand.id)}
className='category-mega-box__child-one w-fit h-full flex items-center justify-center '
>
<Image src='https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/661' alt='' width={104} height={44} objectFit='cover' />
</Link>
</div>
)
))}
</div>
{category.childs.length > 8 && (
<div className='flex hover:bg-gray_r-8/35 rounded-10'>
<Link
href={createSlug('/shop/category/', category.name, category.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 Brand</p>
<ChevronRightIcon className='w-4 text-danger-500 font-bold' />
</Link>
</div>
)}
</div>
<div className='flex w-60 h-20 object-cover'>
<Image src='https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/397' alt='' width={275} height={4} />
</div>
</div>
</div>
</div>
))}
</div>
</DesktopView>
)
}
export default Category
|
