hds-web 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/dist/index.es.css +1 -1
- package/dist/index.es.js +2 -2
- package/dist/index.js +3 -3
- package/package.json +1 -1
- package/src/HDS/assets/icons/check-circle.svg +1 -1
- package/src/HDS/components/Tables/tableB.js +164 -46
- package/src/HDS/components/Tabs/tab.js +3 -3
- package/src/HDS/modules/TextCard/textCard.js +1 -0
- package/src/index.css +0 -1
- package/src/styles/tailwind.css +47 -12
- package/src/HDS/components/Tabs/import React, { useState, useRef } from .js +0 -61
package/package.json
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke-
|
|
2
|
+
<path d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
3
|
</svg>
|
|
@@ -1,9 +1,41 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import { Typography } from '../../foundation/Typography'
|
|
3
4
|
import { Icon } from '../common-components/Icon'
|
|
4
5
|
import { HDSColor } from '../../foundation/ColorPalette';
|
|
6
|
+
import { Tab } from '../Tabs'
|
|
5
7
|
import ReactMarkdown from "react-markdown";
|
|
6
8
|
|
|
9
|
+
const tabs = [
|
|
10
|
+
{ name: 'Level 1', href: '', current: true },
|
|
11
|
+
{ name: 'Level 2', href: '', current: false },
|
|
12
|
+
{ name: 'Level 3', href: '', current: false },
|
|
13
|
+
]
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
const levelCalc = (arr, index) => {
|
|
18
|
+
|
|
19
|
+
const keyIndex = 'key' + `${index}`;
|
|
20
|
+
if (arr[keyIndex] && arr[keyIndex]['text'] && arr[keyIndex]['text'] !== null) {
|
|
21
|
+
return (
|
|
22
|
+
<>
|
|
23
|
+
<Typography as='div' textStyle='bodyc' className='text-neutral-700 flex items-start gap-4'> {`${arr[keyIndex]['text']}`}</Typography>
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
</>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
29
|
+
if (arr[keyIndex] && arr[keyIndex]['text'] === null && arr[keyIndex]['iconVariant'] && arr[keyIndex]['iconVariant'] !== null && (arr[keyIndex]['iconStrokeClass']) !== null) {
|
|
30
|
+
|
|
31
|
+
return (
|
|
32
|
+
<>
|
|
33
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={arr[keyIndex]['iconVariant']} strokeClass={HDSColor(arr[keyIndex]['iconStrokeClass'])} />
|
|
34
|
+
</>
|
|
35
|
+
)
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
7
39
|
export default function TableB(props) {
|
|
8
40
|
const {
|
|
9
41
|
title,
|
|
@@ -13,39 +45,117 @@ export default function TableB(props) {
|
|
|
13
45
|
TABLE_VALUE,
|
|
14
46
|
TABLE_HEADER,
|
|
15
47
|
} = props;
|
|
48
|
+
const [activeTab, setActiveTab] = useState(1);
|
|
49
|
+
|
|
50
|
+
function handleTabClick(tab) {
|
|
51
|
+
if(tab.name === 'Level 1') setActiveTab(1);
|
|
52
|
+
if(tab.name === 'Level 2') setActiveTab(2);
|
|
53
|
+
if(tab.name === 'Level 3') setActiveTab(3);
|
|
54
|
+
// Perform any other actions based on the clicked tab
|
|
55
|
+
}
|
|
56
|
+
|
|
16
57
|
return (
|
|
17
58
|
<div className=" max-w-7xl px-4 sm:px-6 lg:px-8 ">
|
|
18
|
-
<div className="
|
|
19
|
-
<div className="
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
59
|
+
<div className=" flex justify-around ">
|
|
60
|
+
<div className="w-full flex-col items-center flex justify-around tb-l:flex tb-l:flex-col tb-l:items-center">
|
|
61
|
+
<div>
|
|
62
|
+
{title && (
|
|
63
|
+
<Typography
|
|
64
|
+
textStyle='h3'
|
|
65
|
+
className={HDSColor(title_color)}
|
|
66
|
+
>
|
|
67
|
+
{title}
|
|
68
|
+
</Typography>
|
|
69
|
+
)}
|
|
70
|
+
{description && (
|
|
71
|
+
<Typography
|
|
72
|
+
textStyle='body1c'
|
|
73
|
+
className={HDSColor(desc_color)}
|
|
74
|
+
>
|
|
75
|
+
{description}
|
|
76
|
+
</Typography>
|
|
77
|
+
)}
|
|
78
|
+
</div>
|
|
79
|
+
<div className=' mt-11 rounded-full shadow tb-l:hidden'>
|
|
80
|
+
<Tab onTabClick={handleTabClick} tabs={tabs} />
|
|
81
|
+
</div>
|
|
39
82
|
</div>
|
|
83
|
+
|
|
40
84
|
</div>
|
|
85
|
+
|
|
86
|
+
{/* code for mobile */}
|
|
87
|
+
|
|
88
|
+
<div className='tb-l:hidden'>
|
|
89
|
+
<div className="mt-8 bg-neutral-0 rounded-3xl ">
|
|
90
|
+
<div className=" shadow rounded-3xl transition-opacity duration-200 ">
|
|
91
|
+
|
|
92
|
+
<div className='flex border-x px-8 py-[1.625rem] border-neutral-200 rounded-t-3xl flex-col justify-center items-center text-center'>
|
|
93
|
+
<div className={'flex items-center gap-2'}>
|
|
94
|
+
{TABLE_HEADER[activeTab]['icon'] &&
|
|
95
|
+
(
|
|
96
|
+
<Icon
|
|
97
|
+
height='h-6 w-6'
|
|
98
|
+
variant={TABLE_HEADER[activeTab]['icon']}
|
|
99
|
+
strokeClass={TABLE_HEADER[activeTab]['iconStrokeClass']} />
|
|
100
|
+
)
|
|
101
|
+
}
|
|
102
|
+
{
|
|
103
|
+
TABLE_HEADER[activeTab]['title'] && activeTab == 0 && (
|
|
104
|
+
<Typography
|
|
105
|
+
textStyle='h5'
|
|
106
|
+
className={TABLE_HEADER[activeTab]['title_text_color']}>
|
|
107
|
+
{`${TABLE_HEADER[activeTab]['title']}`}
|
|
108
|
+
</Typography>)
|
|
109
|
+
}
|
|
110
|
+
{
|
|
111
|
+
TABLE_HEADER[activeTab]['title'] && activeTab != 0 && (
|
|
112
|
+
<Typography
|
|
113
|
+
textStyle='h5'
|
|
114
|
+
className={TABLE_HEADER[activeTab]['title_text_color']}>
|
|
115
|
+
{`${TABLE_HEADER[activeTab]['title']}`}
|
|
116
|
+
</Typography>)
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
</div>
|
|
121
|
+
<div className=' max-w-[10rem]'>
|
|
122
|
+
{TABLE_HEADER[activeTab]['descr'] && (
|
|
123
|
+
<Typography
|
|
124
|
+
textStyle='body1'
|
|
125
|
+
className={TABLE_HEADER[activeTab]['descr_text_color']}>
|
|
126
|
+
{`${TABLE_HEADER[activeTab]['descr']}`}
|
|
127
|
+
</Typography>)}
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
<div className="divide-y divide-neutral-200 rounded-b-3xl">
|
|
132
|
+
<div className='flex flex-col border border-neutral-200 divide-y divide-neutral-200 rounded-b-3xl items-center'>
|
|
133
|
+
{TABLE_VALUE.map((key, index) => (
|
|
134
|
+
<React.Fragment key={index}>
|
|
135
|
+
<div className='flex w-full p-4 gap-2 items-start'>
|
|
136
|
+
|
|
137
|
+
{levelCalc(key, activeTab)}{key['rowTitle']}
|
|
138
|
+
|
|
139
|
+
</div>
|
|
140
|
+
</React.Fragment>
|
|
141
|
+
))}
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
{/* code for mobile */}
|
|
150
|
+
|
|
41
151
|
<div className='hidden tb-l:block' >
|
|
42
|
-
<div className="
|
|
43
|
-
<table className="min-w-full
|
|
152
|
+
<div className="mt-12 bg-neutral-0 rounded-3xl ">
|
|
153
|
+
<table className="min-w-full shadow tableclss rounded-3xl ">
|
|
44
154
|
<thead>
|
|
45
155
|
<tr className='divide-x divide-neutral-200 text-center rounded-t-3xl'>
|
|
46
|
-
{Object.keys(TABLE_HEADER).map((key,
|
|
156
|
+
{Object.keys(TABLE_HEADER).map((key, index) => (
|
|
47
157
|
<th
|
|
48
|
-
key={
|
|
158
|
+
key={index}
|
|
49
159
|
scope="col"
|
|
50
160
|
className="px-8 py-6 sm:table-cell"
|
|
51
161
|
>
|
|
@@ -91,42 +201,45 @@ export default function TableB(props) {
|
|
|
91
201
|
))}
|
|
92
202
|
</tr>
|
|
93
203
|
</thead>
|
|
94
|
-
<tbody className="divide-y divide-neutral-200
|
|
204
|
+
<tbody className="divide-y divide-neutral-200">
|
|
95
205
|
{TABLE_VALUE.map((value, index) => (
|
|
96
206
|
<tr className='divide-x divide-neutral-200' key={index}>
|
|
97
|
-
{Object.keys(value).map((
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
207
|
+
{Object.keys(value).map((keyIndex) => (
|
|
208
|
+
|
|
209
|
+
<React.Fragment key={index+keyIndex}>
|
|
210
|
+
{keyIndex !== null && keyIndex === 'rowTitle' && (<td
|
|
211
|
+
|
|
212
|
+
className="px-8 py-7 w-[22.5rem]"
|
|
102
213
|
>
|
|
103
|
-
<Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'><ReactMarkdown>{value[
|
|
214
|
+
<Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'><ReactMarkdown>{value[keyIndex]}</ReactMarkdown></Typography>
|
|
104
215
|
|
|
105
216
|
</td>)}
|
|
106
|
-
|
|
107
|
-
{
|
|
217
|
+
|
|
218
|
+
{keyIndex !== null && keyIndex !== 'rowTitle' && value[keyIndex] !== null && (
|
|
108
219
|
<td
|
|
109
|
-
|
|
110
|
-
className="px-8 py-7 text-center"
|
|
220
|
+
|
|
221
|
+
className="px-8 py-7 border-table text-center "
|
|
111
222
|
>
|
|
112
|
-
{value &&
|
|
113
|
-
|
|
223
|
+
{value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
|
|
224
|
+
<></>
|
|
114
225
|
|
|
115
226
|
)}
|
|
116
|
-
{value[
|
|
117
|
-
<Typography className='text-neutral-700' textStyle='body1c'>{value[
|
|
227
|
+
{value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
|
|
228
|
+
<Typography className='text-neutral-700' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
|
|
118
229
|
|
|
119
230
|
)}
|
|
120
|
-
{!value[
|
|
231
|
+
{(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
|
|
121
232
|
<div className='flex justify-center'>
|
|
122
|
-
<Icon height='h-5 w-5 stroke-[1.5px]' variant={value[
|
|
233
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
|
|
123
234
|
</div>
|
|
124
235
|
)}
|
|
125
|
-
</td>)
|
|
126
|
-
|
|
236
|
+
</td>)
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
{keyIndex === null && (
|
|
127
240
|
<td
|
|
128
|
-
key={
|
|
129
|
-
className="px-8 py-7 text-center"
|
|
241
|
+
key={index}
|
|
242
|
+
className="px-8 py-7 border-table text-center"
|
|
130
243
|
>
|
|
131
244
|
</td>
|
|
132
245
|
)}
|
|
@@ -143,3 +256,8 @@ export default function TableB(props) {
|
|
|
143
256
|
</div>
|
|
144
257
|
)
|
|
145
258
|
}
|
|
259
|
+
|
|
260
|
+
TableB.defaultProps = {
|
|
261
|
+
title_color: 'text-blue-800',
|
|
262
|
+
desc_color: 'text-blue-600'
|
|
263
|
+
}
|
|
@@ -36,8 +36,8 @@ export default function Tab(props) {
|
|
|
36
36
|
href="#"
|
|
37
37
|
className={`px-3 py-1 font-medium text-sm rounded-full ${
|
|
38
38
|
activeTab === tab
|
|
39
|
-
? 'bg-blue-
|
|
40
|
-
: 'text-neutral-500
|
|
39
|
+
? ' first:bg-blue-500 text-neutral-0 transition-all delay-100 duration-100 '
|
|
40
|
+
: 'text-neutral-500 transition-all delay-200 flex-nowrap '
|
|
41
41
|
}`}
|
|
42
42
|
aria-current={activeTab === tab ? 'page' : undefined}
|
|
43
43
|
onClick={(event) => handleTabClick(event, tab)}
|
|
@@ -47,7 +47,7 @@ export default function Tab(props) {
|
|
|
47
47
|
))}
|
|
48
48
|
<span
|
|
49
49
|
ref={pillRef}
|
|
50
|
-
className="absolute left-0 -z-10 bg-blue-
|
|
50
|
+
className="absolute left-0 -z-10 bg-blue-500 rounded-full transition-all ease-in-out duration-700"
|
|
51
51
|
style={{
|
|
52
52
|
left: `${activeTab.index * 100}%`,
|
|
53
53
|
width: `${activeTab.width}px`, // Use the width of the clicked tab
|
package/src/index.css
CHANGED
package/src/styles/tailwind.css
CHANGED
|
@@ -923,10 +923,6 @@ select {
|
|
|
923
923
|
z-index: -10;
|
|
924
924
|
}
|
|
925
925
|
|
|
926
|
-
.z-0 {
|
|
927
|
-
z-index: 0;
|
|
928
|
-
}
|
|
929
|
-
|
|
930
926
|
.z-10 {
|
|
931
927
|
z-index: 10;
|
|
932
928
|
}
|
|
@@ -1113,10 +1109,6 @@ select {
|
|
|
1113
1109
|
margin-top: -1.5rem;
|
|
1114
1110
|
}
|
|
1115
1111
|
|
|
1116
|
-
.-mt-px {
|
|
1117
|
-
margin-top: -1px;
|
|
1118
|
-
}
|
|
1119
|
-
|
|
1120
1112
|
.mb-1 {
|
|
1121
1113
|
margin-bottom: 0.25rem;
|
|
1122
1114
|
}
|
|
@@ -1201,6 +1193,14 @@ select {
|
|
|
1201
1193
|
margin-top: 2.5rem;
|
|
1202
1194
|
}
|
|
1203
1195
|
|
|
1196
|
+
.mt-11 {
|
|
1197
|
+
margin-top: 2.75rem;
|
|
1198
|
+
}
|
|
1199
|
+
|
|
1200
|
+
.mt-12 {
|
|
1201
|
+
margin-top: 3rem;
|
|
1202
|
+
}
|
|
1203
|
+
|
|
1204
1204
|
.mt-16 {
|
|
1205
1205
|
margin-top: 4rem;
|
|
1206
1206
|
}
|
|
@@ -2092,6 +2092,11 @@ select {
|
|
|
2092
2092
|
border-width: 1.5px;
|
|
2093
2093
|
}
|
|
2094
2094
|
|
|
2095
|
+
.border-x {
|
|
2096
|
+
border-left-width: 1px;
|
|
2097
|
+
border-right-width: 1px;
|
|
2098
|
+
}
|
|
2099
|
+
|
|
2095
2100
|
.border-b {
|
|
2096
2101
|
border-bottom-width: 1px;
|
|
2097
2102
|
}
|
|
@@ -5224,6 +5229,11 @@ select {
|
|
|
5224
5229
|
padding-bottom: 1.75rem;
|
|
5225
5230
|
}
|
|
5226
5231
|
|
|
5232
|
+
.py-\[1\.625rem\] {
|
|
5233
|
+
padding-top: 1.625rem;
|
|
5234
|
+
padding-bottom: 1.625rem;
|
|
5235
|
+
}
|
|
5236
|
+
|
|
5227
5237
|
.pb-10 {
|
|
5228
5238
|
padding-bottom: 2.5rem;
|
|
5229
5239
|
}
|
|
@@ -6329,6 +6339,14 @@ select {
|
|
|
6329
6339
|
transition-duration: 150ms;
|
|
6330
6340
|
}
|
|
6331
6341
|
|
|
6342
|
+
.delay-100 {
|
|
6343
|
+
transition-delay: 100ms;
|
|
6344
|
+
}
|
|
6345
|
+
|
|
6346
|
+
.delay-200 {
|
|
6347
|
+
transition-delay: 200ms;
|
|
6348
|
+
}
|
|
6349
|
+
|
|
6332
6350
|
.delay-300 {
|
|
6333
6351
|
transition-delay: 300ms;
|
|
6334
6352
|
}
|
|
@@ -6353,6 +6371,10 @@ select {
|
|
|
6353
6371
|
transition-duration: 500ms;
|
|
6354
6372
|
}
|
|
6355
6373
|
|
|
6374
|
+
.duration-700 {
|
|
6375
|
+
transition-duration: 700ms;
|
|
6376
|
+
}
|
|
6377
|
+
|
|
6356
6378
|
.ease-in {
|
|
6357
6379
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
6358
6380
|
}
|
|
@@ -7295,6 +7317,11 @@ select {
|
|
|
7295
7317
|
margin-left: 0px;
|
|
7296
7318
|
}
|
|
7297
7319
|
|
|
7320
|
+
.first\:bg-blue-500:first-child {
|
|
7321
|
+
--tw-bg-opacity: 1;
|
|
7322
|
+
background-color: rgb(57 112 253 / var(--tw-bg-opacity));
|
|
7323
|
+
}
|
|
7324
|
+
|
|
7298
7325
|
.last\:mr-0:last-child {
|
|
7299
7326
|
margin-right: 0px;
|
|
7300
7327
|
}
|
|
@@ -8467,10 +8494,6 @@ select {
|
|
|
8467
8494
|
margin-left: 3rem;
|
|
8468
8495
|
}
|
|
8469
8496
|
|
|
8470
|
-
.md\:block {
|
|
8471
|
-
display: block;
|
|
8472
|
-
}
|
|
8473
|
-
|
|
8474
8497
|
.md\:flex {
|
|
8475
8498
|
display: flex;
|
|
8476
8499
|
}
|
|
@@ -8523,6 +8546,10 @@ select {
|
|
|
8523
8546
|
display: flex;
|
|
8524
8547
|
}
|
|
8525
8548
|
|
|
8549
|
+
.tb-l\:hidden {
|
|
8550
|
+
display: none;
|
|
8551
|
+
}
|
|
8552
|
+
|
|
8526
8553
|
.tb-l\:w-1\/2 {
|
|
8527
8554
|
width: 50%;
|
|
8528
8555
|
}
|
|
@@ -8535,6 +8562,14 @@ select {
|
|
|
8535
8562
|
min-width: 400px;
|
|
8536
8563
|
}
|
|
8537
8564
|
|
|
8565
|
+
.tb-l\:flex-col {
|
|
8566
|
+
flex-direction: column;
|
|
8567
|
+
}
|
|
8568
|
+
|
|
8569
|
+
.tb-l\:items-center {
|
|
8570
|
+
align-items: center;
|
|
8571
|
+
}
|
|
8572
|
+
|
|
8538
8573
|
.tb-l\:justify-start {
|
|
8539
8574
|
justify-content: flex-start;
|
|
8540
8575
|
}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import React, { useState, useRef, useEffect } from 'react';
|
|
2
|
-
|
|
3
|
-
export default function Tab(props) {
|
|
4
|
-
const { tabs, onTabClick } = props;
|
|
5
|
-
const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current) || tabs[0]);
|
|
6
|
-
const pillRef = useRef(null);
|
|
7
|
-
const activeTabRef = useRef(null);
|
|
8
|
-
|
|
9
|
-
const handleTabClick = (event, clickedTab) => {
|
|
10
|
-
event.preventDefault();
|
|
11
|
-
setActiveTab(clickedTab);
|
|
12
|
-
if (onTabClick) {
|
|
13
|
-
onTabClick(clickedTab);
|
|
14
|
-
}
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
useEffect(() => {
|
|
18
|
-
// Update the pill position and height when activeTab changes
|
|
19
|
-
const pill = pillRef.current;
|
|
20
|
-
const activeTabElement = activeTabRef.current;
|
|
21
|
-
|
|
22
|
-
if (pill && activeTabElement) {
|
|
23
|
-
const pillWidth = activeTabElement.offsetWidth;
|
|
24
|
-
const pillHeight = activeTabElement.offsetHeight;
|
|
25
|
-
const pillOffset = activeTabElement.offsetLeft;
|
|
26
|
-
|
|
27
|
-
pill.style.transform = `translateX(${pillOffset}px)`;
|
|
28
|
-
pill.style.width = `${pillWidth}px`;
|
|
29
|
-
pill.style.height = `${pillHeight}px`;
|
|
30
|
-
}
|
|
31
|
-
}, [activeTab]);
|
|
32
|
-
|
|
33
|
-
return (
|
|
34
|
-
<div>
|
|
35
|
-
<div className="hidden md:block">
|
|
36
|
-
<nav className="relative inline-flex bg-neutral-0 p-2 rounded-full" aria-label="Tabs">
|
|
37
|
-
{tabs.map((tab, index) => (
|
|
38
|
-
<a
|
|
39
|
-
key={tab.name}
|
|
40
|
-
href="#"
|
|
41
|
-
className={`relative px-3 py-1 font-medium text-sm rounded-full ${
|
|
42
|
-
activeTab === tab
|
|
43
|
-
? 'bg-blue-600 text-neutral-0 z-10' // Increase z-index for active tab
|
|
44
|
-
: 'text-neutral-500 bg-neutral-0 hover:bg-neutral-100 flex-nowrap transition-all duration-500'
|
|
45
|
-
}`}
|
|
46
|
-
aria-current={activeTab === tab ? 'page' : undefined}
|
|
47
|
-
onClick={(event) => handleTabClick(event, tab)}
|
|
48
|
-
ref={activeTab === tab ? activeTabRef : null}
|
|
49
|
-
>
|
|
50
|
-
{tab.name}
|
|
51
|
-
</a>
|
|
52
|
-
))}
|
|
53
|
-
<span
|
|
54
|
-
ref={pillRef}
|
|
55
|
-
className="absolute bg-blue-600 rounded-full transition-all duration-500 z-0 -mt-px" // Add negative margin to counteract the gap
|
|
56
|
-
/>
|
|
57
|
-
</nav>
|
|
58
|
-
</div>
|
|
59
|
-
</div>
|
|
60
|
-
);
|
|
61
|
-
}
|