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