hds-web 1.5.3 → 1.5.5
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 +2 -2
- package/dist/index.es.css +2 -2
- package/dist/index.es.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/HDS/components/Hero/h3.js +38 -28
- package/src/HDS/components/Tables/index.js +1 -1
- package/src/HDS/components/Tables/tableD.js +176 -237
- package/src/HDS/components/Tabs/tab.js +35 -14
- package/src/styles/tailwind.css +57 -35
|
@@ -1,60 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { useState } from 'react';
|
|
3
2
|
import { Typography } from '../../foundation/Typography'
|
|
4
3
|
import { Icon } from '../common-components/Icon'
|
|
5
4
|
import { HDSColor } from '../../foundation/ColorPalette';
|
|
6
|
-
import { Tab } from '../Tabs'
|
|
7
5
|
import ReactMarkdown from "react-markdown";
|
|
8
|
-
import { HDSButton } from
|
|
9
|
-
const tabs = [
|
|
10
|
-
{ name: 'Level 1', href: '', current: true },
|
|
11
|
-
{ name: 'Level 2', href: '', current: false },
|
|
12
|
-
]
|
|
6
|
+
import { HDSButton } from "../Buttons"
|
|
13
7
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const levelCalc = (arr, index) => {
|
|
17
|
-
|
|
18
|
-
const keyIndex = 'key' + `${index}`;
|
|
19
|
-
|
|
20
|
-
if (arr[keyIndex] && (arr[keyIndex]['text'] || arr[keyIndex]['iconVariant'])) {
|
|
21
|
-
return (
|
|
22
|
-
<>
|
|
23
|
-
<div className='flex gap-4 p-4 w-full'>
|
|
24
|
-
{(arr[keyIndex]['text'] || arr[keyIndex]['iconVariant']) && (
|
|
25
|
-
<Icon height='h-5 w-5 stroke-[1.5px]' variant='checkcircle' strokeClass='stroke-green-500' />
|
|
26
|
-
)
|
|
27
|
-
}
|
|
28
|
-
<>
|
|
29
|
-
<Typography textStyle='body1c'
|
|
30
|
-
className='text-neutral-700 [&>span]:pb-2 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0'>
|
|
31
|
-
|
|
32
|
-
{arr[keyIndex]['text'] && arr[keyIndex]['text'] !== null && (
|
|
33
|
-
<>
|
|
34
|
-
{`${arr[keyIndex]['text']} `}
|
|
35
|
-
</>
|
|
36
|
-
)
|
|
37
|
-
}
|
|
38
|
-
{arr['rowTitle'] && (arr[keyIndex]['text'] || arr[keyIndex]['iconVariant']) && (
|
|
39
|
-
<>
|
|
40
|
-
<ReactMarkdown components={{ p: 'span' }}>
|
|
41
|
-
{`${arr['rowTitle']}`}
|
|
42
|
-
</ReactMarkdown>
|
|
43
|
-
</>
|
|
44
|
-
|
|
45
|
-
)}
|
|
46
|
-
</Typography>
|
|
47
|
-
</>
|
|
48
|
-
|
|
49
|
-
</div>
|
|
50
|
-
|
|
51
|
-
</>
|
|
52
|
-
)
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
export default function TablePlatform(props) {
|
|
8
|
+
export default function PricingTableB(props) {
|
|
58
9
|
const {
|
|
59
10
|
title,
|
|
60
11
|
title_color,
|
|
@@ -63,75 +14,151 @@ export default function TablePlatform(props) {
|
|
|
63
14
|
TABLE_VALUE,
|
|
64
15
|
TABLE_HEADER,
|
|
65
16
|
} = props;
|
|
66
|
-
const
|
|
67
|
-
|
|
17
|
+
const tableValuesm = (section, keyIndex) => {
|
|
18
|
+
let columnSize = '';
|
|
19
|
+
let scrapData;
|
|
20
|
+
if (section[keyIndex][0]) {
|
|
21
|
+
scrapData = section[keyIndex][0];
|
|
22
|
+
}
|
|
23
|
+
const rowTitleKey = Object.keys(scrapData).find(key => key === 'Data APIs');
|
|
24
|
+
if (section[keyIndex].length) {
|
|
25
|
+
columnSize = section[keyIndex].length;
|
|
26
|
+
console.log(columnSize)
|
|
27
|
+
}
|
|
28
|
+
return (
|
|
29
|
+
<>
|
|
30
|
+
{section[keyIndex].map((value, index) => (
|
|
31
|
+
<tr className='' key={index}>
|
|
32
|
+
{Object.keys(value).map((keyIndex) => (
|
|
33
|
+
<React.Fragment key={index + keyIndex}>
|
|
34
|
+
{keyIndex !== null
|
|
35
|
+
&& keyIndex === rowTitleKey
|
|
36
|
+
&& index != (columnSize - 1)
|
|
37
|
+
&& index != 0 && (
|
|
38
|
+
<td
|
|
39
|
+
|
|
40
|
+
className="pl-[30px] border-80 "
|
|
41
|
+
>
|
|
42
|
+
<div className=' '>
|
|
43
|
+
<Typography className='py-4 text-neutral-700' textStyle='body1c'>{value[keyIndex]}{index}</Typography>
|
|
44
|
+
</div>
|
|
45
|
+
</td>)}
|
|
46
|
+
{keyIndex !== null
|
|
47
|
+
&& keyIndex === rowTitleKey
|
|
48
|
+
&& index != (columnSize - 1)
|
|
49
|
+
&& index == 0 && (
|
|
50
|
+
<td
|
|
51
|
+
className="pl-[30px] border-80 "
|
|
52
|
+
>
|
|
53
|
+
<div className=' '>
|
|
54
|
+
<Typography className='pb-4 pt-12 text-neutral-700' textStyle='body1c'>{value[keyIndex]}{index}</Typography>
|
|
55
|
+
</div>
|
|
68
56
|
|
|
69
|
-
const tableValuesm = (section, keyIndex) =>
|
|
70
|
-
(
|
|
71
|
-
<>
|
|
72
|
-
{section[keyIndex].map((value, index) => (
|
|
73
|
-
<tr className='' key={index}>
|
|
74
|
-
{Object.keys(value).map((keyIndex) => (
|
|
75
57
|
|
|
76
|
-
|
|
77
|
-
{keyIndex !== null && keyIndex === 'rowTitle' && (<td
|
|
58
|
+
</td>)}
|
|
78
59
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
60
|
+
{keyIndex !== null
|
|
61
|
+
&& keyIndex === rowTitleKey
|
|
62
|
+
&& index == (columnSize - 1) && (
|
|
63
|
+
<td
|
|
82
64
|
|
|
83
|
-
|
|
65
|
+
className="pl-[30px] border-80 "
|
|
66
|
+
>
|
|
67
|
+
<div className=' '>
|
|
68
|
+
<Typography className='pt-4 pb-12 text-neutral-700' textStyle='body1c'>{value[keyIndex]}</Typography>
|
|
69
|
+
</div>
|
|
84
70
|
|
|
85
|
-
{keyIndex !== null && keyIndex !== 'rowTitle' && value[keyIndex] !== null && (
|
|
86
|
-
<td
|
|
87
71
|
|
|
88
|
-
|
|
89
|
-
>
|
|
90
|
-
{value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
|
|
91
|
-
<></>
|
|
72
|
+
</td>)}
|
|
92
73
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
<Typography className='text-neutral-700' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
|
|
74
|
+
{keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index != 0 && index != (columnSize - 1) && (
|
|
75
|
+
<td
|
|
96
76
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
<
|
|
101
|
-
</div>
|
|
102
|
-
)}
|
|
103
|
-
</td>)
|
|
104
|
-
}
|
|
77
|
+
className="px-8 text-left ml-[30px] border-80 "
|
|
78
|
+
>
|
|
79
|
+
{value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
|
|
80
|
+
<div className=''></div>
|
|
105
81
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
</td>
|
|
112
|
-
)}
|
|
82
|
+
)}
|
|
83
|
+
{value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
|
|
84
|
+
<div className=' '>
|
|
85
|
+
<Typography className='text-neutral-700 py-4' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
|
|
86
|
+
</div>
|
|
113
87
|
|
|
114
88
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
89
|
+
)}
|
|
90
|
+
{(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
|
|
91
|
+
<div className='flex '>
|
|
92
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
|
|
93
|
+
</div>
|
|
94
|
+
)}
|
|
95
|
+
</td>)
|
|
96
|
+
}
|
|
97
|
+
{keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index == 0 && (
|
|
98
|
+
<td
|
|
120
99
|
|
|
121
|
-
|
|
100
|
+
className="px-8 text-left ml-[30px] border-80 "
|
|
101
|
+
>
|
|
102
|
+
{value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
|
|
103
|
+
<div className=''></div>
|
|
122
104
|
|
|
105
|
+
)}
|
|
106
|
+
{value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
|
|
107
|
+
<div className=' '>
|
|
108
|
+
<Typography className='text-neutral-700 pb-4 pt-12' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
|
|
109
|
+
</div>
|
|
123
110
|
|
|
124
111
|
|
|
112
|
+
)}
|
|
113
|
+
{(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
|
|
114
|
+
<div className='flex pb-4 pt-12'>
|
|
115
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
|
|
116
|
+
</div>
|
|
117
|
+
)}
|
|
118
|
+
</td>)
|
|
119
|
+
}
|
|
120
|
+
{keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index == (columnSize - 1) && (
|
|
121
|
+
<td
|
|
122
|
+
|
|
123
|
+
className="px-8 text-left ml-[30px] border-80 "
|
|
124
|
+
>
|
|
125
|
+
{value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
|
|
126
|
+
<div className=''></div>
|
|
127
|
+
|
|
128
|
+
)}
|
|
129
|
+
{value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
|
|
130
|
+
<div className=' '>
|
|
131
|
+
<Typography className='text-neutral-700 pt-4 pb-12' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
)}
|
|
136
|
+
{(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
|
|
137
|
+
<div className='flex pt-4 pb-12 '>
|
|
138
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
|
|
139
|
+
</div>
|
|
140
|
+
)}
|
|
141
|
+
</td>)
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
{keyIndex === null && (
|
|
145
|
+
<td
|
|
146
|
+
key={index}
|
|
147
|
+
className="px-8 py-7 border-table text-center"
|
|
148
|
+
>
|
|
149
|
+
</td>
|
|
150
|
+
)}
|
|
125
151
|
|
|
126
|
-
function handleTabClick(tab) {
|
|
127
|
-
if (tab.name === 'Level 1') setActiveTab(1);
|
|
128
|
-
if (tab.name === 'Level 2') setActiveTab(2);
|
|
129
|
-
if (tab.name === 'Level 3') setActiveTab(3);
|
|
130
|
-
// Perform any other actions based on the clicked tab
|
|
131
|
-
}
|
|
132
152
|
|
|
153
|
+
</React.Fragment>
|
|
154
|
+
))}
|
|
155
|
+
</tr>
|
|
156
|
+
))}
|
|
157
|
+
</>
|
|
158
|
+
)
|
|
159
|
+
}
|
|
133
160
|
return (
|
|
134
|
-
<div className=
|
|
161
|
+
<div className='px-10'>
|
|
135
162
|
<div className=" flex justify-around ">
|
|
136
163
|
<div className="w-full flex-col items-center flex justify-around tb-l:flex tb-l:flex-col tb-l:items-center">
|
|
137
164
|
<div>
|
|
@@ -152,102 +179,22 @@ export default function TablePlatform(props) {
|
|
|
152
179
|
</Typography>
|
|
153
180
|
)}
|
|
154
181
|
</div>
|
|
155
|
-
<div className=' mt-11 rounded-full shadow tb-l:hidden'>
|
|
156
|
-
<Tab onTabClick={handleTabClick} tabs={tabs} />
|
|
157
|
-
</div>
|
|
158
182
|
</div>
|
|
159
|
-
|
|
160
183
|
</div>
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
<div className='tb-l:hidden'>
|
|
165
|
-
<div className="mt-8 bg-neutral-0 rounded-3xl ">
|
|
166
|
-
<div className=" shadow rounded-3xl ">
|
|
167
|
-
|
|
168
|
-
<div className='flex border-x px-8 py-[1.625rem] border-neutral-200 rounded-t-3xl flex-col justify-center items-center text-center'>
|
|
169
|
-
<div className={'flex items-center gap-2'}>
|
|
170
|
-
{TABLE_HEADER[activeTab]['icon'] &&
|
|
171
|
-
(
|
|
172
|
-
<Icon
|
|
173
|
-
height='h-6 w-6'
|
|
174
|
-
variant={TABLE_HEADER[activeTab]['icon']}
|
|
175
|
-
strokeClass={TABLE_HEADER[activeTab]['iconStrokeClass']} />
|
|
176
|
-
)
|
|
177
|
-
}
|
|
178
|
-
{
|
|
179
|
-
TABLE_HEADER[activeTab]['title'] && activeTab == 0 && (
|
|
180
|
-
<Typography
|
|
181
|
-
textStyle='h5'
|
|
182
|
-
className={TABLE_HEADER[activeTab]['title_text_color']}>
|
|
183
|
-
{`${TABLE_HEADER[activeTab]['title']}`}
|
|
184
|
-
</Typography>)
|
|
185
|
-
}
|
|
186
|
-
{
|
|
187
|
-
TABLE_HEADER[activeTab]['title'] && activeTab != 0 && (
|
|
188
|
-
<Typography
|
|
189
|
-
textStyle='h5'
|
|
190
|
-
className={TABLE_HEADER[activeTab]['title_text_color']}>
|
|
191
|
-
{`${TABLE_HEADER[activeTab]['title']}`}
|
|
192
|
-
</Typography>)
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
</div>
|
|
197
|
-
<div className=' max-w-[10rem]'>
|
|
198
|
-
{TABLE_HEADER[activeTab]['descr'] && (
|
|
199
|
-
<Typography
|
|
200
|
-
textStyle='body1'
|
|
201
|
-
className={TABLE_HEADER[activeTab]['descr_text_color']}>
|
|
202
|
-
{`${TABLE_HEADER[activeTab]['descr']}`}
|
|
203
|
-
</Typography>)}
|
|
204
|
-
</div>
|
|
205
|
-
</div>
|
|
206
|
-
|
|
207
|
-
<div className="divide-y divide-neutral-200 rounded-b-3xl">
|
|
208
|
-
<div className='flex flex-col border border-neutral-200 divide-y divide-neutral-200 rounded-b-3xl items-center'>
|
|
209
|
-
<div className='flex divide-y divide-neutral-200 flex-col w-full gap-2 items-start'>
|
|
210
|
-
{TABLE_VALUE.map((msection, index) => (
|
|
211
|
-
<React.Fragment key={index}>
|
|
212
|
-
{Object.keys(msection).map((keyIndex) => (
|
|
213
|
-
|
|
214
|
-
<>
|
|
215
|
-
{msection[keyIndex].map((tem2, index) => (
|
|
216
|
-
<>
|
|
217
|
-
{levelCalc(tem2, index)}
|
|
218
|
-
</>
|
|
219
|
-
))
|
|
220
|
-
}
|
|
221
|
-
</>
|
|
222
|
-
))}
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
</React.Fragment>
|
|
226
|
-
))}
|
|
227
|
-
</div>
|
|
228
|
-
</div>
|
|
229
|
-
|
|
230
|
-
</div>
|
|
231
|
-
</div>
|
|
232
|
-
</div>
|
|
233
|
-
</div>
|
|
234
|
-
|
|
235
|
-
{/* code for mobile */}
|
|
236
|
-
|
|
237
|
-
<div className='hidden tb-l:block' >
|
|
238
|
-
<div className="mt-12 rounded-3xl ">
|
|
239
|
-
<table className="min-w-full shadow tableclss rounded-3xl ">
|
|
184
|
+
<div className='hidden tb:block' >
|
|
185
|
+
<div className=" mt-[70px] rounded-3xl ">
|
|
186
|
+
<table className="rounded-3xl w-full table-fixed ">
|
|
240
187
|
<thead>
|
|
241
|
-
<tr className=' text-
|
|
188
|
+
<tr className=' text-left first:pr-20 '>
|
|
242
189
|
{Object.keys(TABLE_HEADER).map((key, index) => (
|
|
243
190
|
<th
|
|
244
191
|
key={index}
|
|
245
192
|
scope="col"
|
|
246
|
-
className="px-8
|
|
193
|
+
className="px-8 pb-[54px] sm:table-cell text-left"
|
|
247
194
|
>
|
|
248
|
-
<div className=''>
|
|
249
|
-
<div className='flex flex-col
|
|
250
|
-
<div className={'flex
|
|
195
|
+
<div className='flex text-left'>
|
|
196
|
+
<div className='flex flex-col text-center'>
|
|
197
|
+
<div className={'flex gap-2'}>
|
|
251
198
|
{TABLE_HEADER[key]['icon'] &&
|
|
252
199
|
(
|
|
253
200
|
<Icon
|
|
@@ -259,8 +206,8 @@ export default function TablePlatform(props) {
|
|
|
259
206
|
{
|
|
260
207
|
TABLE_HEADER[key]['title'] && key == 0 && (
|
|
261
208
|
<Typography
|
|
262
|
-
textStyle='
|
|
263
|
-
className={HDSColor(TABLE_HEADER[key]['title_text_color'])}>
|
|
209
|
+
textStyle='h3'
|
|
210
|
+
className={` w-1/2 text-left ${HDSColor(TABLE_HEADER[key]['title_text_color'])}`}>
|
|
264
211
|
{TABLE_HEADER[key]['title']}
|
|
265
212
|
</Typography>)
|
|
266
213
|
}
|
|
@@ -268,16 +215,16 @@ export default function TablePlatform(props) {
|
|
|
268
215
|
TABLE_HEADER[key]['title'] && key != 0 && (
|
|
269
216
|
<Typography
|
|
270
217
|
textStyle='h5'
|
|
271
|
-
className={HDSColor(TABLE_HEADER[key]['title_text_color'])}>
|
|
218
|
+
className={` text-left ${HDSColor(TABLE_HEADER[key]['title_text_color'])}`}>
|
|
272
219
|
<ReactMarkdown>{TABLE_HEADER[key]['title']}</ReactMarkdown>
|
|
273
220
|
</Typography>)
|
|
274
221
|
}
|
|
275
222
|
</div>
|
|
276
|
-
<div className='
|
|
223
|
+
<div className=''>
|
|
277
224
|
{TABLE_HEADER[key]['descr'] && (
|
|
278
225
|
<Typography
|
|
279
226
|
textStyle='body1'
|
|
280
|
-
className={HDSColor(TABLE_HEADER[key]['descr_text_color'])}>
|
|
227
|
+
className={` text-left ${HDSColor(TABLE_HEADER[key]['descr_text_color'])}`}>
|
|
281
228
|
{TABLE_HEADER[key]['descr']}
|
|
282
229
|
</Typography>)}
|
|
283
230
|
|
|
@@ -306,26 +253,22 @@ export default function TablePlatform(props) {
|
|
|
306
253
|
</tr>
|
|
307
254
|
</thead>
|
|
308
255
|
{TABLE_VALUE.map((section, index) => (
|
|
309
|
-
<tbody key={index} className="">
|
|
310
|
-
|
|
311
|
-
|
|
256
|
+
<tbody key={index} className="border-90">
|
|
312
257
|
{Object.keys(section).map((keyIndex) => (
|
|
313
258
|
<>
|
|
314
|
-
<tr className=''>
|
|
259
|
+
<tr key={index + keyIndex} className=''>
|
|
315
260
|
{Object.keys(section[keyIndex][0]).map((keyIndex2) => (
|
|
316
|
-
<React.Fragment key={keyIndex2}>
|
|
261
|
+
<React.Fragment key={keyIndex2 + keyIndex + index}>
|
|
317
262
|
{keyIndex2 !== null && (
|
|
318
263
|
<th
|
|
319
|
-
className='bg-neutral-100 first:rounded-l-full last:rounded-r-full'
|
|
264
|
+
className='bg-neutral-100 first:rounded-l-full last:rounded-r-full px-8'
|
|
320
265
|
>
|
|
321
266
|
<Typography
|
|
322
267
|
textStyle='h5'
|
|
323
|
-
className='text-neutral-900'
|
|
268
|
+
className='text-neutral-900 py-3.5 text-left'
|
|
324
269
|
>
|
|
325
270
|
{keyIndex2}
|
|
326
271
|
</Typography>
|
|
327
|
-
|
|
328
|
-
|
|
329
272
|
</th>
|
|
330
273
|
)}
|
|
331
274
|
</React.Fragment>
|
|
@@ -333,41 +276,41 @@ export default function TablePlatform(props) {
|
|
|
333
276
|
</tr>
|
|
334
277
|
{tableValuesm(section, keyIndex)}
|
|
335
278
|
</>
|
|
336
|
-
|
|
337
279
|
))
|
|
338
280
|
}
|
|
339
281
|
</tbody>
|
|
340
282
|
))
|
|
341
283
|
}
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
<
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
284
|
+
{TABLE_HEADER && (
|
|
285
|
+
<>
|
|
286
|
+
<tbody>
|
|
287
|
+
<tr>
|
|
288
|
+
<td></td>
|
|
289
|
+
{TABLE_HEADER.map((value, index) => (
|
|
290
|
+
<React.Fragment key={index}>
|
|
291
|
+
{index != 0 && value['button_title'] &&
|
|
292
|
+
<td key={index} className='px-8'>
|
|
293
|
+
<HDSButton
|
|
294
|
+
label={value['button_title']}
|
|
295
|
+
type='secondary'
|
|
296
|
+
leftIconVariant='none'
|
|
297
|
+
rightIconVariant='none'
|
|
298
|
+
state='default'
|
|
299
|
+
size='sm'
|
|
300
|
+
rightAnimatedArrow={true}
|
|
301
|
+
rightAnimatedArrowColor='#6C737F'
|
|
302
|
+
className='mt-4 mb-16'
|
|
303
|
+
/>
|
|
304
|
+
|
|
305
|
+
</td>}
|
|
306
|
+
</React.Fragment>
|
|
307
|
+
))
|
|
308
|
+
}
|
|
369
309
|
|
|
370
|
-
|
|
310
|
+
</tr>
|
|
311
|
+
</tbody>
|
|
312
|
+
</>
|
|
313
|
+
)}
|
|
371
314
|
</table>
|
|
372
315
|
</div>
|
|
373
316
|
</div>
|
|
@@ -375,7 +318,3 @@ export default function TablePlatform(props) {
|
|
|
375
318
|
)
|
|
376
319
|
}
|
|
377
320
|
|
|
378
|
-
TablePlatform.defaultProps = {
|
|
379
|
-
title_color: 'text-blue-800',
|
|
380
|
-
desc_color: 'text-blue-600'
|
|
381
|
-
}
|
|
@@ -1,11 +1,22 @@
|
|
|
1
1
|
import React, { useState, useRef } from 'react';
|
|
2
|
+
import { HDSColor } from '../../foundation/ColorPalette';
|
|
2
3
|
import { Typography } from '../../foundation/Typography'
|
|
4
|
+
import PropTypes from 'prop-types';
|
|
3
5
|
|
|
4
6
|
export default function Tab(props) {
|
|
5
|
-
const {
|
|
7
|
+
const {
|
|
8
|
+
tabs,
|
|
9
|
+
onTabClick,
|
|
10
|
+
pillColor
|
|
11
|
+
|
|
12
|
+
} = props;
|
|
6
13
|
const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current) || tabs[0]);
|
|
7
14
|
const pillRef = useRef(null);
|
|
8
|
-
|
|
15
|
+
let pillColorClass = '';
|
|
16
|
+
if(pillColor){
|
|
17
|
+
pillColorClass = HDSColor(pillColor);
|
|
18
|
+
}
|
|
19
|
+
|
|
9
20
|
const handleTabClick = (event, clickedTab) => {
|
|
10
21
|
event.preventDefault();
|
|
11
22
|
setActiveTab(clickedTab);
|
|
@@ -19,35 +30,41 @@ export default function Tab(props) {
|
|
|
19
30
|
const pillWidth = event.currentTarget.offsetWidth;
|
|
20
31
|
const clickedTabOffset = event.currentTarget.offsetLeft;
|
|
21
32
|
const pillOffset = pill.parentElement.offsetLeft;
|
|
22
|
-
const translateX = clickedTabOffset
|
|
33
|
+
const translateX = clickedTabOffset;
|
|
23
34
|
|
|
24
35
|
pill.style.transform = `translateX(${translateX}px)`;
|
|
25
36
|
pill.style.width = `${pillWidth}px`;
|
|
26
37
|
}
|
|
27
38
|
};
|
|
28
39
|
|
|
40
|
+
function tabClass(name) {
|
|
41
|
+
let classActive = ' text-neutral-0 transition-all rounded-full ' + pillColorClass;
|
|
42
|
+
let clasnInActive = ' text-neutral-500 flex-nowrap rounded-full';
|
|
43
|
+
|
|
44
|
+
console.log(classActive, clasnInActive, 'heeelo');
|
|
45
|
+
|
|
46
|
+
if (activeTab.name === name) {
|
|
47
|
+
return classActive;
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
return clasnInActive;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
29
53
|
return (
|
|
30
54
|
<div className=''>
|
|
31
55
|
<div className="block">
|
|
32
56
|
<nav className="relative inline-flex gap-2 rounded-full" aria-label="Tabs">
|
|
33
57
|
{tabs.map(tab => (
|
|
34
|
-
<
|
|
58
|
+
<div
|
|
35
59
|
key={tab.name}
|
|
36
|
-
href="#"
|
|
37
|
-
className={`px-3 py-1 font-medium text-sm rounded-full ${
|
|
38
|
-
activeTab === tab
|
|
39
|
-
? ' first:bg-blue-500 text-neutral-0 transition-all'
|
|
40
|
-
: 'text-neutral-500 transition-all flex-nowrap '
|
|
41
|
-
}`}
|
|
42
|
-
aria-current={activeTab === tab ? 'page' : undefined}
|
|
43
60
|
onClick={(event) => handleTabClick(event, tab)}
|
|
44
61
|
>
|
|
45
|
-
<Typography className=
|
|
46
|
-
</
|
|
62
|
+
<Typography className={`${tabClass(tab.name)} cursor-pointer px-3 py-1 z-[2] relative whitespace-nowrap`} textStyle='body3c-medium'>{tab.name}</Typography>
|
|
63
|
+
</div>
|
|
47
64
|
))}
|
|
48
65
|
<span
|
|
49
66
|
ref={pillRef}
|
|
50
|
-
className=
|
|
67
|
+
className={`absolute left-0 z-[1] ${pillColorClass} rounded-full transition-all ease-in duration-150`}
|
|
51
68
|
style={{
|
|
52
69
|
left: `${activeTab.index * 100}%`,
|
|
53
70
|
width: `${activeTab.width}px`, // Use the width of the clicked tab
|
|
@@ -59,3 +76,7 @@ export default function Tab(props) {
|
|
|
59
76
|
</div>
|
|
60
77
|
);
|
|
61
78
|
}
|
|
79
|
+
|
|
80
|
+
Tab.defaultProps = {
|
|
81
|
+
pillColor: 'bg-blue-500'
|
|
82
|
+
}
|