hds-web 1.1.4 → 1.1.7
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 +6 -6
- package/dist/index.js +6 -6
- package/package.json +1 -1
- package/src/HDS/components/BadgesCaption/badges.js +7 -7
- package/src/HDS/components/Buttons/button.js +1 -1
- package/src/HDS/components/Cards/BrandCard/brandCard.js +41 -0
- package/src/HDS/components/Cards/BrandCard/index.js +1 -0
- package/src/HDS/components/Cards/Dropdown/index.js +0 -0
- package/src/HDS/components/Cards/Misc/iconCard.js +81 -9
- package/src/HDS/components/Cards/Misc/talkCard.js +11 -6
- package/src/HDS/components/Cards/index.js +6 -1
- package/src/HDS/components/Headers/v3Header.js +180 -194
- package/src/HDS/components/Tables/tableA.js +6 -13
- package/src/HDS/components/Tables/tableB.js +92 -74
- package/src/styles/tailwind.css +49 -9
|
@@ -24,41 +24,92 @@ const solutions = [
|
|
|
24
24
|
href: '#',
|
|
25
25
|
icon: 'home03'
|
|
26
26
|
},
|
|
27
|
-
{
|
|
28
|
-
name: 'Integrations',
|
|
29
|
-
description: "Connect with third-party tools that you're already using.",
|
|
30
|
-
href: '#',
|
|
31
|
-
icon: 'home03',
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
name: 'Automations',
|
|
35
|
-
description: 'Build strategic funnels that will drive your customers to convert',
|
|
36
|
-
href: '#',
|
|
37
|
-
icon: 'home03',
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
name: 'Reports',
|
|
41
|
-
description: 'Get detailed reports that will help you make more informed decisions ',
|
|
42
|
-
href: '#',
|
|
43
|
-
icon: 'home03',
|
|
44
|
-
},
|
|
45
|
-
]
|
|
46
|
-
const resources = [
|
|
47
|
-
{
|
|
48
|
-
name: 'Help Center',
|
|
49
|
-
description: 'Get all of your questions answered in our forums or contact support.',
|
|
50
|
-
href: '#',
|
|
51
|
-
},
|
|
52
|
-
{ name: 'Guides', description: 'Learn how to maximize our platform to get the most out of it.', href: '#' },
|
|
53
|
-
{ name: 'Events', description: 'See what meet-ups and other events we might be planning near you.', href: '#' },
|
|
54
|
-
{ name: 'Security', description: 'Understand how we take your privacy seriously.', href: '#' },
|
|
55
27
|
]
|
|
56
28
|
|
|
57
29
|
function classNames(...classes) {
|
|
58
30
|
return classes.filter(Boolean).join(' ')
|
|
59
31
|
}
|
|
60
32
|
|
|
61
|
-
export default function
|
|
33
|
+
export default function V3Header(props) {
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
const dropdown = (solutions) => (
|
|
37
|
+
<Transition
|
|
38
|
+
as={Fragment}
|
|
39
|
+
enter="transition ease-out duration-300"
|
|
40
|
+
enterFrom="opacity-0 translate-y-1"
|
|
41
|
+
enterTo="opacity-100 translate-y-0"
|
|
42
|
+
leave="transition ease-in duration-150"
|
|
43
|
+
leaveFrom="opacity-100 translate-y-0"
|
|
44
|
+
leaveTo="opacity-0 translate-y-1"
|
|
45
|
+
>
|
|
46
|
+
<Popover.Panel className="absolute z-10 -ml-4 mt-3 w-screen max-w-md transform lg:max-w-3xl">
|
|
47
|
+
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
|
|
48
|
+
<div className="relative grid gap-6 bg-neutral-0 px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
|
|
49
|
+
{solutions.map((item) => (
|
|
50
|
+
<a
|
|
51
|
+
key={item.name}
|
|
52
|
+
href={item.href}
|
|
53
|
+
className="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50"
|
|
54
|
+
>
|
|
55
|
+
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
|
56
|
+
|
|
57
|
+
{/* <item.icon className="h-6 w-6" aria-hidden="true" /> */}
|
|
58
|
+
</div>
|
|
59
|
+
<div className="ml-4">
|
|
60
|
+
<p className="text-base font-medium text-gray-900">{item.name}</p>
|
|
61
|
+
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
|
|
62
|
+
</div>
|
|
63
|
+
</a>
|
|
64
|
+
))}
|
|
65
|
+
</div>
|
|
66
|
+
<div className="bg-gray-50 p-5 sm:p-8">
|
|
67
|
+
<a href="#" className="-m-3 flow-root rounded-md p-3 hover:bg-gray-100">
|
|
68
|
+
<div className="flex items-center">
|
|
69
|
+
<div className="text-base font-medium text-gray-900">Enterprise</div>
|
|
70
|
+
<span className="ml-3 inline-flex items-center rounded-full bg-indigo-100 px-3 py-0.5 text-xs font-medium leading-5 text-indigo-800">
|
|
71
|
+
New
|
|
72
|
+
</span>
|
|
73
|
+
</div>
|
|
74
|
+
<p className="mt-1 text-sm text-gray-500">
|
|
75
|
+
Empower your entire team with even more advanced tools.
|
|
76
|
+
</p>
|
|
77
|
+
</a>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</Popover.Panel>
|
|
81
|
+
</Transition>
|
|
82
|
+
)
|
|
83
|
+
|
|
84
|
+
const headerListfn = (HEADER_LIST) =>
|
|
85
|
+
(
|
|
86
|
+
<>
|
|
87
|
+
{HEADER_LIST.map((item, index) => (
|
|
88
|
+
<Popover className="relative">
|
|
89
|
+
{({ open }) => (
|
|
90
|
+
<>
|
|
91
|
+
<Popover.Button
|
|
92
|
+
className={classNames(
|
|
93
|
+
open ? 'text-pink-800' : 'text-gray-500',
|
|
94
|
+
'group inline-flex items-center rounded-md bg-white hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
|
|
95
|
+
)}
|
|
96
|
+
>
|
|
97
|
+
<Typography textStyle='body3c-medium' className=''>{`${item['title']}`}</Typography>
|
|
98
|
+
{/* <Icon height='h-5' variant={'home03'} strokeColor={'#1EA7FD'} /> */}
|
|
99
|
+
</Popover.Button>
|
|
100
|
+
<div className='block'>
|
|
101
|
+
{dropdown(item['titleDropdown'])}
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
</>
|
|
105
|
+
)}
|
|
106
|
+
</Popover>
|
|
107
|
+
)
|
|
108
|
+
)
|
|
109
|
+
}
|
|
110
|
+
</>
|
|
111
|
+
)
|
|
112
|
+
|
|
62
113
|
return (
|
|
63
114
|
<Popover className="relative bg-white">
|
|
64
115
|
<div className="flex items-center bg-neutral-50 justify-between p-6 md:justify-start md:space-x-6">
|
|
@@ -78,132 +129,7 @@ export default function v3Header() {
|
|
|
78
129
|
</div>
|
|
79
130
|
<div className="hidden md:flex md:flex-1 md:items-center md:justify-between">
|
|
80
131
|
<Popover.Group as="nav" className="flex space-x-6">
|
|
81
|
-
|
|
82
|
-
{({ open }) => (
|
|
83
|
-
<>
|
|
84
|
-
<Popover.Button
|
|
85
|
-
className={classNames(
|
|
86
|
-
open ? 'text-gray-900' : 'text-gray-500',
|
|
87
|
-
'group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
|
|
88
|
-
)}
|
|
89
|
-
>
|
|
90
|
-
<span>Platform</span>
|
|
91
|
-
{/* <Icon variant={'home03'}
|
|
92
|
-
className={classNames(
|
|
93
|
-
open ? 'text-gray-600' : 'text-gray-400',
|
|
94
|
-
'ml-2 h-5 w-5 group-hover:text-gray-500'
|
|
95
|
-
)}
|
|
96
|
-
aria-hidden="true"
|
|
97
|
-
/> */}
|
|
98
|
-
<Icon variant={'home03'} strokeColor={'#1EA7FD'} />
|
|
99
|
-
</Popover.Button>
|
|
100
|
-
|
|
101
|
-
<Transition
|
|
102
|
-
as={Fragment}
|
|
103
|
-
enter="transition ease-out duration-200"
|
|
104
|
-
enterFrom="opacity-0 translate-y-1"
|
|
105
|
-
enterTo="opacity-100 translate-y-0"
|
|
106
|
-
leave="transition ease-in duration-150"
|
|
107
|
-
leaveFrom="opacity-100 translate-y-0"
|
|
108
|
-
leaveTo="opacity-0 translate-y-1"
|
|
109
|
-
>
|
|
110
|
-
<Popover.Panel className="absolute z-10 -ml-4 mt-3 w-screen max-w-md transform lg:max-w-3xl">
|
|
111
|
-
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
|
|
112
|
-
<div className="relative grid gap-6 bg-neutral-0 px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
|
|
113
|
-
{solutions.map((item) => (
|
|
114
|
-
<a
|
|
115
|
-
key={item.name}
|
|
116
|
-
href={item.href}
|
|
117
|
-
className="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50"
|
|
118
|
-
>
|
|
119
|
-
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
|
120
|
-
|
|
121
|
-
{/* <item.icon className="h-6 w-6" aria-hidden="true" /> */}
|
|
122
|
-
</div>
|
|
123
|
-
<div className="ml-4">
|
|
124
|
-
<p className="text-base font-medium text-gray-900">{item.name}</p>
|
|
125
|
-
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
|
|
126
|
-
</div>
|
|
127
|
-
</a>
|
|
128
|
-
))}
|
|
129
|
-
</div>
|
|
130
|
-
<div className="bg-gray-50 p-5 sm:p-8">
|
|
131
|
-
<a href="#" className="-m-3 flow-root rounded-md p-3 hover:bg-gray-100">
|
|
132
|
-
<div className="flex items-center">
|
|
133
|
-
<div className="text-base font-medium text-gray-900">Enterprise</div>
|
|
134
|
-
<span className="ml-3 inline-flex items-center rounded-full bg-indigo-100 px-3 py-0.5 text-xs font-medium leading-5 text-indigo-800">
|
|
135
|
-
New
|
|
136
|
-
</span>
|
|
137
|
-
</div>
|
|
138
|
-
<p className="mt-1 text-sm text-gray-500">
|
|
139
|
-
Empower your entire team with even more advanced tools.
|
|
140
|
-
</p>
|
|
141
|
-
</a>
|
|
142
|
-
</div>
|
|
143
|
-
</div>
|
|
144
|
-
</Popover.Panel>
|
|
145
|
-
</Transition>
|
|
146
|
-
</>
|
|
147
|
-
)}
|
|
148
|
-
</Popover>
|
|
149
|
-
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
|
|
150
|
-
Developers
|
|
151
|
-
</a>
|
|
152
|
-
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
|
|
153
|
-
Customers
|
|
154
|
-
</a>
|
|
155
|
-
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
|
|
156
|
-
Company
|
|
157
|
-
</a>
|
|
158
|
-
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
|
|
159
|
-
Pricing
|
|
160
|
-
</a>
|
|
161
|
-
|
|
162
|
-
<Popover className="relative">
|
|
163
|
-
{({ open }) => (
|
|
164
|
-
<>
|
|
165
|
-
<Popover.Button
|
|
166
|
-
className={classNames(
|
|
167
|
-
open ? 'text-gray-900' : 'text-gray-500',
|
|
168
|
-
'group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
|
|
169
|
-
)}
|
|
170
|
-
>
|
|
171
|
-
<span>More</span>
|
|
172
|
-
<Icon variant='home03'
|
|
173
|
-
className={classNames(
|
|
174
|
-
open ? 'text-gray-600' : 'text-gray-400',
|
|
175
|
-
'ml-2 h-5 w-5 group-hover:text-gray-500'
|
|
176
|
-
)}
|
|
177
|
-
aria-hidden="true"
|
|
178
|
-
/>
|
|
179
|
-
<Icon variant={'home03'} strokeColor={'#1EA7FD'} />
|
|
180
|
-
</Popover.Button>
|
|
181
|
-
|
|
182
|
-
<Transition
|
|
183
|
-
as={Fragment}
|
|
184
|
-
enter="transition ease-out duration-200"
|
|
185
|
-
enterFrom="opacity-0 translate-y-1"
|
|
186
|
-
enterTo="opacity-100 translate-y-0"
|
|
187
|
-
leave="transition ease-in duration-150"
|
|
188
|
-
leaveFrom="opacity-100 translate-y-0"
|
|
189
|
-
leaveTo="opacity-0 translate-y-1"
|
|
190
|
-
>
|
|
191
|
-
<Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-xs -translate-x-1/2 transform px-2 sm:px-0">
|
|
192
|
-
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
|
|
193
|
-
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
|
194
|
-
{resources.map((item) => (
|
|
195
|
-
<a key={item.name} href={item.href} className="-m-3 block rounded-md p-3 hover:bg-gray-50">
|
|
196
|
-
<p className="text-base font-medium text-gray-900">{item.name}</p>
|
|
197
|
-
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
|
|
198
|
-
</a>
|
|
199
|
-
))}
|
|
200
|
-
</div>
|
|
201
|
-
</div>
|
|
202
|
-
</Popover.Panel>
|
|
203
|
-
</Transition>
|
|
204
|
-
</>
|
|
205
|
-
)}
|
|
206
|
-
</Popover>
|
|
132
|
+
{headerListfn(props.HEADER_LIST)}
|
|
207
133
|
</Popover.Group>
|
|
208
134
|
|
|
209
135
|
|
|
@@ -249,17 +175,17 @@ export default function v3Header() {
|
|
|
249
175
|
leaveFrom="opacity-100 scale-100"
|
|
250
176
|
leaveTo="opacity-0 scale-95"
|
|
251
177
|
>
|
|
252
|
-
<Popover.Panel focus className="absolute bg-
|
|
253
|
-
<div className=" rounded-lg bg-white shadow-lg">
|
|
254
|
-
<div className="
|
|
178
|
+
<Popover.Panel focus className="absolute h-[calc(100%-112px)] bg-base-0 z-[1] inset-x-0 top-0 origin-top-right transform transition md:hidden">
|
|
179
|
+
<div className=" rounded-lg bg-white h-[calc(100%-112px)] shadow-lg">
|
|
180
|
+
<div className="">
|
|
255
181
|
<div className="flex items-center justify-end">
|
|
256
|
-
<div className="
|
|
182
|
+
<div className="">
|
|
257
183
|
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 w-full">
|
|
258
184
|
<Icon height={'h-5 w-5'} variant={'xclose'} strokeColor={'#3970FD'} />
|
|
259
185
|
</Popover.Button>
|
|
260
186
|
</div>
|
|
261
187
|
</div>
|
|
262
|
-
<div className="mt-6 ">
|
|
188
|
+
<div className="mt-6 abcdefhgk flex flex-col gap-6">
|
|
263
189
|
<div className='flex flex-col items-center'>
|
|
264
190
|
<img
|
|
265
191
|
className="inline-block w-full px-4 "
|
|
@@ -268,60 +194,43 @@ export default function v3Header() {
|
|
|
268
194
|
/>
|
|
269
195
|
</div>
|
|
270
196
|
|
|
271
|
-
<nav className="grid
|
|
272
|
-
{
|
|
197
|
+
<nav className="grid divide-y divide-neutral-200 border border-neutral-200 rounded-3xl ">
|
|
198
|
+
{props.HEADER_LIST.map((item) => (
|
|
273
199
|
<a
|
|
274
|
-
key={item
|
|
275
|
-
|
|
276
|
-
className="
|
|
200
|
+
key={item['title']}
|
|
201
|
+
|
|
202
|
+
className="flex justify-between items-center p-4"
|
|
277
203
|
>
|
|
278
204
|
|
|
279
|
-
<div className="flex
|
|
205
|
+
<div className="flex items-center justify-center gap-2 ">
|
|
280
206
|
|
|
281
207
|
<Icon height='h-5 w-5' variant={'home03'} strokeColor={'#3970FD'} />
|
|
282
208
|
|
|
209
|
+
|
|
210
|
+
<Typography textStyle='body3c-medium' className='text-neutral-900'>
|
|
211
|
+
{`${item['title']}`}
|
|
212
|
+
</Typography>
|
|
283
213
|
</div>
|
|
284
|
-
|
|
214
|
+
|
|
215
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={'chevronright'} strokeClass='stroke-neutral-500' />
|
|
285
216
|
</a>
|
|
286
217
|
))}
|
|
287
218
|
</nav>
|
|
288
219
|
</div>
|
|
289
220
|
</div>
|
|
290
|
-
<div className="py-6 px-5">
|
|
291
|
-
|
|
292
|
-
<a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
|
|
293
|
-
Pricing
|
|
294
|
-
</a>
|
|
295
|
-
|
|
296
|
-
<a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
|
|
297
|
-
Docs
|
|
298
|
-
</a>
|
|
299
|
-
|
|
300
|
-
<a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
|
|
301
|
-
Enterprise
|
|
302
|
-
</a>
|
|
303
|
-
{resources.map((item) => (
|
|
304
|
-
<a
|
|
305
|
-
key={item.name}
|
|
306
|
-
href={item.href}
|
|
307
|
-
className="text-base font-medium text-gray-900 hover:text-gray-700"
|
|
308
|
-
>
|
|
309
|
-
{item.name}
|
|
310
|
-
</a>
|
|
311
|
-
))}
|
|
312
|
-
</div> */}
|
|
313
|
-
<div className="mt-6">
|
|
221
|
+
<div className="py-6 px-5 ">
|
|
222
|
+
<div className="mt-6 ">
|
|
314
223
|
<div className='flex flex-row justify-around'>
|
|
315
|
-
<div className='w-full'>
|
|
224
|
+
<div className='w-full '>
|
|
316
225
|
<HDSButton
|
|
317
226
|
label="Log In"
|
|
318
|
-
type='
|
|
227
|
+
type='tonal'
|
|
319
228
|
leftIconVariant='none'
|
|
320
229
|
rightIconVariant='none'
|
|
321
230
|
state='default'
|
|
322
231
|
size='sm'
|
|
323
232
|
rightAnimatedArrow='true'
|
|
324
|
-
rightAnimatedArrowColor='#
|
|
233
|
+
rightAnimatedArrowColor='#3970FD'
|
|
325
234
|
animatedHoverStroke='group-hover:stroke-neutral-0'
|
|
326
235
|
|
|
327
236
|
/>
|
|
@@ -349,3 +258,80 @@ export default function v3Header() {
|
|
|
349
258
|
</Popover>
|
|
350
259
|
)
|
|
351
260
|
}
|
|
261
|
+
|
|
262
|
+
V3Header.defaultProps = {
|
|
263
|
+
HEADER_LIST: [
|
|
264
|
+
{
|
|
265
|
+
title: 'Platform',
|
|
266
|
+
titleDropdown: [
|
|
267
|
+
{
|
|
268
|
+
name: 'Analytics',
|
|
269
|
+
description: 'Get a better understanding of where your traffic is coming from.',
|
|
270
|
+
href: '#',
|
|
271
|
+
icon: 'home03',
|
|
272
|
+
},
|
|
273
|
+
{
|
|
274
|
+
name: 'Engagement',
|
|
275
|
+
description: 'Speak directly to your customers in a more meaningful way.',
|
|
276
|
+
href: '#',
|
|
277
|
+
icon: 'home03',
|
|
278
|
+
},
|
|
279
|
+
{
|
|
280
|
+
name: 'Security',
|
|
281
|
+
description: 'Your customers’ data will be safe and secure.',
|
|
282
|
+
href: '#',
|
|
283
|
+
icon: 'home03'
|
|
284
|
+
},
|
|
285
|
+
],
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
|
|
289
|
+
title: 'Developer',
|
|
290
|
+
titleDropdown: [
|
|
291
|
+
{
|
|
292
|
+
name: 'Analytics',
|
|
293
|
+
description: 'Get a better understanding of where your traffic is coming from.',
|
|
294
|
+
href: '#',
|
|
295
|
+
icon: 'home03',
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
name: 'Engagement',
|
|
299
|
+
description: 'Speak directly to your customers in a more meaningful way.',
|
|
300
|
+
href: '#',
|
|
301
|
+
icon: 'home03',
|
|
302
|
+
},
|
|
303
|
+
{
|
|
304
|
+
name: 'Security',
|
|
305
|
+
description: 'Your customers’ data will be safe and secure.',
|
|
306
|
+
href: '#',
|
|
307
|
+
icon: 'home03'
|
|
308
|
+
},
|
|
309
|
+
],
|
|
310
|
+
},
|
|
311
|
+
{
|
|
312
|
+
|
|
313
|
+
title: 'Pricing',
|
|
314
|
+
titleDropdown: [
|
|
315
|
+
{
|
|
316
|
+
name: 'Analytics',
|
|
317
|
+
description: 'Get a better understanding of where your traffic is coming from.',
|
|
318
|
+
href: '#',
|
|
319
|
+
icon: 'home03',
|
|
320
|
+
},
|
|
321
|
+
{
|
|
322
|
+
name: 'Engagement',
|
|
323
|
+
description: 'Speak directly to your customers in a more meaningful way.',
|
|
324
|
+
href: '#',
|
|
325
|
+
icon: 'home03',
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
name: 'Security',
|
|
329
|
+
description: 'Your customers’ data will be safe and secure.',
|
|
330
|
+
href: '#',
|
|
331
|
+
icon: 'home03'
|
|
332
|
+
},
|
|
333
|
+
]
|
|
334
|
+
},
|
|
335
|
+
|
|
336
|
+
]
|
|
337
|
+
}
|
|
@@ -15,14 +15,7 @@ export default function TableA(props) {
|
|
|
15
15
|
<h1 className="text-base font-semibold leading-6 text-gray-900">{head}</h1>
|
|
16
16
|
<p className="mt-2 text-sm text-gray-700">{description}</p>
|
|
17
17
|
</div>
|
|
18
|
-
|
|
19
|
-
<button
|
|
20
|
-
type="button"
|
|
21
|
-
className="block rounded-md bg-indigo-600 py-2 px-3 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
|
22
|
-
>
|
|
23
|
-
Add user
|
|
24
|
-
</button>
|
|
25
|
-
</div> */}
|
|
18
|
+
|
|
26
19
|
</div>
|
|
27
20
|
|
|
28
21
|
<div>
|
|
@@ -42,14 +35,14 @@ export default function TableA(props) {
|
|
|
42
35
|
</tr>
|
|
43
36
|
</thead>
|
|
44
37
|
<tbody className="divide-y divide-gray-200 bg-white">
|
|
45
|
-
{tableValue.map((
|
|
46
|
-
<tr key={
|
|
47
|
-
{Object.keys(
|
|
38
|
+
{tableValue.map((value,index) => (
|
|
39
|
+
<tr key={index}>
|
|
40
|
+
{Object.keys(value).map((key, index2) => (
|
|
48
41
|
<td
|
|
49
|
-
key={
|
|
42
|
+
key={index2+index}
|
|
50
43
|
className=" py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-3"
|
|
51
44
|
>
|
|
52
|
-
{``}{
|
|
45
|
+
{``}{value[key]}
|
|
53
46
|
|
|
54
47
|
</td>
|
|
55
48
|
))}
|