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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
import React, { Fragment } from 'react';
import { useQuery } from 'react-query';
import Link from 'next/link';
import { getProductCategoryBreadcrumb } from '~/services/product';
import { createSlug } from '~/libs/slug';
import useDevice from '@/core/hooks/useDevice';
type Props = { id: number; name: string };
const Breadcrumb = ({ id, name }: Props) => {
const { isDesktop, isMobile } = useDevice();
const { data: breadcrumbs = [] } = useQuery({
queryKey: ['product-category-breadcrumb', id],
queryFn: () => getProductCategoryBreadcrumb(id),
refetchOnWindowFocus: false,
});
const total = breadcrumbs.length;
const lastCat = total ? breadcrumbs[total - 1] : null;
const hasHidden = total > 1;
const hiddenText = hasHidden
? breadcrumbs
.slice(0, total - 1)
.map((c) => c.name)
.join(' / ')
: '';
if (isMobile) {
const crumbsMobile: React.ReactNode[] = [];
crumbsMobile.push(
<Link href='/' className='text-danger-500 shrink-0' key='home'>
Home
</Link>
);
if (hasHidden) {
crumbsMobile.push(
<span
className='text-danger-500 shrink-0'
title={hiddenText}
aria-label='Kategori tersembunyi'
key='hidden'
>
..
</span>
);
}
// Kategori terakhir
if (lastCat) {
crumbsMobile.push(
<Link
key={`cat-${lastCat.id}`}
href={createSlug('/shop/category/', lastCat.name, String(lastCat.id))}
className='text-danger-500 shrink-0'
>
{lastCat.name}
</Link>
);
}
// Nama produk (dipotong kalau gk muat)
crumbsMobile.push(
<span className='truncate min-w-0 flex-1' title={name} key='product'>
{name}
</span>
);
return (
<div className='flex items-center whitespace-nowrap overflow-hidden text-caption-1 leading-7'>
{crumbsMobile.map((node, i) => (
<Fragment key={i}>
{node}
{i < crumbsMobile.length - 1 && (
<span className='mx-2 shrink-0'>/</span>
)}
</Fragment>
))}
</div>
);
}
// ===== DESKTOP =====
if (isDesktop) {
return (
<div className='line-clamp-2 md:line-clamp-1 leading-7 text-caption-1'>
<Link href='/' className='text-danger-500'>
Home
</Link>
<span className='mx-2'>/</span>
{breadcrumbs.map((category, index) => (
<Fragment key={index}>
<Link
href={createSlug(
'/shop/category/',
category.name,
category.id.toString()
)}
className='text-danger-500'
>
{category.name}
</Link>
<span className='mx-2'>/</span>
</Fragment>
))}
<span>{name}</span>
</div>
);
}
return (
<div className='line-clamp-2 md:line-clamp-1 leading-7 text-caption-1'>
<Link href='/' className='text-danger-500'>
Home
</Link>
<span className='mx-2'>/</span>
{breadcrumbs.map((category, index) => (
<Fragment key={index}>
<Link
href={createSlug(
'/shop/category/',
category.name,
category.id.toString()
)}
className='text-danger-500'
>
{category.name}
</Link>
<span className='mx-2'>/</span>
</Fragment>
))}
<span>{name}</span>
</div>
);
};
export default Breadcrumb;
|
