@qite/tide-booking-component 1.2.5 → 1.3.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/.vs/ProjectSettings.json +3 -3
- package/.vs/VSWorkspaceState.json +5 -5
- package/README.md +8 -8
- package/build/build-cjs/booking-wizard/components/print-offer-button.d.ts +17 -0
- package/build/build-cjs/booking-wizard/types.d.ts +7 -0
- package/build/build-cjs/booking-wizard/use-offer-printer.d.ts +13 -0
- package/build/build-cjs/index.js +223 -72
- package/build/build-cjs/shared/utils/localization-util.d.ts +5 -0
- package/build/build-cjs/shared/utils/tide-api-utils.d.ts +1 -0
- package/build/build-esm/booking-wizard/components/print-offer-button.d.ts +17 -0
- package/build/build-esm/booking-wizard/types.d.ts +7 -0
- package/build/build-esm/booking-wizard/use-offer-printer.d.ts +13 -0
- package/build/build-esm/index.js +224 -73
- package/build/build-esm/shared/utils/localization-util.d.ts +5 -0
- package/build/build-esm/shared/utils/tide-api-utils.d.ts +1 -0
- package/package.json +75 -75
- package/rollup.config.js +23 -23
- package/src/booking-product/components/age-select.tsx +35 -35
- package/src/booking-product/components/amount-input.tsx +78 -78
- package/src/booking-product/components/date-range-picker/calendar-day.tsx +58 -58
- package/src/booking-product/components/date-range-picker/calendar.tsx +178 -178
- package/src/booking-product/components/date-range-picker/index.tsx +196 -196
- package/src/booking-product/components/dates.tsx +136 -136
- package/src/booking-product/components/footer.tsx +69 -69
- package/src/booking-product/components/header.tsx +79 -79
- package/src/booking-product/components/icon.tsx +251 -251
- package/src/booking-product/components/product.tsx +314 -314
- package/src/booking-product/components/rating.tsx +21 -21
- package/src/booking-product/components/rooms.tsx +195 -195
- package/src/booking-product/index.tsx +30 -30
- package/src/booking-product/settings-context.ts +14 -14
- package/src/booking-product/types.ts +28 -28
- package/src/booking-product/utils/api.ts +25 -25
- package/src/booking-product/utils/price.ts +29 -29
- package/src/booking-wizard/api-settings-slice.ts +24 -24
- package/src/booking-wizard/components/icon.tsx +508 -508
- package/src/booking-wizard/components/labeled-input.tsx +64 -64
- package/src/booking-wizard/components/labeled-select.tsx +69 -69
- package/src/booking-wizard/components/message.tsx +34 -34
- package/src/booking-wizard/components/multi-range-filter.tsx +113 -113
- package/src/booking-wizard/components/print-offer-button.tsx +66 -0
- package/src/booking-wizard/components/product-card.tsx +37 -37
- package/src/booking-wizard/components/step-indicator.tsx +51 -51
- package/src/booking-wizard/components/step-route.tsx +27 -27
- package/src/booking-wizard/declarations.d.ts +4 -4
- package/src/booking-wizard/features/booking/api.ts +49 -49
- package/src/booking-wizard/features/booking/booking-self-contained.tsx +384 -384
- package/src/booking-wizard/features/booking/booking-slice.ts +662 -662
- package/src/booking-wizard/features/booking/booking.tsx +356 -356
- package/src/booking-wizard/features/booking/constants.ts +16 -16
- package/src/booking-wizard/features/booking/selectors.ts +441 -441
- package/src/booking-wizard/features/confirmation/confirmation.tsx +97 -97
- package/src/booking-wizard/features/error/error.tsx +78 -78
- package/src/booking-wizard/features/flight-options/flight-filter.tsx +432 -432
- package/src/booking-wizard/features/flight-options/flight-option-flight.tsx +385 -385
- package/src/booking-wizard/features/flight-options/flight-option-modal.tsx +229 -229
- package/src/booking-wizard/features/flight-options/flight-option.tsx +81 -81
- package/src/booking-wizard/features/flight-options/flight-utils.ts +516 -516
- package/src/booking-wizard/features/flight-options/index.tsx +196 -196
- package/src/booking-wizard/features/price-details/price-details-api.ts +24 -24
- package/src/booking-wizard/features/price-details/price-details-slice.ts +178 -178
- package/src/booking-wizard/features/price-details/util.ts +155 -155
- package/src/booking-wizard/features/product-options/no-options.tsx +21 -21
- package/src/booking-wizard/features/product-options/none-option.tsx +120 -120
- package/src/booking-wizard/features/product-options/option-booking-airline-group.tsx +64 -64
- package/src/booking-wizard/features/product-options/option-booking-group.tsx +216 -216
- package/src/booking-wizard/features/product-options/option-item.tsx +317 -317
- package/src/booking-wizard/features/product-options/option-pax-card.tsx +201 -201
- package/src/booking-wizard/features/product-options/option-pax-group.tsx +175 -175
- package/src/booking-wizard/features/product-options/option-room.tsx +321 -321
- package/src/booking-wizard/features/product-options/option-unit-group.tsx +198 -198
- package/src/booking-wizard/features/product-options/option-units-card.tsx +185 -185
- package/src/booking-wizard/features/product-options/options-form.tsx +563 -459
- package/src/booking-wizard/features/room-options/index.tsx +187 -187
- package/src/booking-wizard/features/room-options/room-utils.ts +190 -190
- package/src/booking-wizard/features/room-options/room.tsx +160 -160
- package/src/booking-wizard/features/room-options/traveler-rooms.tsx +75 -75
- package/src/booking-wizard/features/sidebar/index.tsx +76 -76
- package/src/booking-wizard/features/sidebar/sidebar-flight.tsx +68 -68
- package/src/booking-wizard/features/sidebar/sidebar-util.ts +177 -177
- package/src/booking-wizard/features/sidebar/sidebar.tsx +364 -364
- package/src/booking-wizard/features/summary/summary-booking-option-pax.tsx +25 -25
- package/src/booking-wizard/features/summary/summary-booking-option-unit.tsx +25 -25
- package/src/booking-wizard/features/summary/summary-flight.tsx +39 -39
- package/src/booking-wizard/features/summary/summary-per-booking-option-group.tsx +69 -69
- package/src/booking-wizard/features/summary/summary-per-pax-option-group.tsx +63 -63
- package/src/booking-wizard/features/summary/summary-per-unit-option-group.tsx +66 -66
- package/src/booking-wizard/features/summary/summary-slice.ts +28 -28
- package/src/booking-wizard/features/summary/summary.tsx +674 -674
- package/src/booking-wizard/features/travelers-form/travelers-form-slice.ts +164 -164
- package/src/booking-wizard/features/travelers-form/travelers-form.tsx +754 -754
- package/src/booking-wizard/features/travelers-form/type-ahead-input.tsx +101 -101
- package/src/booking-wizard/features/travelers-form/validate-form.ts +245 -245
- package/src/booking-wizard/index.tsx +36 -36
- package/src/booking-wizard/settings-context.ts +67 -60
- package/src/booking-wizard/store.ts +31 -31
- package/src/booking-wizard/types.ts +283 -276
- package/src/booking-wizard/use-offer-printer.ts +136 -0
- package/src/index.ts +4 -4
- package/src/shared/components/loader.tsx +16 -16
- package/src/shared/translations/en-GB.json +237 -232
- package/src/shared/translations/fr-BE.json +238 -233
- package/src/shared/translations/nl-BE.json +237 -232
- package/src/shared/types.ts +4 -4
- package/src/shared/utils/class-util.ts +9 -9
- package/src/shared/utils/localization-util.ts +62 -62
- package/src/shared/utils/query-string-util.ts +119 -119
- package/src/shared/utils/tide-api-utils.ts +36 -36
- package/styles/booking-product-variables.scss +394 -394
- package/styles/booking-product.scss +446 -446
- package/styles/booking-wizard-variables.scss +873 -871
- package/styles/booking-wizard.scss +59 -59
- package/styles/components/_animations.scss +39 -39
- package/styles/components/_base.scss +107 -107
- package/styles/components/_booking.scss +879 -879
- package/styles/components/_button.scss +238 -238
- package/styles/components/_checkbox.scss +219 -219
- package/styles/components/_cta.scss +208 -208
- package/styles/components/_date-list.scss +41 -41
- package/styles/components/_date-range-picker.scss +225 -225
- package/styles/components/_decrement-increment.scss +35 -35
- package/styles/components/_dropdown.scss +72 -72
- package/styles/components/_flight-option.scss +1429 -1429
- package/styles/components/_form.scss +1583 -1583
- package/styles/components/_info-message.scss +71 -71
- package/styles/components/_input.scss +25 -25
- package/styles/components/_list.scss +187 -187
- package/styles/components/_loader.scss +72 -72
- package/styles/components/_mixins.scss +550 -550
- package/styles/components/_placeholders.scss +166 -166
- package/styles/components/_pricing-summary.scss +155 -155
- package/styles/components/_qsm.scss +17 -17
- package/styles/components/_radiobutton.scss +170 -170
- package/styles/components/_select-wrapper.scss +80 -80
- package/styles/components/_spinner.scss +29 -29
- package/styles/components/_step-indicators.scss +168 -168
- package/styles/components/_table.scss +81 -81
- package/styles/components/_tree.scss +530 -530
- package/styles/components/_typeahead.scss +281 -281
- package/styles/components/_variables.scss +89 -89
- package/tsconfig.json +24 -24
|
@@ -1,251 +1,251 @@
|
|
|
1
|
-
import { isEmpty } from "lodash";
|
|
2
|
-
import React, { useContext } from "react";
|
|
3
|
-
import SettingsContext from "../settings-context";
|
|
4
|
-
import HTMLComment from "react-html-comment";
|
|
5
|
-
|
|
6
|
-
interface IconProps {
|
|
7
|
-
name: string;
|
|
8
|
-
className?: string;
|
|
9
|
-
title?: string;
|
|
10
|
-
width?: number;
|
|
11
|
-
height?: number;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
const Icon: React.FC<IconProps> = ({
|
|
15
|
-
name,
|
|
16
|
-
className,
|
|
17
|
-
title,
|
|
18
|
-
width,
|
|
19
|
-
height,
|
|
20
|
-
}) => {
|
|
21
|
-
const { icons } = useContext(SettingsContext);
|
|
22
|
-
|
|
23
|
-
if (icons) {
|
|
24
|
-
return (
|
|
25
|
-
<svg
|
|
26
|
-
className={["icon", `icon--${name}`, className]
|
|
27
|
-
.filter((className) => !isEmpty(className))
|
|
28
|
-
.join(" ")}
|
|
29
|
-
width={width}
|
|
30
|
-
height={height}
|
|
31
|
-
>
|
|
32
|
-
{title && <title>{title}</title>}
|
|
33
|
-
<use href={`${icons}#${name}`}></use>
|
|
34
|
-
</svg>
|
|
35
|
-
);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
switch (name) {
|
|
39
|
-
case "ui-close":
|
|
40
|
-
return (
|
|
41
|
-
<svg
|
|
42
|
-
className={["icon", `icon--${name}`, className]
|
|
43
|
-
.filter((className) => !isEmpty(className))
|
|
44
|
-
.join(" ")}
|
|
45
|
-
width={width}
|
|
46
|
-
height={height}
|
|
47
|
-
viewBox="0 0 384 512"
|
|
48
|
-
>
|
|
49
|
-
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
50
|
-
{title && <title>{title}</title>}
|
|
51
|
-
<path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
|
|
52
|
-
</svg>
|
|
53
|
-
);
|
|
54
|
-
|
|
55
|
-
case "ui-plus":
|
|
56
|
-
return (
|
|
57
|
-
<svg
|
|
58
|
-
className={["icon", `icon--${name}`, className]
|
|
59
|
-
.filter((className) => !isEmpty(className))
|
|
60
|
-
.join(" ")}
|
|
61
|
-
width={width}
|
|
62
|
-
height={height}
|
|
63
|
-
viewBox="0 0 448 512"
|
|
64
|
-
>
|
|
65
|
-
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
66
|
-
{title && <title>{title}</title>}
|
|
67
|
-
<path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z" />
|
|
68
|
-
</svg>
|
|
69
|
-
);
|
|
70
|
-
|
|
71
|
-
case "ui-min":
|
|
72
|
-
return (
|
|
73
|
-
<svg
|
|
74
|
-
className={["icon", `icon--${name}`, className]
|
|
75
|
-
.filter((className) => !isEmpty(className))
|
|
76
|
-
.join(" ")}
|
|
77
|
-
width={width}
|
|
78
|
-
height={height}
|
|
79
|
-
viewBox="0 0 448 512"
|
|
80
|
-
>
|
|
81
|
-
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
82
|
-
{title && <title>{title}</title>}
|
|
83
|
-
<path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z" />
|
|
84
|
-
</svg>
|
|
85
|
-
);
|
|
86
|
-
|
|
87
|
-
case "ui-chevron":
|
|
88
|
-
return (
|
|
89
|
-
<svg
|
|
90
|
-
className={["icon", `icon--${name}`, className]
|
|
91
|
-
.filter((className) => !isEmpty(className))
|
|
92
|
-
.join(" ")}
|
|
93
|
-
width={width}
|
|
94
|
-
height={height}
|
|
95
|
-
viewBox="0 0 320 512"
|
|
96
|
-
>
|
|
97
|
-
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
98
|
-
{title && <title>{title}</title>}
|
|
99
|
-
<path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
|
|
100
|
-
</svg>
|
|
101
|
-
);
|
|
102
|
-
|
|
103
|
-
case "ui-calendar":
|
|
104
|
-
return (
|
|
105
|
-
<svg
|
|
106
|
-
className={["icon", `icon--${name}`, className]
|
|
107
|
-
.filter((className) => !isEmpty(className))
|
|
108
|
-
.join(" ")}
|
|
109
|
-
width={width}
|
|
110
|
-
height={height}
|
|
111
|
-
viewBox="0 0 448 512"
|
|
112
|
-
>
|
|
113
|
-
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
114
|
-
{title && <title>{title}</title>}
|
|
115
|
-
<path d="M96 32l0 32L48 64C21.5 64 0 85.5 0 112l0 48 448 0 0-48c0-26.5-21.5-48-48-48l-48 0 0-32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 32L160 64l0-32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192L0 192 0 464c0 26.5 21.5 48 48 48l352 0c26.5 0 48-21.5 48-48l0-272z" />
|
|
116
|
-
</svg>
|
|
117
|
-
);
|
|
118
|
-
|
|
119
|
-
case "ui-bed":
|
|
120
|
-
return (
|
|
121
|
-
<svg
|
|
122
|
-
className={["icon", `icon--${name}`, className]
|
|
123
|
-
.filter((className) => !isEmpty(className))
|
|
124
|
-
.join(" ")}
|
|
125
|
-
width={width}
|
|
126
|
-
height={height}
|
|
127
|
-
viewBox="0 0 640 512"
|
|
128
|
-
>
|
|
129
|
-
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
130
|
-
{title && <title>{title}</title>}
|
|
131
|
-
<path d="M32 32c17.7 0 32 14.3 32 32l0 256 224 0 0-160c0-17.7 14.3-32 32-32l224 0c53 0 96 43 96 96l0 224c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-32-224 0-32 0L64 416l0 32c0 17.7-14.3 32-32 32s-32-14.3-32-32L0 64C0 46.3 14.3 32 32 32zm144 96a80 80 0 1 1 0 160 80 80 0 1 1 0-160z" />
|
|
132
|
-
</svg>
|
|
133
|
-
);
|
|
134
|
-
|
|
135
|
-
case "ui-flight":
|
|
136
|
-
return (
|
|
137
|
-
<svg
|
|
138
|
-
className={["icon", `icon--${name}`, className]
|
|
139
|
-
.filter((className) => !isEmpty(className))
|
|
140
|
-
.join(" ")}
|
|
141
|
-
width={width}
|
|
142
|
-
height={height}
|
|
143
|
-
viewBox="0 0 576 512"
|
|
144
|
-
>
|
|
145
|
-
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
146
|
-
{title && <title>{title}</title>}
|
|
147
|
-
<path d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z" />
|
|
148
|
-
</svg>
|
|
149
|
-
);
|
|
150
|
-
|
|
151
|
-
case "ui-transfer":
|
|
152
|
-
return (
|
|
153
|
-
<svg
|
|
154
|
-
className={["icon", `icon--${name}`, className]
|
|
155
|
-
.filter((className) => !isEmpty(className))
|
|
156
|
-
.join(" ")}
|
|
157
|
-
width={width}
|
|
158
|
-
height={height}
|
|
159
|
-
viewBox="0 0 512 512"
|
|
160
|
-
>
|
|
161
|
-
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
162
|
-
{title && <title>{title}</title>}
|
|
163
|
-
<path d="M192 0c-17.7 0-32 14.3-32 32l0 32 0 .2c-38.6 2.2-72.3 27.3-85.2 64.1L39.6 228.8C16.4 238.4 0 261.3 0 288L0 432l0 48c0 17.7 14.3 32 32 32l32 0c17.7 0 32-14.3 32-32l0-48 320 0 0 48c0 17.7 14.3 32 32 32l32 0c17.7 0 32-14.3 32-32l0-48 0-144c0-26.7-16.4-49.6-39.6-59.2L437.2 128.3c-12.9-36.8-46.6-62-85.2-64.1l0-.2 0-32c0-17.7-14.3-32-32-32L192 0zM165.4 128l181.2 0c13.6 0 25.7 8.6 30.2 21.4L402.9 224l-293.8 0 26.1-74.6c4.5-12.8 16.6-21.4 30.2-21.4zM96 288a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm288 32a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" />
|
|
164
|
-
</svg>
|
|
165
|
-
);
|
|
166
|
-
|
|
167
|
-
case "ui-star":
|
|
168
|
-
return (
|
|
169
|
-
<svg
|
|
170
|
-
className={["icon", `icon--${name}`, className]
|
|
171
|
-
.filter((className) => !isEmpty(className))
|
|
172
|
-
.join(" ")}
|
|
173
|
-
width={width}
|
|
174
|
-
height={height}
|
|
175
|
-
viewBox="0 0 576 512"
|
|
176
|
-
>
|
|
177
|
-
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
178
|
-
{title && <title>{title}</title>}
|
|
179
|
-
<path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
|
|
180
|
-
</svg>
|
|
181
|
-
);
|
|
182
|
-
|
|
183
|
-
case "ui-halfstar":
|
|
184
|
-
return (
|
|
185
|
-
<svg
|
|
186
|
-
className={["icon", `icon--${name}`, className]
|
|
187
|
-
.filter((className) => !isEmpty(className))
|
|
188
|
-
.join(" ")}
|
|
189
|
-
width={width}
|
|
190
|
-
height={height}
|
|
191
|
-
viewBox="0 0 576 512"
|
|
192
|
-
>
|
|
193
|
-
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
194
|
-
{title && <title>{title}</title>}
|
|
195
|
-
<path d="M288 0c-12.2 .1-23.3 7-28.6 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3L288 439.8 288 0zM429.9 512c1.1 .1 2.1 .1 3.2 0l-3.2 0z" />
|
|
196
|
-
</svg>
|
|
197
|
-
);
|
|
198
|
-
|
|
199
|
-
case "ui-user":
|
|
200
|
-
return (
|
|
201
|
-
<svg
|
|
202
|
-
className={["icon", `icon--${name}`, className]
|
|
203
|
-
.filter((className) => !isEmpty(className))
|
|
204
|
-
.join(" ")}
|
|
205
|
-
width={width}
|
|
206
|
-
height={height}
|
|
207
|
-
viewBox="0 0 448 512"
|
|
208
|
-
>
|
|
209
|
-
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
210
|
-
{title && <title>{title}</title>}
|
|
211
|
-
<path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z" />
|
|
212
|
-
</svg>
|
|
213
|
-
);
|
|
214
|
-
|
|
215
|
-
case "ui-pencil":
|
|
216
|
-
return (
|
|
217
|
-
<svg
|
|
218
|
-
className={["icon", `icon--${name}`, className]
|
|
219
|
-
.filter((className) => !isEmpty(className))
|
|
220
|
-
.join(" ")}
|
|
221
|
-
width={width}
|
|
222
|
-
height={height}
|
|
223
|
-
viewBox="0 0 512 512"
|
|
224
|
-
>
|
|
225
|
-
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
226
|
-
{title && <title>{title}</title>}
|
|
227
|
-
<path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z" />
|
|
228
|
-
</svg>
|
|
229
|
-
);
|
|
230
|
-
|
|
231
|
-
case "ui-check":
|
|
232
|
-
return (
|
|
233
|
-
<svg
|
|
234
|
-
className={["icon", `icon--${name}`, className]
|
|
235
|
-
.filter((className) => !isEmpty(className))
|
|
236
|
-
.join(" ")}
|
|
237
|
-
width={width}
|
|
238
|
-
height={height}
|
|
239
|
-
viewBox="0 0 448 512"
|
|
240
|
-
>
|
|
241
|
-
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
242
|
-
{title && <title>{title}</title>}
|
|
243
|
-
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
|
|
244
|
-
</svg>
|
|
245
|
-
);
|
|
246
|
-
default:
|
|
247
|
-
return null;
|
|
248
|
-
}
|
|
249
|
-
};
|
|
250
|
-
|
|
251
|
-
export default Icon;
|
|
1
|
+
import { isEmpty } from "lodash";
|
|
2
|
+
import React, { useContext } from "react";
|
|
3
|
+
import SettingsContext from "../settings-context";
|
|
4
|
+
import HTMLComment from "react-html-comment";
|
|
5
|
+
|
|
6
|
+
interface IconProps {
|
|
7
|
+
name: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
title?: string;
|
|
10
|
+
width?: number;
|
|
11
|
+
height?: number;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
const Icon: React.FC<IconProps> = ({
|
|
15
|
+
name,
|
|
16
|
+
className,
|
|
17
|
+
title,
|
|
18
|
+
width,
|
|
19
|
+
height,
|
|
20
|
+
}) => {
|
|
21
|
+
const { icons } = useContext(SettingsContext);
|
|
22
|
+
|
|
23
|
+
if (icons) {
|
|
24
|
+
return (
|
|
25
|
+
<svg
|
|
26
|
+
className={["icon", `icon--${name}`, className]
|
|
27
|
+
.filter((className) => !isEmpty(className))
|
|
28
|
+
.join(" ")}
|
|
29
|
+
width={width}
|
|
30
|
+
height={height}
|
|
31
|
+
>
|
|
32
|
+
{title && <title>{title}</title>}
|
|
33
|
+
<use href={`${icons}#${name}`}></use>
|
|
34
|
+
</svg>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
switch (name) {
|
|
39
|
+
case "ui-close":
|
|
40
|
+
return (
|
|
41
|
+
<svg
|
|
42
|
+
className={["icon", `icon--${name}`, className]
|
|
43
|
+
.filter((className) => !isEmpty(className))
|
|
44
|
+
.join(" ")}
|
|
45
|
+
width={width}
|
|
46
|
+
height={height}
|
|
47
|
+
viewBox="0 0 384 512"
|
|
48
|
+
>
|
|
49
|
+
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
50
|
+
{title && <title>{title}</title>}
|
|
51
|
+
<path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
|
|
52
|
+
</svg>
|
|
53
|
+
);
|
|
54
|
+
|
|
55
|
+
case "ui-plus":
|
|
56
|
+
return (
|
|
57
|
+
<svg
|
|
58
|
+
className={["icon", `icon--${name}`, className]
|
|
59
|
+
.filter((className) => !isEmpty(className))
|
|
60
|
+
.join(" ")}
|
|
61
|
+
width={width}
|
|
62
|
+
height={height}
|
|
63
|
+
viewBox="0 0 448 512"
|
|
64
|
+
>
|
|
65
|
+
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
66
|
+
{title && <title>{title}</title>}
|
|
67
|
+
<path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z" />
|
|
68
|
+
</svg>
|
|
69
|
+
);
|
|
70
|
+
|
|
71
|
+
case "ui-min":
|
|
72
|
+
return (
|
|
73
|
+
<svg
|
|
74
|
+
className={["icon", `icon--${name}`, className]
|
|
75
|
+
.filter((className) => !isEmpty(className))
|
|
76
|
+
.join(" ")}
|
|
77
|
+
width={width}
|
|
78
|
+
height={height}
|
|
79
|
+
viewBox="0 0 448 512"
|
|
80
|
+
>
|
|
81
|
+
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
82
|
+
{title && <title>{title}</title>}
|
|
83
|
+
<path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z" />
|
|
84
|
+
</svg>
|
|
85
|
+
);
|
|
86
|
+
|
|
87
|
+
case "ui-chevron":
|
|
88
|
+
return (
|
|
89
|
+
<svg
|
|
90
|
+
className={["icon", `icon--${name}`, className]
|
|
91
|
+
.filter((className) => !isEmpty(className))
|
|
92
|
+
.join(" ")}
|
|
93
|
+
width={width}
|
|
94
|
+
height={height}
|
|
95
|
+
viewBox="0 0 320 512"
|
|
96
|
+
>
|
|
97
|
+
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
98
|
+
{title && <title>{title}</title>}
|
|
99
|
+
<path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
|
|
100
|
+
</svg>
|
|
101
|
+
);
|
|
102
|
+
|
|
103
|
+
case "ui-calendar":
|
|
104
|
+
return (
|
|
105
|
+
<svg
|
|
106
|
+
className={["icon", `icon--${name}`, className]
|
|
107
|
+
.filter((className) => !isEmpty(className))
|
|
108
|
+
.join(" ")}
|
|
109
|
+
width={width}
|
|
110
|
+
height={height}
|
|
111
|
+
viewBox="0 0 448 512"
|
|
112
|
+
>
|
|
113
|
+
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
114
|
+
{title && <title>{title}</title>}
|
|
115
|
+
<path d="M96 32l0 32L48 64C21.5 64 0 85.5 0 112l0 48 448 0 0-48c0-26.5-21.5-48-48-48l-48 0 0-32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 32L160 64l0-32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192L0 192 0 464c0 26.5 21.5 48 48 48l352 0c26.5 0 48-21.5 48-48l0-272z" />
|
|
116
|
+
</svg>
|
|
117
|
+
);
|
|
118
|
+
|
|
119
|
+
case "ui-bed":
|
|
120
|
+
return (
|
|
121
|
+
<svg
|
|
122
|
+
className={["icon", `icon--${name}`, className]
|
|
123
|
+
.filter((className) => !isEmpty(className))
|
|
124
|
+
.join(" ")}
|
|
125
|
+
width={width}
|
|
126
|
+
height={height}
|
|
127
|
+
viewBox="0 0 640 512"
|
|
128
|
+
>
|
|
129
|
+
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
130
|
+
{title && <title>{title}</title>}
|
|
131
|
+
<path d="M32 32c17.7 0 32 14.3 32 32l0 256 224 0 0-160c0-17.7 14.3-32 32-32l224 0c53 0 96 43 96 96l0 224c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-32-224 0-32 0L64 416l0 32c0 17.7-14.3 32-32 32s-32-14.3-32-32L0 64C0 46.3 14.3 32 32 32zm144 96a80 80 0 1 1 0 160 80 80 0 1 1 0-160z" />
|
|
132
|
+
</svg>
|
|
133
|
+
);
|
|
134
|
+
|
|
135
|
+
case "ui-flight":
|
|
136
|
+
return (
|
|
137
|
+
<svg
|
|
138
|
+
className={["icon", `icon--${name}`, className]
|
|
139
|
+
.filter((className) => !isEmpty(className))
|
|
140
|
+
.join(" ")}
|
|
141
|
+
width={width}
|
|
142
|
+
height={height}
|
|
143
|
+
viewBox="0 0 576 512"
|
|
144
|
+
>
|
|
145
|
+
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
146
|
+
{title && <title>{title}</title>}
|
|
147
|
+
<path d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z" />
|
|
148
|
+
</svg>
|
|
149
|
+
);
|
|
150
|
+
|
|
151
|
+
case "ui-transfer":
|
|
152
|
+
return (
|
|
153
|
+
<svg
|
|
154
|
+
className={["icon", `icon--${name}`, className]
|
|
155
|
+
.filter((className) => !isEmpty(className))
|
|
156
|
+
.join(" ")}
|
|
157
|
+
width={width}
|
|
158
|
+
height={height}
|
|
159
|
+
viewBox="0 0 512 512"
|
|
160
|
+
>
|
|
161
|
+
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
162
|
+
{title && <title>{title}</title>}
|
|
163
|
+
<path d="M192 0c-17.7 0-32 14.3-32 32l0 32 0 .2c-38.6 2.2-72.3 27.3-85.2 64.1L39.6 228.8C16.4 238.4 0 261.3 0 288L0 432l0 48c0 17.7 14.3 32 32 32l32 0c17.7 0 32-14.3 32-32l0-48 320 0 0 48c0 17.7 14.3 32 32 32l32 0c17.7 0 32-14.3 32-32l0-48 0-144c0-26.7-16.4-49.6-39.6-59.2L437.2 128.3c-12.9-36.8-46.6-62-85.2-64.1l0-.2 0-32c0-17.7-14.3-32-32-32L192 0zM165.4 128l181.2 0c13.6 0 25.7 8.6 30.2 21.4L402.9 224l-293.8 0 26.1-74.6c4.5-12.8 16.6-21.4 30.2-21.4zM96 288a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm288 32a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" />
|
|
164
|
+
</svg>
|
|
165
|
+
);
|
|
166
|
+
|
|
167
|
+
case "ui-star":
|
|
168
|
+
return (
|
|
169
|
+
<svg
|
|
170
|
+
className={["icon", `icon--${name}`, className]
|
|
171
|
+
.filter((className) => !isEmpty(className))
|
|
172
|
+
.join(" ")}
|
|
173
|
+
width={width}
|
|
174
|
+
height={height}
|
|
175
|
+
viewBox="0 0 576 512"
|
|
176
|
+
>
|
|
177
|
+
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
178
|
+
{title && <title>{title}</title>}
|
|
179
|
+
<path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
|
|
180
|
+
</svg>
|
|
181
|
+
);
|
|
182
|
+
|
|
183
|
+
case "ui-halfstar":
|
|
184
|
+
return (
|
|
185
|
+
<svg
|
|
186
|
+
className={["icon", `icon--${name}`, className]
|
|
187
|
+
.filter((className) => !isEmpty(className))
|
|
188
|
+
.join(" ")}
|
|
189
|
+
width={width}
|
|
190
|
+
height={height}
|
|
191
|
+
viewBox="0 0 576 512"
|
|
192
|
+
>
|
|
193
|
+
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
194
|
+
{title && <title>{title}</title>}
|
|
195
|
+
<path d="M288 0c-12.2 .1-23.3 7-28.6 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3L288 439.8 288 0zM429.9 512c1.1 .1 2.1 .1 3.2 0l-3.2 0z" />
|
|
196
|
+
</svg>
|
|
197
|
+
);
|
|
198
|
+
|
|
199
|
+
case "ui-user":
|
|
200
|
+
return (
|
|
201
|
+
<svg
|
|
202
|
+
className={["icon", `icon--${name}`, className]
|
|
203
|
+
.filter((className) => !isEmpty(className))
|
|
204
|
+
.join(" ")}
|
|
205
|
+
width={width}
|
|
206
|
+
height={height}
|
|
207
|
+
viewBox="0 0 448 512"
|
|
208
|
+
>
|
|
209
|
+
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
210
|
+
{title && <title>{title}</title>}
|
|
211
|
+
<path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z" />
|
|
212
|
+
</svg>
|
|
213
|
+
);
|
|
214
|
+
|
|
215
|
+
case "ui-pencil":
|
|
216
|
+
return (
|
|
217
|
+
<svg
|
|
218
|
+
className={["icon", `icon--${name}`, className]
|
|
219
|
+
.filter((className) => !isEmpty(className))
|
|
220
|
+
.join(" ")}
|
|
221
|
+
width={width}
|
|
222
|
+
height={height}
|
|
223
|
+
viewBox="0 0 512 512"
|
|
224
|
+
>
|
|
225
|
+
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
226
|
+
{title && <title>{title}</title>}
|
|
227
|
+
<path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z" />
|
|
228
|
+
</svg>
|
|
229
|
+
);
|
|
230
|
+
|
|
231
|
+
case "ui-check":
|
|
232
|
+
return (
|
|
233
|
+
<svg
|
|
234
|
+
className={["icon", `icon--${name}`, className]
|
|
235
|
+
.filter((className) => !isEmpty(className))
|
|
236
|
+
.join(" ")}
|
|
237
|
+
width={width}
|
|
238
|
+
height={height}
|
|
239
|
+
viewBox="0 0 448 512"
|
|
240
|
+
>
|
|
241
|
+
<HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
|
|
242
|
+
{title && <title>{title}</title>}
|
|
243
|
+
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
|
|
244
|
+
</svg>
|
|
245
|
+
);
|
|
246
|
+
default:
|
|
247
|
+
return null;
|
|
248
|
+
}
|
|
249
|
+
};
|
|
250
|
+
|
|
251
|
+
export default Icon;
|