blob: e6ea5acfb90c258686b7ee776d4e31d2d30d0fcf (
plain)
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
|
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 { useEffect, useState } from 'react'
const Category = () => {
const [categories, setCategories] = 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}>
<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 overflow-auto'>
{category.childs.map((child1Category) => (
<div key={child1Category.id}>
<Link
href={createSlug('/shop/category/', child1Category.name, child1Category.id)}
className='category-mega-box__child-one mb-4'
>
{child1Category.name}
</Link>
<div className='flex flex-col gap-y-3'>
{child1Category.childs.map((child2Category) => (
<Link
href={createSlug(
'/shop/category/',
child2Category.name,
child2Category.id
)}
className='category-mega-box__child-two'
key={child2Category.id}
>
{child2Category.name}
</Link>
))}
</div>
</div>
))}
</div>
</div>
</div>
))}
</div>
</DesktopView>
)
}
export default Category
|
