hds-web 1.0.5 → 1.0.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 +4 -4
- package/dist/index.js +3 -3
- package/package.json +1 -1
- package/src/HDS/components/Tables/tableB.js +15 -127
package/package.json
CHANGED
|
@@ -1,20 +1,6 @@
|
|
|
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
|
-
import { Tab } from '../Tabs'
|
|
6
|
-
|
|
7
|
-
const tabs = [
|
|
8
|
-
{ name: 'My Account', href: '', current: false },
|
|
9
|
-
{ name: 'Company', href: '', current: false },
|
|
10
|
-
{ name: 'Team Members', href: '', current: true },
|
|
11
|
-
{ name: 'Billing', href: '', current: false },
|
|
12
|
-
]
|
|
13
|
-
|
|
14
|
-
function handleTabClick(tab) {
|
|
15
|
-
console.log(`Tab "${tab.name}" updatedTabs`);
|
|
16
|
-
// Perform any other actions based on the clicked tab
|
|
17
|
-
}
|
|
18
4
|
|
|
19
5
|
export default function TableB(props) {
|
|
20
6
|
const {
|
|
@@ -23,126 +9,28 @@ export default function TableB(props) {
|
|
|
23
9
|
TABLE_VALUE,
|
|
24
10
|
TABLE_HEADER,
|
|
25
11
|
children
|
|
26
|
-
} = props;
|
|
27
|
-
const [activeTab, setActiveTab] = useState(2);
|
|
28
|
-
return (
|
|
29
|
-
<div className=" max-w-7xl">
|
|
30
|
-
<div className="sm:flex sm:items-center flex justify-around ">
|
|
31
|
-
|
|
32
|
-
<div className="w-full items-center flex justify-around md:flex md:flex-col md:items-center">
|
|
33
|
-
<div>
|
|
34
12
|
|
|
13
|
+
} = props;
|
|
35
14
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
15
|
+
return (
|
|
16
|
+
<div className=" max-w-7xl px-4 sm:px-6 lg:px-8 ">
|
|
17
|
+
<div className="sm:flex sm:items-center ">
|
|
18
|
+
<div className="sm:flex-auto flex flex-col items-center">
|
|
19
|
+
{title && (
|
|
20
|
+
<Typography
|
|
21
|
+
textStyle='h2'>
|
|
22
|
+
{title}
|
|
23
|
+
</Typography>
|
|
24
|
+
)
|
|
25
|
+
}
|
|
26
|
+
{description && (
|
|
44
27
|
<Typography
|
|
45
28
|
textStyle='body1c'>
|
|
46
29
|
{description}
|
|
47
30
|
</Typography>
|
|
48
31
|
)
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
<div className=''>
|
|
52
|
-
<Tab onTabClick={handleTabClick} tabs={tabs} />
|
|
53
|
-
</div>
|
|
54
|
-
</div>
|
|
55
|
-
</div>
|
|
56
|
-
|
|
57
|
-
<div className=''>
|
|
58
|
-
<div className="-mx-4 mt-8 sm:-mx-0 bg-neutral-0 rounded-3xl ">
|
|
59
|
-
<table className="min-w-full shadow rounded-3xl ">
|
|
60
|
-
<thead>
|
|
61
|
-
<tr className='divide-x divide-neutral-200 text-center rounded-t-3xl'>
|
|
62
|
-
<th
|
|
63
|
-
key={activeTab}
|
|
64
|
-
scope="col"
|
|
65
|
-
className="px-8 py-6 sm:table-cell"
|
|
66
|
-
>
|
|
67
|
-
<div className=''>
|
|
68
|
-
<div className='flex flex-col justify-center items-center text-center'>
|
|
69
|
-
<div className={'flex items-center gap-2'}>
|
|
70
|
-
{TABLE_HEADER[activeTab]['icon'] &&
|
|
71
|
-
(
|
|
72
|
-
<Icon
|
|
73
|
-
height='h-6 w-6'
|
|
74
|
-
variant={TABLE_HEADER[activeTab]['icon']}
|
|
75
|
-
strokeClass={TABLE_HEADER[activeTab]['iconStrokeClass']} />
|
|
76
|
-
)
|
|
77
|
-
}
|
|
78
|
-
{
|
|
79
|
-
TABLE_HEADER[activeTab]['title'] && activeTab == 0 && (
|
|
80
|
-
<Typography
|
|
81
|
-
textStyle='h5'
|
|
82
|
-
className={TABLE_HEADER[activeTab]['title_text_color']}>
|
|
83
|
-
{TABLE_HEADER[activeTab]['title']}
|
|
84
|
-
</Typography>)
|
|
85
|
-
}
|
|
86
|
-
{
|
|
87
|
-
TABLE_HEADER[activeTab]['title'] && activeTab != 0 && (
|
|
88
|
-
<Typography
|
|
89
|
-
textStyle='h5'
|
|
90
|
-
className={TABLE_HEADER[activeTab]['title_text_color']}>
|
|
91
|
-
{TABLE_HEADER[activeTab]['title']}
|
|
92
|
-
</Typography>)
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
</div>
|
|
97
|
-
<div className=' max-w-[10rem]'>
|
|
98
|
-
{TABLE_HEADER[activeTab]['descr'] && (
|
|
99
|
-
<Typography
|
|
100
|
-
textStyle='body1'
|
|
101
|
-
className={TABLE_HEADER[activeTab]['descr_text_color']}>
|
|
102
|
-
{TABLE_HEADER[activeTab]['descr']}
|
|
103
|
-
</Typography>)}
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
</div>
|
|
107
|
-
</th>
|
|
108
|
-
</tr>
|
|
109
|
-
</thead>
|
|
110
|
-
<tbody className="divide-y divide-neutral-200 rounded-b-3xl">
|
|
111
|
-
{TABLE_VALUE.map((value, index) => (
|
|
112
|
-
<tr className='divide-x divide-neutral-200' key={index}>
|
|
113
|
-
{Object.keys(value).map((key, index) => (
|
|
114
|
-
<React.Fragment key={index}>
|
|
115
|
-
{key === 'rowTitle' && (<td
|
|
116
|
-
key={key}
|
|
117
|
-
className="px-8 py-7 w-[22.5rem] whitespace-pre-line "
|
|
118
|
-
>
|
|
119
|
-
<Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'>{value[key]}</Typography>
|
|
120
|
-
|
|
121
|
-
</td>)}
|
|
122
|
-
|
|
123
|
-
{key !== 'rowTitle' && (
|
|
124
|
-
<td
|
|
125
|
-
key={key}
|
|
126
|
-
className="px-8 py-7 text-center"
|
|
127
|
-
>
|
|
128
|
-
{value[key]['text'] && (
|
|
129
|
-
<Typography className='text-neutral-700' textStyle='body1c'>{value[key]['text']}</Typography>
|
|
130
|
-
|
|
131
|
-
)}
|
|
132
|
-
{!value[key]['text'] && (
|
|
133
|
-
<div className='flex justify-center'>
|
|
134
|
-
<Icon height='h-5 w-5' variant={value[key]['iconVariant']} strokeClass={value[key]['iconStrokeClass']} />
|
|
135
|
-
</div>
|
|
136
|
-
)}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
</td>)}
|
|
140
|
-
</React.Fragment>
|
|
141
|
-
))}
|
|
142
|
-
</tr>
|
|
143
|
-
))}
|
|
144
|
-
</tbody>
|
|
145
|
-
</table>
|
|
32
|
+
}
|
|
33
|
+
|
|
146
34
|
</div>
|
|
147
35
|
</div>
|
|
148
36
|
|