sccoreui 2.1.9 → 2.2.0
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/App.scss +7 -4
- package/dist/assets/sccoreui.css +3 -3
- package/dist/components/button/speed-dial.js +4 -0
- package/dist/components/button/split-button.js +4 -0
- package/dist/directives/svg-icons.js +72 -15
- package/dist/index.js +5 -1
- package/dist/pages/badges/badge.js +11 -17
- package/dist/types/components/button/speed-dial.d.ts +2 -0
- package/dist/types/components/button/split-button.d.ts +2 -0
- package/dist/types/index.d.ts +2 -0
- package/package.json +1 -1
package/dist/App.scss
CHANGED
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
src: url('./assets/fonts/Lato-Regular.ttf') format('truetype');
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
* {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
30
|
+
// * {
|
|
31
|
+
// padding: 0;
|
|
32
|
+
// margin: 0;
|
|
33
|
+
// }
|
|
34
34
|
|
|
35
35
|
body {
|
|
36
36
|
margin: 0;
|
|
@@ -38,6 +38,9 @@ body {
|
|
|
38
38
|
-webkit-font-smoothing: antialiased;
|
|
39
39
|
-moz-osx-font-smoothing: grayscale;
|
|
40
40
|
line-height: var(--lh);
|
|
41
|
+
padding: 0;
|
|
42
|
+
margin: 0;
|
|
43
|
+
|
|
41
44
|
}
|
|
42
45
|
|
|
43
46
|
code {
|
package/dist/assets/sccoreui.css
CHANGED
|
@@ -910,7 +910,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--red-100);
|
|
|
910
910
|
background: transparent;
|
|
911
911
|
border: 0 none;
|
|
912
912
|
text-align: left;
|
|
913
|
-
line-height:
|
|
913
|
+
line-height: 20px;
|
|
914
914
|
padding-inline-start: 0px;
|
|
915
915
|
}
|
|
916
916
|
.p-inputgroup > .p-dropdown > .p-dropdown-label {
|
|
@@ -925,7 +925,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--red-100);
|
|
|
925
925
|
color: var(--gray-500);
|
|
926
926
|
text-align: left;
|
|
927
927
|
height: 24px;
|
|
928
|
-
line-height:
|
|
928
|
+
line-height: 20px;
|
|
929
929
|
font-size: 16px;
|
|
930
930
|
font-weight: 400;
|
|
931
931
|
padding-inline-start: 0px;
|
|
@@ -5356,7 +5356,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--red-100);
|
|
|
5356
5356
|
/* box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); */
|
|
5357
5357
|
border-radius: 8px;
|
|
5358
5358
|
border: 1px solid #eaecf0;
|
|
5359
|
-
padding: 10px 16px;
|
|
5359
|
+
padding: 6px 16px 10px 16px;
|
|
5360
5360
|
}
|
|
5361
5361
|
.p-card:hover {
|
|
5362
5362
|
box-shadow: 0px 0px 2px #c5c5c5;
|
|
@@ -37,12 +37,33 @@ exports.svgIcons = [
|
|
|
37
37
|
</svg>
|
|
38
38
|
`,
|
|
39
39
|
},
|
|
40
|
+
{
|
|
41
|
+
name: "close-chip-green-600",
|
|
42
|
+
svg: `<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
43
|
+
<path d="M7 1L1 7M1 1L7 7" stroke="#12B76A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
44
|
+
</svg>
|
|
45
|
+
`,
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: "close-chip-primary-600",
|
|
49
|
+
svg: `<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
50
|
+
<path d="M7 1L1 7M1 1L7 7" stroke="#162578" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
51
|
+
</svg>
|
|
52
|
+
`,
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
name: "close-chip-red-600",
|
|
56
|
+
svg: `<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
57
|
+
<path d="M7 1L1 7M1 1L7 7" stroke="#F04438" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
58
|
+
</svg>
|
|
59
|
+
`,
|
|
60
|
+
},
|
|
40
61
|
{
|
|
41
62
|
name: "close-chip",
|
|
42
63
|
svg: `<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
43
64
|
<path d="M7 1L1 7M1 1L7 7" stroke="#98A2B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
44
65
|
</svg>
|
|
45
|
-
|
|
66
|
+
`,
|
|
46
67
|
},
|
|
47
68
|
{
|
|
48
69
|
name: "close-toaster",
|
|
@@ -56,14 +77,14 @@ exports.svgIcons = [
|
|
|
56
77
|
svg: `<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
57
78
|
<path d="M1 1.5L6 6.5L11 1.5" stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
58
79
|
</svg>
|
|
59
|
-
|
|
80
|
+
`,
|
|
60
81
|
},
|
|
61
82
|
{
|
|
62
83
|
name: "help-circle",
|
|
63
84
|
svg: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
64
85
|
<path d="M6.05992 5.99998C6.21665 5.55442 6.52602 5.17872 6.93322 4.9394C7.34042 4.70009 7.81918 4.61261 8.2847 4.69245C8.75022 4.7723 9.17246 5.01433 9.47664 5.37567C9.78081 5.737 9.94729 6.19433 9.94659 6.66665C9.94659 7.99998 7.94659 8.66665 7.94659 8.66665M7.99992 11.3333H8.00659M14.6666 7.99998C14.6666 11.6819 11.6818 14.6666 7.99992 14.6666C4.31802 14.6666 1.33325 11.6819 1.33325 7.99998C1.33325 4.31808 4.31802 1.33331 7.99992 1.33331C11.6818 1.33331 14.6666 4.31808 14.6666 7.99998Z" stroke="#98A2B3" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
65
86
|
</svg>
|
|
66
|
-
|
|
87
|
+
`,
|
|
67
88
|
},
|
|
68
89
|
{
|
|
69
90
|
name: "alert-circle",
|
|
@@ -120,7 +141,6 @@ exports.svgIcons = [
|
|
|
120
141
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1788 16.8294C18.6367 15.6005 19.5611 13.7719 19.5611 11.73C19.5611 9.68805 18.6367 7.85946 17.1788 6.63055C15.7208 7.85946 14.7964 9.68805 14.7964 11.73C14.7964 13.7719 15.7208 15.6005 17.1788 16.8294Z" fill="#FF5E00"/>
|
|
121
142
|
<rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#F2F4F7"/>
|
|
122
143
|
</svg>
|
|
123
|
-
|
|
124
144
|
`,
|
|
125
145
|
},
|
|
126
146
|
{
|
|
@@ -138,7 +158,7 @@ exports.svgIcons = [
|
|
|
138
158
|
`,
|
|
139
159
|
},
|
|
140
160
|
{
|
|
141
|
-
name: "arrow-right-gray-
|
|
161
|
+
name: "arrow-right-gray-600",
|
|
142
162
|
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
143
163
|
<path d="M1.5 5H8.5M8.5 5L5 1.5M8.5 5L5 8.5" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
144
164
|
</svg>
|
|
@@ -152,14 +172,21 @@ exports.svgIcons = [
|
|
|
152
172
|
`,
|
|
153
173
|
},
|
|
154
174
|
{
|
|
155
|
-
name: "arrow-right-
|
|
175
|
+
name: "arrow-right-green-600",
|
|
176
|
+
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
177
|
+
<path d="M1.5 5H8.5M8.5 5L5 1.5M8.5 5L5 8.5" stroke="#12B76A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
178
|
+
</svg>
|
|
179
|
+
`,
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
name: "arrow-right-primary-600",
|
|
156
183
|
svg: `<svg width="10" height="10" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
157
184
|
<path d="M1.33334 6.00004H10.6667M10.6667 6.00004L6.00001 1.33337M10.6667 6.00004L6.00001 10.6667" stroke="#162578" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
158
185
|
</svg>
|
|
159
186
|
`,
|
|
160
187
|
},
|
|
161
188
|
{
|
|
162
|
-
name: "arrow-right-
|
|
189
|
+
name: "arrow-right-red-600",
|
|
163
190
|
svg: `<svg width="10" height="10" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
164
191
|
<path d="M1.33334 5.99992H10.6667M10.6667 5.99992L6.00001 1.33325M10.6667 5.99992L6.00001 10.6666" stroke="#F04438" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
165
192
|
</svg>
|
|
@@ -170,24 +197,55 @@ exports.svgIcons = [
|
|
|
170
197
|
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
171
198
|
<path d="M1.5 5H8.5M8.5 5L5 1.5M8.5 5L5 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
172
199
|
</svg>
|
|
173
|
-
|
|
174
|
-
`,
|
|
200
|
+
`,
|
|
175
201
|
},
|
|
176
202
|
{
|
|
177
203
|
name: "arrow-top",
|
|
178
204
|
svg: `<svg width="12" height="12" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
179
205
|
<path d="M5 8.5V1.5M5 1.5L1.5 5M5 1.5L8.5 5" stroke="#162578" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
206
|
+
</svg>
|
|
207
|
+
`,
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
name: "arrow-top-green-600",
|
|
211
|
+
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
212
|
+
<path d="M5 8.5V1.5M5 1.5L1.5 5M5 1.5L8.5 5" stroke="#12B76A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
213
|
+
</svg>
|
|
214
|
+
`,
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
name: "arrow-top-primary-600",
|
|
218
|
+
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
219
|
+
<path d="M5 8.5V1.5M5 1.5L1.5 5M5 1.5L8.5 5" stroke="#132067" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
220
|
+
</svg>
|
|
221
|
+
`,
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
name: "arrow-top-red-600",
|
|
225
|
+
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
226
|
+
<path d="M5 8.5V1.5M5 1.5L1.5 5M5 1.5L8.5 5" stroke="#D92D20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
227
|
+
</svg>
|
|
228
|
+
`,
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
name: "plus-icon-primary-600",
|
|
232
|
+
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
233
|
+
<path d="M5 1.5V8.5M1.5 5H8.5" stroke="#132067" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
234
|
+
</svg>
|
|
235
|
+
`,
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
name: "plus-icon-red-600",
|
|
239
|
+
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
240
|
+
<path d="M5 1.5V8.5M1.5 5H8.5" stroke="#D92D20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
180
241
|
</svg>
|
|
181
|
-
|
|
182
242
|
`,
|
|
183
243
|
},
|
|
184
244
|
{
|
|
185
|
-
name: "plus-icon",
|
|
245
|
+
name: "plus-icon-green-600",
|
|
186
246
|
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
187
|
-
<path d="M5 1.5V8.5M1.5 5H8.5" stroke="#
|
|
247
|
+
<path d="M5 1.5V8.5M1.5 5H8.5" stroke="#039855" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
188
248
|
</svg>
|
|
189
|
-
|
|
190
|
-
|
|
191
249
|
`,
|
|
192
250
|
},
|
|
193
251
|
{
|
|
@@ -209,7 +267,6 @@ exports.svgIcons = [
|
|
|
209
267
|
svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
210
268
|
<path d="M6.24984 10.0013L8.74984 12.5013L13.7498 7.5013M18.3332 10.0013C18.3332 14.6037 14.6022 18.3346 9.99984 18.3346C5.39746 18.3346 1.6665 14.6037 1.6665 10.0013C1.6665 5.39893 5.39746 1.66797 9.99984 1.66797C14.6022 1.66797 18.3332 5.39893 18.3332 10.0013Z" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
211
269
|
</svg>
|
|
212
|
-
|
|
213
270
|
`,
|
|
214
271
|
},
|
|
215
272
|
{
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DataViewLayoutOptions = exports.DataView = exports.Toast = exports.InputNumber = exports.OverlayPanel = exports.Tag = exports.Carousel = exports.ToggleButton = exports.Slider = exports.Card = exports.Dialog = exports.Password = exports.confirmPopup = exports.ConfirmDialog = exports.RadioButton = exports.Badge = exports.Tooltip = exports.Calendar = exports.Image = exports.AvatarGroup = exports.Avatar = exports.classNames = exports.Paginator = exports.MultiSelect = exports.FileUpload = exports.TabMenu = exports.TabPanel = exports.TabView = exports.Sidebar = exports.Column = exports.DataTable = exports.Checkbox = exports.AutoComplete = exports.ColorPicker = exports.AccordionTab = exports.Accordion = exports.InputText = exports.Dropdown = exports.Button = void 0;
|
|
3
|
+
exports.SpeedDial = exports.SplitButton = exports.DataViewLayoutOptions = exports.DataView = exports.Toast = exports.InputNumber = exports.OverlayPanel = exports.Tag = exports.Carousel = exports.ToggleButton = exports.Slider = exports.Card = exports.Dialog = exports.Password = exports.confirmPopup = exports.ConfirmDialog = exports.RadioButton = exports.Badge = exports.Tooltip = exports.Calendar = exports.Image = exports.AvatarGroup = exports.Avatar = exports.classNames = exports.Paginator = exports.MultiSelect = exports.FileUpload = exports.TabMenu = exports.TabPanel = exports.TabView = exports.Sidebar = exports.Column = exports.DataTable = exports.Checkbox = exports.AutoComplete = exports.ColorPicker = exports.AccordionTab = exports.Accordion = exports.InputText = exports.Dropdown = exports.Button = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const client_1 = tslib_1.__importDefault(require("react-dom/client"));
|
|
@@ -81,4 +81,8 @@ Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { r
|
|
|
81
81
|
var data_view_1 = require("./components/data-view/data-view");
|
|
82
82
|
Object.defineProperty(exports, "DataView", { enumerable: true, get: function () { return data_view_1.DataView; } });
|
|
83
83
|
Object.defineProperty(exports, "DataViewLayoutOptions", { enumerable: true, get: function () { return data_view_1.DataViewLayoutOptions; } });
|
|
84
|
+
var split_button_1 = require("./components/button/split-button");
|
|
85
|
+
Object.defineProperty(exports, "SplitButton", { enumerable: true, get: function () { return tslib_1.__importDefault(split_button_1).default; } });
|
|
86
|
+
var split_button_2 = require("./components/button/split-button");
|
|
87
|
+
Object.defineProperty(exports, "SpeedDial", { enumerable: true, get: function () { return tslib_1.__importDefault(split_button_2).default; } });
|
|
84
88
|
client_1.default.createRoot(document.getElementById('root')).render((0, jsx_runtime_1.jsx)(App_1.default, {}));
|
|
@@ -13,49 +13,43 @@ const button_1 = require("primereact/button");
|
|
|
13
13
|
const BadgeComponent = () => {
|
|
14
14
|
// dropdown badge state
|
|
15
15
|
const [selectedLabel, setSelectedLabel] = (0, react_1.useState)({
|
|
16
|
-
name: "
|
|
16
|
+
name: "Error",
|
|
17
17
|
code: "bg-red-500",
|
|
18
|
-
text_code: "text-
|
|
19
|
-
bg: "bg-
|
|
18
|
+
text_code: "text-red-700",
|
|
19
|
+
bg: "bg-red-50",
|
|
20
20
|
});
|
|
21
21
|
//dropdown badge options list
|
|
22
22
|
const labels = [
|
|
23
23
|
{
|
|
24
|
-
name: "
|
|
24
|
+
name: "Error",
|
|
25
25
|
code: "bg-red-500",
|
|
26
|
-
text_code: "text-
|
|
27
|
-
bg: "bg-
|
|
26
|
+
text_code: "text-red-700",
|
|
27
|
+
bg: "bg-red-50",
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
name: "
|
|
30
|
+
name: "Pending",
|
|
31
31
|
code: "bg-primary-500",
|
|
32
32
|
text_code: "text-primary-700",
|
|
33
33
|
bg: "bg-primary-50",
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
|
-
name: "
|
|
36
|
+
name: "Success",
|
|
37
37
|
code: "bg-green-500",
|
|
38
38
|
text_code: "text-green-700",
|
|
39
39
|
bg: "bg-green-50",
|
|
40
40
|
},
|
|
41
|
-
{
|
|
42
|
-
name: "Label",
|
|
43
|
-
code: "bg-orange-500",
|
|
44
|
-
text_code: "text-orange-700",
|
|
45
|
-
bg: "bg-orange-50",
|
|
46
|
-
},
|
|
47
41
|
];
|
|
48
42
|
// badge dropdown selected lablel templete
|
|
49
|
-
const selectedlabelTemplate = (option
|
|
43
|
+
const selectedlabelTemplate = (option) => {
|
|
50
44
|
if (option) {
|
|
51
45
|
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `${option.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", { className: `${option.text_code}`, children: option.name })] }));
|
|
52
46
|
}
|
|
53
|
-
return (0, jsx_runtime_1.jsx)("span", { children:
|
|
47
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `${selectedLabel.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", { className: `${selectedLabel.text_code}`, children: selectedLabel.name })] }));
|
|
54
48
|
};
|
|
55
49
|
// badge dropdown option lablel templete
|
|
56
50
|
const labelOptionTemplate = (option) => {
|
|
57
51
|
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `${option.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", { className: `${option.text_code}`, children: option.name })] }));
|
|
58
52
|
};
|
|
59
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Badges" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-8 h-full w-full flex flex-column", children: [(0, jsx_runtime_1.jsxs)("div", { className: "grid", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-12 sm:col-6 md:col-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: " bg-primary-50 mb-3 pl-1 pr-3 py-1 flex align-items-center justify-content-between text-md font-medium border-round-3xl gap-2 text-gray-700 pr-4", children: [(0, jsx_runtime_1.jsx)("span", { className: " bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-gray-700 text-md font-medium ", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: " bg-red-100 mb-3 text-red-700 pl-3 pr-1 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl text-gray-700 gap-2 text-gray-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "text-red-700 border-red-600 gap-2 bg-red-50 text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-Error-500" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-12 sm:col-6 md:col-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: " bg-primary-50 pl-1 pr-4 mb-3 py-1 flex align-items-center justify-content-between text-md font-medium border-round-3xl gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-primary-600 text-white text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 text-red-700 mb-3 pl-1 pr-3 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl border-primary-600 text-gray-700 gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: " text-white bg-red-600 text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-Error-500" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-12 sm:col-6 md:col-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: " bg-white mb-3 pl-1 pr-3 py-1 flex align-items-center justify-content-between text-md font-medium border-round-3xl border-1 border-primary-600 text-gray-700 gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-1 border-primary-600 text-gray-700 bg-white text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white text-red-700 pl-3 pr-1 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl border-1 border-red-600 gap-2 ", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "text-red-700 border-1 border-red-600 gap-2 bg-white text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-Error-500" })] })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex mt-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 mx-8", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-gray-100 border-round-2xl px-3 py-1 text-gray-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-round-2xl px-3 py-1 text-red-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-round-2xl px-3 border-1 border-red-600 py-1 text-red-700", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 mx-8", children: [(0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-gray-600 p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-gray-600 p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 mx-8", children: [(0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 py-1 gap-2 px-3 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 mx-8", children: [(0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-500" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 py-1 gap-2 px-3 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-500" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 py-1 gap-2 px-3 text-gray-700", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-3 mx-8" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "gap-5 my-8 w-full flex flex-wrap align-items-center justify-content-center", children: [(0, jsx_runtime_1.jsx)("span", { className: " bg-gray-100 border-circle flex align-items-center justify-content-center border-gray-700 border-1 p-3 text-gray-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top" }) }), (0, jsx_runtime_1.jsx)("span", { className: " bg-gray-100 border-circle flex align-items-center justify-content-center p-3 text-gray-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top" }) }), (0, jsx_runtime_1.jsx)("span", { className: " bg-gray-100 border-circle flex align-items-center justify-content-center p-3 text-gray-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon" }) }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedLabel, onChange: (e) => setSelectedLabel(e.value), options: labels, optionLabel: "name", placeholder: "Label", className: "shadow-none p-dropdown-badge py-0 bg-red-50 border-0 text-red-500 flex align-items-center justify-content-center border-round-3xl", valueTemplate: selectedlabelTemplate, itemTemplate: labelOptionTemplate }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", label: "Emails", className: "bg-primary-500", children: (0, jsx_runtime_1.jsx)(badge_1.Badge, { value: "8" }) })] })] })] }));
|
|
53
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Badges" }), (0, jsx_runtime_1.jsx)("div", { className: "p-8 h-full w-full flex flex-column", children: (0, jsx_runtime_1.jsxs)("div", { className: "grid ", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 border-round-2xl px-3 py-1 text-green-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-primary-50 border-round-2xl px-3 py-1 text-primary-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-round-2xl px-3 py-1 text-red-700", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 border-round-2xl px-3 border-1 border-green-600 py-1 text-green-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-primary-50 border-round-2xl px-3 border-1 border-primary-600 py-1 text-primary-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-round-2xl px-3 border-1 border-red-600 py-1 text-red-700", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600 p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-primary-600 p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-red-600 p-1" }), " Label"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600 p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-gray-600 p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-red-600 p-1" }), " Label"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: " bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-green-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-primary-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center border-green-700 border-1 py-1 gap-2 px-3 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-green-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-700 border-1 py-1 gap-2 px-3 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-primary-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center border-red-700 border-1 py-1 gap-2 px-3 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center border-green-700 border-1 py-1 gap-2 px-3 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-700 border-1 py-1 gap-2 px-3 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-100 border-round-2xl flex align-items-center border-red-700 border-1 py-1 gap-2 px-3 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 py-1 gap-2 px-3 text-green-700", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 py-1 gap-2 px-3 text-primary-700", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 py-1 gap-2 px-3 text-red-700", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 border-circle flex align-items-center justify-content-center border-green-600 border-1 p-3 text-green-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-primary-50 border-circle flex align-items-center justify-content-center border-primary-600 border-1 p-3 text-primary-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-circle flex align-items-center justify-content-center border-red-600 border-1 p-3 text-red-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 border-circle flex align-items-center justify-content-center p-3 text-green-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-primary-50 border-circle flex align-items-center justify-content-center p-3 text-primary-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-circle flex align-items-center justify-content-center p-3 text-red-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 border-circle flex align-items-center justify-content-center p-3 text-green-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-green-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-primary-100 border-circle flex align-items-center justify-content-center p-3 text-primary-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-primary-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-100 border-circle flex align-items-center justify-content-center p-3 text-red-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-red-600" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedLabel, onChange: (e) => setSelectedLabel(e.value), options: labels, optionLabel: "name", placeholder: selectedLabel.name, className: `shadow-none p-dropdown-badge py-0 ${selectedLabel.bg} border-0 text-red-500 flex align-items-center justify-content-center border-round-3xl`, valueTemplate: selectedlabelTemplate, itemTemplate: labelOptionTemplate }) }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 gap-3 flex flex-column", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-green-700 text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-gray-700 text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-red-700 text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-primary-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-red-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-green-600 text-md font-medium text-green-700 ", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-1 border-green-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-green-700", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-primary-600 text-md font-medium text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-1 border-primary-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-gray-700", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-red-600 text-md font-medium text-red-700 ", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-1 border-red-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-red-700", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-100 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-green-700 text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-100 pl-1 pr-4 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl text-primary-700 gap-2 ", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-primary-50 text-primary-700 text-md font-medium flex align-items-center justify-content-center border-round-2xl py-1 px-3", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-100 text-red-700 pl-1 pr-4 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-red-700 text-gray-700 bg-red-50 text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-green-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-primary-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-red-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-green-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700", children: ["We\u2019ve just released a new featur", (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-primary-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-red-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-green-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-green-600 text-md font-medium text-green-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "border-1 border-green-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-green-700 ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-primary-600 text-md font-medium text-primary-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "border-1 border-primary-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-primary-700 ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-red-600 text-md font-medium text-red-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "border-1 border-red-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-red-700 ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", label: "Emails", className: "bg-primary-500 p-auto m-auto", children: (0, jsx_runtime_1.jsx)(badge_1.Badge, { value: "8" }) })] }) })] }));
|
|
60
54
|
};
|
|
61
55
|
exports.default = BadgeComponent;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -38,4 +38,6 @@ export { default as OverlayPanel } from './components/overlays/overlay-panel';
|
|
|
38
38
|
export { default as InputNumber } from './components/input/input-number';
|
|
39
39
|
export { default as Toast } from './components/toast/toast';
|
|
40
40
|
export { DataView, DataViewLayoutOptions } from './components/data-view/data-view';
|
|
41
|
+
export { default as SplitButton } from './components/button/split-button';
|
|
42
|
+
export { default as SpeedDial } from './components/button/split-button';
|
|
41
43
|
export type { DropdownChangeEvent, CarouselResponsiveOption, ColorPickerChangeEvent, SliderChangeEvent };
|