gwan-design-system 0.1.6 → 0.1.8
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/README.md +55 -17
- package/dist/index.d.mts +28 -1
- package/dist/index.d.ts +28 -1
- package/dist/index.js +412 -290
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +397 -275
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -4
package/dist/index.js
CHANGED
|
@@ -80,7 +80,8 @@ var Tooltip = ({
|
|
|
80
80
|
label,
|
|
81
81
|
isVisible = false,
|
|
82
82
|
toolTipWidth = "w-60",
|
|
83
|
-
toolTipClass = ""
|
|
83
|
+
toolTipClass = "",
|
|
84
|
+
className = ""
|
|
84
85
|
}) => {
|
|
85
86
|
const getTooltipPosition = (position2) => {
|
|
86
87
|
switch (position2) {
|
|
@@ -113,16 +114,16 @@ var Tooltip = ({
|
|
|
113
114
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
114
115
|
"div",
|
|
115
116
|
{
|
|
116
|
-
className: `bg-
|
|
117
|
+
className: `bg-neutral-800 text-white text-sm py-1 px-2 rounded-lg absolute z-50
|
|
117
118
|
${isVisible ? "block" : "hidden"} ${getTooltipPosition(
|
|
118
119
|
position
|
|
119
|
-
)} ${toolTipWidth} ${toolTipClass}`,
|
|
120
|
+
)} ${toolTipWidth} ${toolTipClass} ${className}`,
|
|
120
121
|
children: [
|
|
121
122
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: label }),
|
|
122
123
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
123
124
|
"div",
|
|
124
125
|
{
|
|
125
|
-
className: `absolute w-2 h-2 bg-
|
|
126
|
+
className: `absolute w-2 h-2 bg-neutral-800 rotate-45 ${tipPosition(
|
|
126
127
|
position
|
|
127
128
|
)}`
|
|
128
129
|
}
|
|
@@ -148,7 +149,13 @@ var generatePastelColor = () => {
|
|
|
148
149
|
const lightness = 75 + Math.random() * 10;
|
|
149
150
|
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
|
|
150
151
|
};
|
|
151
|
-
var Avatar = ({
|
|
152
|
+
var Avatar = ({
|
|
153
|
+
name,
|
|
154
|
+
email,
|
|
155
|
+
image,
|
|
156
|
+
variant,
|
|
157
|
+
className = ""
|
|
158
|
+
}) => {
|
|
152
159
|
const [bgColor, setBgColor] = (0, import_react.useState)("transparent");
|
|
153
160
|
const [isTooltipInitialVisible, setIsTooltipInitialVisible] = (0, import_react.useState)(false);
|
|
154
161
|
const [isTooltipImageVisible, setIsTooltipImageVisible] = (0, import_react.useState)(false);
|
|
@@ -166,7 +173,7 @@ var Avatar = ({ name, email, image, variant }) => {
|
|
|
166
173
|
position: "right" /* RIGHT */,
|
|
167
174
|
label: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col", children: [
|
|
168
175
|
name2,
|
|
169
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-
|
|
176
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-neutral-300 text-xs", children: email2 })
|
|
170
177
|
] }),
|
|
171
178
|
isVisible,
|
|
172
179
|
toolTipWidth: "w-36"
|
|
@@ -185,7 +192,7 @@ var Avatar = ({ name, email, image, variant }) => {
|
|
|
185
192
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
186
193
|
import_image.default,
|
|
187
194
|
{
|
|
188
|
-
className: "rounded-full border border-
|
|
195
|
+
className: "rounded-full border border-neutral-400",
|
|
189
196
|
src: image,
|
|
190
197
|
alt: "profile",
|
|
191
198
|
width: 60,
|
|
@@ -211,11 +218,11 @@ var Avatar = ({ name, email, image, variant }) => {
|
|
|
211
218
|
}
|
|
212
219
|
);
|
|
213
220
|
};
|
|
214
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className:
|
|
221
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `flex flex-row items-center gap-2 ${className}`, children: [
|
|
215
222
|
renderAvatarImage(),
|
|
216
223
|
(variant === "image_with_full" /* IMAGE_WITH_FULL */ || variant === "initials_with_full" /* INITIALS_WITH_FULL */) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col", children: [
|
|
217
224
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-base font-semibold", children: name }),
|
|
218
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-
|
|
225
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-neutral-700", children: email })
|
|
219
226
|
] })
|
|
220
227
|
] });
|
|
221
228
|
};
|
|
@@ -230,7 +237,8 @@ var Banner = ({
|
|
|
230
237
|
backgroundImage = "",
|
|
231
238
|
backgroundColor = "",
|
|
232
239
|
titleClassName = "",
|
|
233
|
-
subTitleClassName = ""
|
|
240
|
+
subTitleClassName = "",
|
|
241
|
+
className = ""
|
|
234
242
|
}) => {
|
|
235
243
|
const handleContentPlacement = () => {
|
|
236
244
|
if (contentPlacement === "left") {
|
|
@@ -253,7 +261,7 @@ var Banner = ({
|
|
|
253
261
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
254
262
|
"div",
|
|
255
263
|
{
|
|
256
|
-
className: `w-full h-[484px] grid grid-cols-2 items-center px-16 ${backgroundColor} bg-no-repeat bg-cover bg-center`,
|
|
264
|
+
className: `w-full h-[484px] grid grid-cols-2 items-center px-16 ${backgroundColor} bg-no-repeat bg-cover bg-center ${className}`,
|
|
257
265
|
style: backgroundImage !== "" ? { backgroundImage: `url(${backgroundImage})` } : {},
|
|
258
266
|
children: handleContentPlacement()
|
|
259
267
|
}
|
|
@@ -275,22 +283,23 @@ var Button = ({
|
|
|
275
283
|
onClick,
|
|
276
284
|
icon,
|
|
277
285
|
type = "button",
|
|
278
|
-
disabled = false
|
|
286
|
+
disabled = false,
|
|
287
|
+
className = ""
|
|
279
288
|
}) => {
|
|
280
289
|
const getButtonVariant = (variant2) => {
|
|
281
290
|
switch (variant2) {
|
|
282
291
|
case "primary" /* PRIMARY */:
|
|
283
|
-
return disabled ? "bg-
|
|
292
|
+
return disabled ? "bg-neutral-300 text-neutral-800 cursor-not-allowed" : "bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700";
|
|
284
293
|
case "secondary" /* SECONDARY */:
|
|
285
|
-
return disabled ? "bg-
|
|
294
|
+
return disabled ? "bg-neutral-100 text-neutral-800 cursor-not-allowed" : "bg-neutral-50 text-primary-700 hover:bg-primary-50 active:bg-primary-100";
|
|
286
295
|
case "tertiary" /* TERTIARY */:
|
|
287
|
-
return disabled ? "text-
|
|
296
|
+
return disabled ? "text-neutral-300 border border-neutral-300 cursor-not-allowed" : "bg-transparent text-primary-500 border border-primary-500 hover:bg-neutral-50 active:bg-neutral-100";
|
|
288
297
|
}
|
|
289
298
|
};
|
|
290
299
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
291
300
|
"button",
|
|
292
301
|
{
|
|
293
|
-
className: `${getButtonVariant(variant)} px-4 ${label ? "py-2" : "py-4"} rounded-lg`,
|
|
302
|
+
className: `${getButtonVariant(variant)} px-4 ${label ? "py-2" : "py-4"} rounded-lg ${className}`,
|
|
294
303
|
type,
|
|
295
304
|
onClick,
|
|
296
305
|
disabled,
|
|
@@ -306,7 +315,11 @@ var button_default = Button;
|
|
|
306
315
|
// src/components/carousel/index.tsx
|
|
307
316
|
var import_react2 = require("react");
|
|
308
317
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
309
|
-
var Carousel = ({
|
|
318
|
+
var Carousel = ({
|
|
319
|
+
slides,
|
|
320
|
+
interval = 3e3,
|
|
321
|
+
className = ""
|
|
322
|
+
}) => {
|
|
310
323
|
const [currentIndex, setCurrentIndex] = (0, import_react2.useState)(0);
|
|
311
324
|
(0, import_react2.useEffect)(() => {
|
|
312
325
|
const timer = setInterval(() => {
|
|
@@ -314,7 +327,7 @@ var Carousel = ({ slides, interval = 3e3 }) => {
|
|
|
314
327
|
}, interval);
|
|
315
328
|
return () => clearInterval(timer);
|
|
316
329
|
}, [slides.length, interval]);
|
|
317
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className:
|
|
330
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `relative w-full h-[484px] overflow-hidden ${className}`, children: slides.map(
|
|
318
331
|
({
|
|
319
332
|
title,
|
|
320
333
|
titleClassName,
|
|
@@ -355,10 +368,12 @@ var import_react3 = require("react");
|
|
|
355
368
|
var icons_exports = {};
|
|
356
369
|
__export(icons_exports, {
|
|
357
370
|
ArrowLeftSVG: () => ArrowLeft,
|
|
371
|
+
ArrowRightSVG: () => ArrowRight,
|
|
358
372
|
CheckSVG: () => Check,
|
|
359
373
|
ChevDownSVG: () => ChevDown,
|
|
360
374
|
ChevLeftSVG: () => ChevLeft,
|
|
361
375
|
ChevRightSVG: () => ChevRight,
|
|
376
|
+
ChevUpSVG: () => ChevUp,
|
|
362
377
|
CircleSVG: () => Circle,
|
|
363
378
|
ColorsSVG: () => Colors,
|
|
364
379
|
CoversSVG: () => Covers,
|
|
@@ -368,6 +383,7 @@ __export(icons_exports, {
|
|
|
368
383
|
OrderInfoSVG: () => OrderInfo,
|
|
369
384
|
OrdersSVG: () => Orders,
|
|
370
385
|
ProductsSVG: () => Products,
|
|
386
|
+
SignInSVG: () => SignIn,
|
|
371
387
|
SignOutSVG: () => SignOut,
|
|
372
388
|
TemplatesSVG: () => Templates,
|
|
373
389
|
UploadSVG: () => Upload
|
|
@@ -472,11 +488,25 @@ var Colors = () => {
|
|
|
472
488
|
] });
|
|
473
489
|
};
|
|
474
490
|
|
|
475
|
-
// src/components/icons/
|
|
491
|
+
// src/components/icons/signInSVG/index.tsx
|
|
476
492
|
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
493
|
+
var SignIn = () => {
|
|
494
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-4 -4 30 30", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
495
|
+
"path",
|
|
496
|
+
{
|
|
497
|
+
fillRule: "evenodd",
|
|
498
|
+
clipRule: "evenodd",
|
|
499
|
+
d: "m.5,11.5h17.412c-.074-.214-.191-.412-.357-.576l-4.154-4.107c-.196-.194-.198-.511-.004-.707.194-.197.511-.199.707-.004l4.154,4.107c.479.474.743,1.106.742,1.781,0,.001,0,.003,0,.004,0,0,0,.001,0,.002,0,.002-.001.004-.001.006-.004.669-.268,1.297-.745,1.766l-4.15,4.084c-.097.096-.224.144-.351.144-.129,0-.258-.05-.356-.149-.194-.196-.191-.514.006-.707l4.15-4.084c.162-.16.278-.352.354-.56H.5c-.276,0-.5-.224-.5-.5s.224-.5.5-.5ZM19.5,0H4.5C2.019,0,0,2.019,0,4.5v4c0,.276.224.5.5.5s.5-.224.5-.5v-4c0-1.93,1.57-3.5,3.5-3.5h15c1.93,0,3.5,1.57,3.5,3.5v15c0,1.93-1.57,3.5-3.5,3.5H4.5c-1.93,0-3.5-1.57-3.5-3.5v-4c0-.276-.224-.5-.5-.5s-.5.224-.5.5v4c0,2.481,2.019,4.5,4.5,4.5h15c2.481,0,4.5-2.019,4.5-4.5V4.5c0-2.481-2.019-4.5-4.5-4.5Z",
|
|
500
|
+
fill: "currentColor"
|
|
501
|
+
}
|
|
502
|
+
) });
|
|
503
|
+
};
|
|
504
|
+
|
|
505
|
+
// src/components/icons/signOutSVG/index.tsx
|
|
506
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
477
507
|
var SignOut = () => {
|
|
478
|
-
return /* @__PURE__ */ (0,
|
|
479
|
-
/* @__PURE__ */ (0,
|
|
508
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { viewBox: "-3 -3 35 35", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
509
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("g", { clipPath: "url(#clip0_897_111)", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
480
510
|
"path",
|
|
481
511
|
{
|
|
482
512
|
fillRule: "evenodd",
|
|
@@ -485,15 +515,15 @@ var SignOut = () => {
|
|
|
485
515
|
fill: "currentColor"
|
|
486
516
|
}
|
|
487
517
|
) }),
|
|
488
|
-
/* @__PURE__ */ (0,
|
|
518
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("clipPath", { id: "clip0_897_111", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("rect", { width: "30", height: "30", fill: "currentColor" }) }) })
|
|
489
519
|
] });
|
|
490
520
|
};
|
|
491
521
|
|
|
492
522
|
// src/components/icons/filterSVG/index.tsx
|
|
493
|
-
var
|
|
523
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
494
524
|
var Filter = () => {
|
|
495
|
-
return /* @__PURE__ */ (0,
|
|
496
|
-
/* @__PURE__ */ (0,
|
|
525
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { viewBox: "0 0 30 30", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
526
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { clipPath: "url(#clip0_918_510)", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
497
527
|
"path",
|
|
498
528
|
{
|
|
499
529
|
fillRule: "evenodd",
|
|
@@ -502,14 +532,14 @@ var Filter = () => {
|
|
|
502
532
|
fill: "currentColor"
|
|
503
533
|
}
|
|
504
534
|
) }),
|
|
505
|
-
/* @__PURE__ */ (0,
|
|
535
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("clipPath", { id: "clip0_918_510", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("rect", { width: "28", height: "28", rx: "8", fill: "currentColor" }) }) })
|
|
506
536
|
] });
|
|
507
537
|
};
|
|
508
538
|
|
|
509
539
|
// src/components/icons/chevDownSVG/index.tsx
|
|
510
|
-
var
|
|
540
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
511
541
|
var ChevDown = () => {
|
|
512
|
-
return /* @__PURE__ */ (0,
|
|
542
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { viewBox: "0 0 30 30", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
513
543
|
"path",
|
|
514
544
|
{
|
|
515
545
|
fillRule: "evenodd",
|
|
@@ -521,9 +551,9 @@ var ChevDown = () => {
|
|
|
521
551
|
};
|
|
522
552
|
|
|
523
553
|
// src/components/icons/crossSVG/index.tsx
|
|
524
|
-
var
|
|
554
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
525
555
|
var Cross = () => {
|
|
526
|
-
return /* @__PURE__ */ (0,
|
|
556
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-150 -150 800 800", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
527
557
|
"path",
|
|
528
558
|
{
|
|
529
559
|
fillRule: "evenodd",
|
|
@@ -535,10 +565,10 @@ var Cross = () => {
|
|
|
535
565
|
};
|
|
536
566
|
|
|
537
567
|
// src/components/icons/orderInfoSVG/index.tsx
|
|
538
|
-
var
|
|
568
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
539
569
|
var OrderInfo = () => {
|
|
540
|
-
return /* @__PURE__ */ (0,
|
|
541
|
-
/* @__PURE__ */ (0,
|
|
570
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { viewBox: "0 0 30 30", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
571
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { clipPath: "url(#clip0_907_32)", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
542
572
|
"path",
|
|
543
573
|
{
|
|
544
574
|
fillRule: "evenodd",
|
|
@@ -547,14 +577,14 @@ var OrderInfo = () => {
|
|
|
547
577
|
fill: "currentColor"
|
|
548
578
|
}
|
|
549
579
|
) }),
|
|
550
|
-
/* @__PURE__ */ (0,
|
|
580
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("clipPath", { id: "clip0_907_32", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { width: "30", height: "30", fill: "currentColor" }) }) })
|
|
551
581
|
] });
|
|
552
582
|
};
|
|
553
583
|
|
|
554
584
|
// src/components/icons/chevLeftSVG/index.tsx
|
|
555
|
-
var
|
|
585
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
556
586
|
var ChevLeft = () => {
|
|
557
|
-
return /* @__PURE__ */ (0,
|
|
587
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { viewBox: "0 0 30 30", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
558
588
|
"path",
|
|
559
589
|
{
|
|
560
590
|
fillRule: "evenodd",
|
|
@@ -566,9 +596,9 @@ var ChevLeft = () => {
|
|
|
566
596
|
};
|
|
567
597
|
|
|
568
598
|
// src/components/icons/chevRightSVG/index.tsx
|
|
569
|
-
var
|
|
599
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
570
600
|
var ChevRight = () => {
|
|
571
|
-
return /* @__PURE__ */ (0,
|
|
601
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { viewBox: "0 0 30 30", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
572
602
|
"path",
|
|
573
603
|
{
|
|
574
604
|
fillRule: "evenodd",
|
|
@@ -579,24 +609,47 @@ var ChevRight = () => {
|
|
|
579
609
|
) });
|
|
580
610
|
};
|
|
581
611
|
|
|
582
|
-
// src/components/icons/
|
|
583
|
-
var
|
|
584
|
-
var
|
|
585
|
-
return /* @__PURE__ */ (0,
|
|
612
|
+
// src/components/icons/chevUpSVG/index.tsx
|
|
613
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
614
|
+
var ChevUp = () => {
|
|
615
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
586
616
|
"path",
|
|
587
617
|
{
|
|
588
618
|
fillRule: "evenodd",
|
|
589
|
-
d: "M4.293 12.293a1 1 0 011.414 0L10 16.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414z",
|
|
590
619
|
clipRule: "evenodd",
|
|
620
|
+
d: "m17.635,14.428l-5.281-5.281c-.189-.189-.518-.189-.707,0l-5.281,5.281-.707-.707,5.281-5.281c.566-.566,1.555-.566,2.121,0l5.281,5.281-.707.707Z",
|
|
591
621
|
fill: "currentColor"
|
|
592
622
|
}
|
|
593
623
|
) });
|
|
594
624
|
};
|
|
595
625
|
|
|
626
|
+
// src/components/icons/checkSVG/index.tsx
|
|
627
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
628
|
+
var Check = () => {
|
|
629
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
630
|
+
"svg",
|
|
631
|
+
{
|
|
632
|
+
viewBox: "0 0 256 256",
|
|
633
|
+
stroke: "currentColor",
|
|
634
|
+
strokeWidth: "4",
|
|
635
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
636
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
637
|
+
"path",
|
|
638
|
+
{
|
|
639
|
+
fillRule: "evenodd",
|
|
640
|
+
clipRule: "evenodd",
|
|
641
|
+
d: "M103.99951,188.00012a3.98852,3.98852,0,0,1-2.82812-1.17139l-56-55.9956a3.99992,3.99992,0,0,1,5.65625-5.65723l53.17187,53.16748L213.17139,69.1759a3.99992,3.99992,0,0,1,5.65625,5.65723l-112,111.9956A3.98855,3.98855,0,0,1,103.99951,188.00012Z",
|
|
642
|
+
fill: "currentColor"
|
|
643
|
+
}
|
|
644
|
+
)
|
|
645
|
+
}
|
|
646
|
+
);
|
|
647
|
+
};
|
|
648
|
+
|
|
596
649
|
// src/components/icons/circleSVG/index.tsx
|
|
597
|
-
var
|
|
650
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
598
651
|
var Circle = () => {
|
|
599
|
-
return /* @__PURE__ */ (0,
|
|
652
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-3 -3 30 30", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
600
653
|
"path",
|
|
601
654
|
{
|
|
602
655
|
fillRule: "evenodd",
|
|
@@ -608,10 +661,10 @@ var Circle = () => {
|
|
|
608
661
|
};
|
|
609
662
|
|
|
610
663
|
// src/components/icons/uploadSVG/index.tsx
|
|
611
|
-
var
|
|
664
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
612
665
|
var Upload = () => {
|
|
613
|
-
return /* @__PURE__ */ (0,
|
|
614
|
-
/* @__PURE__ */ (0,
|
|
666
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("svg", { viewBox: "0 0 53 53", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
667
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("g", { clipPath: "url(#clip0_859_45)", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
615
668
|
"path",
|
|
616
669
|
{
|
|
617
670
|
fillRule: "evenodd",
|
|
@@ -620,14 +673,14 @@ var Upload = () => {
|
|
|
620
673
|
fill: "currentColor"
|
|
621
674
|
}
|
|
622
675
|
) }),
|
|
623
|
-
/* @__PURE__ */ (0,
|
|
676
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("clipPath", { id: "clip0_859_45", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("rect", { width: "53", height: "53", fill: "currentColor" }) }) })
|
|
624
677
|
] });
|
|
625
678
|
};
|
|
626
679
|
|
|
627
680
|
// src/components/icons/arrowLeftSVG/index.tsx
|
|
628
|
-
var
|
|
681
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
629
682
|
var ArrowLeft = () => {
|
|
630
|
-
return /* @__PURE__ */ (0,
|
|
683
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { viewBox: "0 0 30 30", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
631
684
|
"path",
|
|
632
685
|
{
|
|
633
686
|
fillRule: "evenodd",
|
|
@@ -638,12 +691,27 @@ var ArrowLeft = () => {
|
|
|
638
691
|
) });
|
|
639
692
|
};
|
|
640
693
|
|
|
694
|
+
// src/components/icons/arrowRightSVG/index.tsx
|
|
695
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
696
|
+
var ArrowRight = () => {
|
|
697
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
698
|
+
"path",
|
|
699
|
+
{
|
|
700
|
+
fillRule: "evenodd",
|
|
701
|
+
clipRule: "evenodd",
|
|
702
|
+
d: "m18.541,10.894l-4.717-4.717-.707.707,4.616,4.617H5v1h12.735l-4.618,4.617.707.707,4.717-4.716c.296-.296.459-.69.459-1.108s-.163-.812-.459-1.106Z",
|
|
703
|
+
fill: "currentColor"
|
|
704
|
+
}
|
|
705
|
+
) });
|
|
706
|
+
};
|
|
707
|
+
|
|
641
708
|
// src/components/checkbox/index.tsx
|
|
642
|
-
var
|
|
709
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
643
710
|
var Checkbox = ({
|
|
644
711
|
label,
|
|
645
712
|
checked = false,
|
|
646
|
-
onChange
|
|
713
|
+
onChange,
|
|
714
|
+
className = ""
|
|
647
715
|
}) => {
|
|
648
716
|
const [isChecked, setIsChecked] = (0, import_react3.useState)(checked);
|
|
649
717
|
const handleToggle = () => {
|
|
@@ -652,8 +720,8 @@ var Checkbox = ({
|
|
|
652
720
|
onChange(!isChecked);
|
|
653
721
|
}
|
|
654
722
|
};
|
|
655
|
-
return /* @__PURE__ */ (0,
|
|
656
|
-
/* @__PURE__ */ (0,
|
|
723
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: `flex items-center gap-2 cursor-pointer ${className}`, children: [
|
|
724
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
657
725
|
"input",
|
|
658
726
|
{
|
|
659
727
|
type: "checkbox",
|
|
@@ -662,55 +730,62 @@ var Checkbox = ({
|
|
|
662
730
|
className: "hidden"
|
|
663
731
|
}
|
|
664
732
|
),
|
|
665
|
-
/* @__PURE__ */ (0,
|
|
733
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
666
734
|
"div",
|
|
667
735
|
{
|
|
668
736
|
className: `w-5 h-5 flex items-center justify-center border-2 rounded-md transition-all
|
|
669
|
-
${isChecked ? "bg-primary-
|
|
737
|
+
${isChecked ? "bg-primary-300 border-primary-400" : "bg-white border-neutral-500"}
|
|
670
738
|
`,
|
|
671
|
-
children: isChecked && /* @__PURE__ */ (0,
|
|
739
|
+
children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "size-4 text-black", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Check, {}) })
|
|
672
740
|
}
|
|
673
741
|
),
|
|
674
|
-
label && /* @__PURE__ */ (0,
|
|
742
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-black", children: label })
|
|
675
743
|
] });
|
|
676
744
|
};
|
|
677
745
|
var checkbox_default = Checkbox;
|
|
678
746
|
|
|
679
747
|
// src/components/chip/index.tsx
|
|
680
|
-
var
|
|
681
|
-
var Chip = ({ label, onClear }) => {
|
|
682
|
-
return /* @__PURE__ */ (0,
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
{
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
748
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
749
|
+
var Chip = ({ label, onClear, className = "" }) => {
|
|
750
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
751
|
+
"div",
|
|
752
|
+
{
|
|
753
|
+
className: `flex flex-row gap-2 items-center bg-neutral-700 w-fit px-4 py-2 rounded-full ${className}`,
|
|
754
|
+
children: [
|
|
755
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
756
|
+
"div",
|
|
757
|
+
{
|
|
758
|
+
className: "size-3 cursor-pointer text-neutral-200 hover:text-white",
|
|
759
|
+
onClick: onClear,
|
|
760
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Cross, {})
|
|
761
|
+
}
|
|
762
|
+
),
|
|
763
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-neutral-200 text-base font-semibold", children: label })
|
|
764
|
+
]
|
|
765
|
+
}
|
|
766
|
+
);
|
|
693
767
|
};
|
|
694
768
|
var chip_default = Chip;
|
|
695
769
|
|
|
696
770
|
// src/components/ellipsis/index.tsx
|
|
697
771
|
var import_react4 = require("react");
|
|
698
|
-
var
|
|
772
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
699
773
|
var Ellipsis = ({
|
|
700
774
|
label,
|
|
701
775
|
tooltipPosition = "right" /* RIGHT */,
|
|
702
|
-
tooltipWidth = "w-40"
|
|
776
|
+
tooltipWidth = "w-40",
|
|
777
|
+
className = ""
|
|
703
778
|
}) => {
|
|
704
779
|
const [isTooltipVisible, setIsTooltipVisible] = (0, import_react4.useState)(false);
|
|
705
|
-
return /* @__PURE__ */ (0,
|
|
780
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
706
781
|
"div",
|
|
707
782
|
{
|
|
708
|
-
className:
|
|
783
|
+
className: `relative ${className}`,
|
|
709
784
|
onMouseEnter: () => setIsTooltipVisible(true),
|
|
710
785
|
onMouseLeave: () => setIsTooltipVisible(false),
|
|
711
786
|
children: [
|
|
712
|
-
/* @__PURE__ */ (0,
|
|
713
|
-
/* @__PURE__ */ (0,
|
|
787
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-ellipsis w-32 overflow-hidden whitespace-nowrap", children: label }),
|
|
788
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
714
789
|
tooltip_default,
|
|
715
790
|
{
|
|
716
791
|
label,
|
|
@@ -727,13 +802,14 @@ var ellipsis_default = Ellipsis;
|
|
|
727
802
|
|
|
728
803
|
// src/components/fileUploader/index.tsx
|
|
729
804
|
var import_react5 = require("react");
|
|
730
|
-
var
|
|
805
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
731
806
|
var FileUploader = ({
|
|
732
807
|
title,
|
|
733
808
|
subTitle1 = "",
|
|
734
809
|
subTitle2 = "",
|
|
735
810
|
handleAttachment,
|
|
736
|
-
accept = ".jpg,.jpeg,.png"
|
|
811
|
+
accept = ".jpg,.jpeg,.png",
|
|
812
|
+
className = ""
|
|
737
813
|
}) => {
|
|
738
814
|
const fileInputRef = (0, import_react5.useRef)(null);
|
|
739
815
|
const handleFileUpload = (event) => {
|
|
@@ -742,63 +818,69 @@ var FileUploader = ({
|
|
|
742
818
|
handleAttachment(files[0]);
|
|
743
819
|
}
|
|
744
820
|
};
|
|
745
|
-
return /* @__PURE__ */ (0,
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
{
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
821
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
822
|
+
"div",
|
|
823
|
+
{
|
|
824
|
+
className: `flex flex-row gap-4 items-start border border-dashed border-neutral-200 p-4 rounded-lg ${className}`,
|
|
825
|
+
children: [
|
|
826
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
827
|
+
"div",
|
|
828
|
+
{
|
|
829
|
+
className: "bg-primary-500 hover:bg-primary-600 text-white px-6 py-8 rounded-lg cursor-pointer",
|
|
830
|
+
onClick: () => {
|
|
831
|
+
var _a;
|
|
832
|
+
return (_a = fileInputRef.current) == null ? void 0 : _a.click();
|
|
833
|
+
},
|
|
834
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "size-10", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Upload, {}) })
|
|
835
|
+
}
|
|
836
|
+
),
|
|
837
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
838
|
+
"input",
|
|
839
|
+
{
|
|
840
|
+
type: "file",
|
|
841
|
+
ref: fileInputRef,
|
|
842
|
+
accept,
|
|
843
|
+
className: "hidden",
|
|
844
|
+
onChange: handleFileUpload
|
|
845
|
+
}
|
|
846
|
+
),
|
|
847
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex-1 flex flex-col", children: [
|
|
848
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-lg", children: title }),
|
|
849
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-sm text-neutral-400", children: subTitle1 }),
|
|
850
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-sm text-neutral-400", children: subTitle2 })
|
|
851
|
+
] })
|
|
852
|
+
]
|
|
853
|
+
}
|
|
854
|
+
);
|
|
773
855
|
};
|
|
774
856
|
var fileUploader_default = FileUploader;
|
|
775
857
|
|
|
776
858
|
// src/components/filterDropdown/index.tsx
|
|
777
859
|
var import_react6 = require("react");
|
|
778
|
-
var
|
|
779
|
-
var FilterDropdown = ({ children }) => {
|
|
860
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
861
|
+
var FilterDropdown = ({ children, className = "" }) => {
|
|
780
862
|
const [isChildrenVisible, setIsChildrenVisible] = (0, import_react6.useState)(false);
|
|
781
863
|
const closeDropdown = () => setIsChildrenVisible(false);
|
|
782
|
-
return /* @__PURE__ */ (0,
|
|
783
|
-
/* @__PURE__ */ (0,
|
|
864
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: `relative ${className}`, children: [
|
|
865
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
784
866
|
"div",
|
|
785
867
|
{
|
|
786
|
-
className: "flex flex-row gap-4 items-center w-fit border border-
|
|
868
|
+
className: "flex flex-row gap-4 items-center w-fit border border-neutral-300 hover:border-neutral-400 group p-2 rounded-lg cursor-pointer",
|
|
787
869
|
onClick: () => setIsChildrenVisible(!isChildrenVisible),
|
|
788
870
|
children: [
|
|
789
|
-
/* @__PURE__ */ (0,
|
|
790
|
-
/* @__PURE__ */ (0,
|
|
791
|
-
/* @__PURE__ */ (0,
|
|
871
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "size-5 text-neutral-300 group-hover:text-neutral-400", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Filter, {}) }),
|
|
872
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-neutral-300 text-base group-hover:text-neutral-400", children: "Filter" }),
|
|
873
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "size-5 text-neutral-300 group-hover:text-neutral-400", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevDown, {}) })
|
|
792
874
|
]
|
|
793
875
|
}
|
|
794
876
|
),
|
|
795
|
-
isChildrenVisible && /* @__PURE__ */ (0,
|
|
877
|
+
isChildrenVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "border border-neutral-300 rounded-lg shadow-lg overflow-y-auto absolute top-full bg-white z-10", children: children(closeDropdown) })
|
|
796
878
|
] });
|
|
797
879
|
};
|
|
798
880
|
var filterDropdown_default = FilterDropdown;
|
|
799
881
|
|
|
800
882
|
// src/components/input/index.tsx
|
|
801
|
-
var
|
|
883
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
802
884
|
var Input = ({
|
|
803
885
|
label,
|
|
804
886
|
value,
|
|
@@ -806,11 +888,12 @@ var Input = ({
|
|
|
806
888
|
disabled,
|
|
807
889
|
placeholder,
|
|
808
890
|
inputClassName = "",
|
|
809
|
-
required = false
|
|
891
|
+
required = false,
|
|
892
|
+
className = ""
|
|
810
893
|
}) => {
|
|
811
|
-
return /* @__PURE__ */ (0,
|
|
812
|
-
/* @__PURE__ */ (0,
|
|
813
|
-
/* @__PURE__ */ (0,
|
|
894
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: `flex flex-col gap-1 relative ${className}`, children: [
|
|
895
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", { htmlFor: label, className: "text-sm text-neutral-600 mb-2", children: `${label}${required ? " *" : ""}` }),
|
|
896
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
814
897
|
"input",
|
|
815
898
|
{
|
|
816
899
|
id: label,
|
|
@@ -818,7 +901,7 @@ var Input = ({
|
|
|
818
901
|
value,
|
|
819
902
|
onChange: (e) => onChange(e.target.value),
|
|
820
903
|
disabled,
|
|
821
|
-
className: `border border-
|
|
904
|
+
className: `border border-neutral-300 outline-none p-4 rounded-lg ${disabled ? "cursor-not-allowed" : "cursor-text"} text-sm w-full ${inputClassName}`,
|
|
822
905
|
required
|
|
823
906
|
}
|
|
824
907
|
)
|
|
@@ -828,7 +911,7 @@ var input_default = Input;
|
|
|
828
911
|
|
|
829
912
|
// src/components/modal/index.tsx
|
|
830
913
|
var import_react7 = require("react");
|
|
831
|
-
var
|
|
914
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
832
915
|
var MODAL_SIZE = /* @__PURE__ */ ((MODAL_SIZE2) => {
|
|
833
916
|
MODAL_SIZE2["SMALL"] = "w-[600px] h-60";
|
|
834
917
|
MODAL_SIZE2["MEDIUM"] = "w-[800px] h-96";
|
|
@@ -840,29 +923,36 @@ var Modal = ({
|
|
|
840
923
|
title,
|
|
841
924
|
children,
|
|
842
925
|
onClear,
|
|
843
|
-
size = "w-[800px] h-96" /* MEDIUM
|
|
926
|
+
size = "w-[800px] h-96" /* MEDIUM */,
|
|
927
|
+
className = ""
|
|
844
928
|
}) => {
|
|
845
929
|
const modalRef = (0, import_react7.useRef)(null);
|
|
846
930
|
(0, import_react7.useEffect)(() => {
|
|
847
931
|
var _a;
|
|
848
932
|
(_a = modalRef.current) == null ? void 0 : _a.focus();
|
|
849
933
|
}, []);
|
|
850
|
-
return /* @__PURE__ */ (0,
|
|
934
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
851
935
|
"div",
|
|
852
936
|
{
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
/*
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
937
|
+
className: `fixed inset-0 flex items-center justify-center bg-[rgba(0,0,0,0.3)] ${className}`,
|
|
938
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
939
|
+
"div",
|
|
940
|
+
{
|
|
941
|
+
ref: modalRef,
|
|
942
|
+
tabIndex: -1,
|
|
943
|
+
className: `bg-white p-4 ${size !== "w-full h-full" /* FULL */ && "rounded-lg"} absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col gap-4 ${size}`,
|
|
944
|
+
onBlur: () => onClear(),
|
|
945
|
+
children: [
|
|
946
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-row gap-4 items-center", children: [
|
|
947
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-1 text-3xl", children: title }),
|
|
948
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "size-4 cursor-pointer", onClick: () => onClear(), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Cross, {}) })
|
|
949
|
+
] }),
|
|
950
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-1 flex justify-center items-center", children })
|
|
951
|
+
]
|
|
952
|
+
}
|
|
953
|
+
)
|
|
864
954
|
}
|
|
865
|
-
)
|
|
955
|
+
);
|
|
866
956
|
};
|
|
867
957
|
var modal_default = Modal;
|
|
868
958
|
|
|
@@ -870,7 +960,7 @@ var modal_default = Modal;
|
|
|
870
960
|
var import_image2 = __toESM(require("next/image"));
|
|
871
961
|
var import_react8 = require("react");
|
|
872
962
|
var import_navigation = require("next/navigation");
|
|
873
|
-
var
|
|
963
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
874
964
|
var NavBar = ({
|
|
875
965
|
menuItems,
|
|
876
966
|
logoShort,
|
|
@@ -882,7 +972,8 @@ var NavBar = ({
|
|
|
882
972
|
menuWidthClass = "w-[20rem]",
|
|
883
973
|
menuHeightClass = "h-[100vh]",
|
|
884
974
|
isCollapsed = false,
|
|
885
|
-
menuBackgroundColor = "bg-primary-100"
|
|
975
|
+
menuBackgroundColor = "bg-primary-100",
|
|
976
|
+
className = ""
|
|
886
977
|
}) => {
|
|
887
978
|
const router = (0, import_navigation.useRouter)();
|
|
888
979
|
const [isActiveMenuItem, setIsActiveMenuItem] = (0, import_react8.useState)("");
|
|
@@ -911,19 +1002,19 @@ var NavBar = ({
|
|
|
911
1002
|
setIsActiveMenuItem(menu.title);
|
|
912
1003
|
router.push(menu.route);
|
|
913
1004
|
};
|
|
914
|
-
return /* @__PURE__ */ (0,
|
|
1005
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
915
1006
|
"div",
|
|
916
1007
|
{
|
|
917
|
-
className: `transition-[width] duration-300 ease-in-out ${isMenuCollapsed ? collapsedClass : menuWidthClass} ${menuHeightClass}`,
|
|
918
|
-
children: /* @__PURE__ */ (0,
|
|
1008
|
+
className: `transition-[width] duration-300 ease-in-out ${isMenuCollapsed ? collapsedClass : menuWidthClass} ${menuHeightClass} ${className}`,
|
|
1009
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
919
1010
|
"div",
|
|
920
1011
|
{
|
|
921
1012
|
className: `w-full h-full flex flex-col gap-4 p-4 ${menuBackgroundColor}`,
|
|
922
1013
|
children: [
|
|
923
|
-
/* @__PURE__ */ (0,
|
|
924
|
-
/* @__PURE__ */ (0,
|
|
925
|
-
/* @__PURE__ */ (0,
|
|
926
|
-
!isMenuItemsCollapsed && /* @__PURE__ */ (0,
|
|
1014
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-4", children: [
|
|
1015
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-row gap-2 items-center", children: [
|
|
1016
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_image2.default, { src: logoShort, alt: "logo_short", width: 60, height: 60 }),
|
|
1017
|
+
!isMenuItemsCollapsed && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
927
1018
|
import_image2.default,
|
|
928
1019
|
{
|
|
929
1020
|
src: logoLong,
|
|
@@ -934,8 +1025,8 @@ var NavBar = ({
|
|
|
934
1025
|
}
|
|
935
1026
|
)
|
|
936
1027
|
] }),
|
|
937
|
-
/* @__PURE__ */ (0,
|
|
938
|
-
/* @__PURE__ */ (0,
|
|
1028
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative", children: [
|
|
1029
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
939
1030
|
avatar_default,
|
|
940
1031
|
{
|
|
941
1032
|
name: avatarName,
|
|
@@ -944,20 +1035,20 @@ var NavBar = ({
|
|
|
944
1035
|
image: avatarImage
|
|
945
1036
|
}
|
|
946
1037
|
),
|
|
947
|
-
/* @__PURE__ */ (0,
|
|
1038
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
948
1039
|
"span",
|
|
949
1040
|
{
|
|
950
1041
|
onClick: () => setIsMenuCollapsed(!isMenuCollapsed),
|
|
951
1042
|
className: `cursor-pointer w-8 h-8 rounded-full ${menuBackgroundColor} border border-neutral-300 absolute -right-8 flex items-center justify-center text-black`,
|
|
952
|
-
children: /* @__PURE__ */ (0,
|
|
1043
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "size-5", children: isMenuCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChevRight, {}) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChevLeft, {}) })
|
|
953
1044
|
}
|
|
954
1045
|
)
|
|
955
1046
|
] })
|
|
956
1047
|
] }),
|
|
957
|
-
/* @__PURE__ */ (0,
|
|
958
|
-
/* @__PURE__ */ (0,
|
|
1048
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-neutral-300 border-b" }),
|
|
1049
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col gap-1", children: menuItems.map((item, index) => {
|
|
959
1050
|
if (!item.isDivider) {
|
|
960
|
-
return /* @__PURE__ */ (0,
|
|
1051
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
961
1052
|
"div",
|
|
962
1053
|
{
|
|
963
1054
|
className: `flex flex-row gap-4 items-center p-4 rounded-lg hover:cursor-pointer hover:bg-white hover:bg-opacity-35 hover:rounded-lg ${isActiveMenuItem === item.title ? activeClass : ""}`,
|
|
@@ -965,9 +1056,9 @@ var NavBar = ({
|
|
|
965
1056
|
onMouseEnter: () => setShowTooltip(index),
|
|
966
1057
|
onMouseLeave: () => setShowTooltip(null),
|
|
967
1058
|
children: [
|
|
968
|
-
/* @__PURE__ */ (0,
|
|
1059
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "w-6 h-6 ml-1 relative", children: [
|
|
969
1060
|
item.icon,
|
|
970
|
-
isMenuCollapsed && /* @__PURE__ */ (0,
|
|
1061
|
+
isMenuCollapsed && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
971
1062
|
tooltip_default,
|
|
972
1063
|
{
|
|
973
1064
|
position: "right" /* RIGHT */,
|
|
@@ -978,13 +1069,13 @@ var NavBar = ({
|
|
|
978
1069
|
}
|
|
979
1070
|
)
|
|
980
1071
|
] }),
|
|
981
|
-
!isMenuItemsCollapsed && /* @__PURE__ */ (0,
|
|
1072
|
+
!isMenuItemsCollapsed && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-nowrap", children: item.title })
|
|
982
1073
|
]
|
|
983
1074
|
},
|
|
984
1075
|
`menu_item_${index + 1}`
|
|
985
1076
|
);
|
|
986
1077
|
}
|
|
987
|
-
return /* @__PURE__ */ (0,
|
|
1078
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
988
1079
|
"div",
|
|
989
1080
|
{
|
|
990
1081
|
className: "border-neutral-300 border-b my-3"
|
|
@@ -1005,7 +1096,7 @@ var import_react10 = require("react");
|
|
|
1005
1096
|
|
|
1006
1097
|
// src/components/selectDropdown/index.tsx
|
|
1007
1098
|
var import_react9 = require("react");
|
|
1008
|
-
var
|
|
1099
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1009
1100
|
var SelectDropdown = ({
|
|
1010
1101
|
options,
|
|
1011
1102
|
label,
|
|
@@ -1013,7 +1104,8 @@ var SelectDropdown = ({
|
|
|
1013
1104
|
disabled = false,
|
|
1014
1105
|
value,
|
|
1015
1106
|
onChange,
|
|
1016
|
-
inputClassName = ""
|
|
1107
|
+
inputClassName = "",
|
|
1108
|
+
className = ""
|
|
1017
1109
|
}) => {
|
|
1018
1110
|
const [dropdownValue, setDropdownValue] = (0, import_react9.useState)("");
|
|
1019
1111
|
const [isOptionsVisible, setIsOptionsVisible] = (0, import_react9.useState)(false);
|
|
@@ -1031,16 +1123,16 @@ var SelectDropdown = ({
|
|
|
1031
1123
|
onChange(val);
|
|
1032
1124
|
setIsOptionsVisible(false);
|
|
1033
1125
|
};
|
|
1034
|
-
return /* @__PURE__ */ (0,
|
|
1035
|
-
label && /* @__PURE__ */ (0,
|
|
1036
|
-
/* @__PURE__ */ (0,
|
|
1037
|
-
/* @__PURE__ */ (0,
|
|
1038
|
-
/* @__PURE__ */ (0,
|
|
1126
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: `flex flex-col gap-1 relative ${className}`, children: [
|
|
1127
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { htmlFor: label, className: "text-sm text-neutral-600 mb-2", children: label }),
|
|
1128
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative", children: [
|
|
1129
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "size-5 absolute inset-y-4 right-4 flex items-center text-neutral-600 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevDown, {}) }),
|
|
1130
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
1039
1131
|
"input",
|
|
1040
1132
|
{
|
|
1041
1133
|
id: label,
|
|
1042
1134
|
type: "text",
|
|
1043
|
-
className: `border border-
|
|
1135
|
+
className: `border border-neutral-300 outline-none p-4 rounded-lg ${disabled ? "cursor-not-allowed" : "cursor-pointer"} text-sm w-full ${inputClassName}`,
|
|
1044
1136
|
placeholder,
|
|
1045
1137
|
onClick: () => setIsOptionsVisible(!isOptionsVisible),
|
|
1046
1138
|
value: dropdownValue,
|
|
@@ -1050,10 +1142,10 @@ var SelectDropdown = ({
|
|
|
1050
1142
|
}
|
|
1051
1143
|
)
|
|
1052
1144
|
] }),
|
|
1053
|
-
isOptionsVisible && /* @__PURE__ */ (0,
|
|
1145
|
+
isOptionsVisible && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "border border-neutral-300 rounded-lg shadow-lg max-h-96 overflow-y-auto absolute min-w-full top-full bg-white z-10", children: options.map(({ label: label2, value: val }, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
1054
1146
|
"div",
|
|
1055
1147
|
{
|
|
1056
|
-
className: "p-4 cursor-pointer hover:bg-
|
|
1148
|
+
className: "p-4 cursor-pointer hover:bg-neutral-50 text-sm",
|
|
1057
1149
|
onMouseDown: () => handleMouseDown(label2),
|
|
1058
1150
|
children: label2
|
|
1059
1151
|
},
|
|
@@ -1064,13 +1156,14 @@ var SelectDropdown = ({
|
|
|
1064
1156
|
var selectDropdown_default = SelectDropdown;
|
|
1065
1157
|
|
|
1066
1158
|
// src/components/pagination/index.tsx
|
|
1067
|
-
var
|
|
1159
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1068
1160
|
var Pagination = ({
|
|
1069
1161
|
total,
|
|
1070
1162
|
page,
|
|
1071
1163
|
size,
|
|
1072
1164
|
options,
|
|
1073
|
-
onChange
|
|
1165
|
+
onChange,
|
|
1166
|
+
className = ""
|
|
1074
1167
|
}) => {
|
|
1075
1168
|
const [optionDropdown, setOptionDropdown] = (0, import_react10.useState)(size.toString());
|
|
1076
1169
|
const onLeft = () => {
|
|
@@ -1087,68 +1180,75 @@ var Pagination = ({
|
|
|
1087
1180
|
setOptionDropdown(size2);
|
|
1088
1181
|
onChange({ total, page: 1, size: parseInt(size2) });
|
|
1089
1182
|
};
|
|
1090
|
-
return /* @__PURE__ */ (0,
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
{
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
1184
|
+
"div",
|
|
1185
|
+
{
|
|
1186
|
+
className: `bg-neutral-50 flex flex-row gap-4 items-center px-4 py-2 rounded-lg ${className}`,
|
|
1187
|
+
children: [
|
|
1188
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex-1", children: [
|
|
1189
|
+
page,
|
|
1190
|
+
" of ",
|
|
1191
|
+
Math.ceil(total / size),
|
|
1192
|
+
" pages"
|
|
1193
|
+
] }),
|
|
1194
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "w-20", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1195
|
+
selectDropdown_default,
|
|
1196
|
+
{
|
|
1197
|
+
options,
|
|
1198
|
+
value: optionDropdown,
|
|
1199
|
+
onChange: (option) => handlePageSize(option)
|
|
1200
|
+
}
|
|
1201
|
+
) }),
|
|
1202
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: "items per page" }),
|
|
1203
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-row gap-4 items-center", children: [
|
|
1204
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1205
|
+
button_default,
|
|
1206
|
+
{
|
|
1207
|
+
onClick: onLeft,
|
|
1208
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevLeft, {}),
|
|
1209
|
+
variant: "tertiary" /* TERTIARY */,
|
|
1210
|
+
disabled: page === 1
|
|
1211
|
+
}
|
|
1212
|
+
),
|
|
1213
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1214
|
+
button_default,
|
|
1215
|
+
{
|
|
1216
|
+
onClick: onRight,
|
|
1217
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevRight, {}),
|
|
1218
|
+
variant: "tertiary" /* TERTIARY */,
|
|
1219
|
+
disabled: page === Math.ceil(total / size)
|
|
1220
|
+
}
|
|
1221
|
+
)
|
|
1222
|
+
] })
|
|
1223
|
+
]
|
|
1224
|
+
}
|
|
1225
|
+
);
|
|
1127
1226
|
};
|
|
1128
1227
|
var pagination_default = Pagination;
|
|
1129
1228
|
|
|
1130
1229
|
// src/components/radioButton/index.tsx
|
|
1131
|
-
var
|
|
1230
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1132
1231
|
var RadioButton = ({
|
|
1133
1232
|
label,
|
|
1134
1233
|
value,
|
|
1135
1234
|
selectedValue,
|
|
1136
|
-
onChange
|
|
1235
|
+
onChange,
|
|
1236
|
+
className = ""
|
|
1137
1237
|
}) => {
|
|
1138
1238
|
const isChecked = selectedValue === value;
|
|
1139
|
-
return /* @__PURE__ */ (0,
|
|
1140
|
-
/* @__PURE__ */ (0,
|
|
1239
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: `flex items-center gap-2 cursor-pointer ${className}`, children: [
|
|
1240
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1141
1241
|
"div",
|
|
1142
1242
|
{
|
|
1143
1243
|
className: `w-5 h-5 flex items-center justify-center border-2 rounded-full transition-all
|
|
1144
1244
|
${isChecked ? "border-primary-500 bg-primary-500" : "border-gray-400 bg-white"}
|
|
1145
1245
|
`,
|
|
1146
1246
|
onClick: () => onChange && onChange(value),
|
|
1147
|
-
children: isChecked && /* @__PURE__ */ (0,
|
|
1247
|
+
children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "w-2.5 h-2.5 bg-white rounded-full" })
|
|
1148
1248
|
}
|
|
1149
1249
|
),
|
|
1150
|
-
/* @__PURE__ */ (0,
|
|
1151
|
-
/* @__PURE__ */ (0,
|
|
1250
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-gray-700", children: label }),
|
|
1251
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1152
1252
|
"input",
|
|
1153
1253
|
{
|
|
1154
1254
|
type: "radio",
|
|
@@ -1163,7 +1263,7 @@ var RadioButton = ({
|
|
|
1163
1263
|
var radioButton_default = RadioButton;
|
|
1164
1264
|
|
|
1165
1265
|
// src/components/snackBar/index.tsx
|
|
1166
|
-
var
|
|
1266
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
1167
1267
|
var SNACK_BAR_TYPE = /* @__PURE__ */ ((SNACK_BAR_TYPE2) => {
|
|
1168
1268
|
SNACK_BAR_TYPE2["DEFAULT"] = "default";
|
|
1169
1269
|
SNACK_BAR_TYPE2["SUCCESS"] = "success";
|
|
@@ -1175,30 +1275,31 @@ var SNACK_BAR_TYPE = /* @__PURE__ */ ((SNACK_BAR_TYPE2) => {
|
|
|
1175
1275
|
var Snackbar = ({
|
|
1176
1276
|
type = "default" /* DEFAULT */,
|
|
1177
1277
|
message,
|
|
1178
|
-
icon
|
|
1278
|
+
icon,
|
|
1279
|
+
className = ""
|
|
1179
1280
|
}) => {
|
|
1180
1281
|
const getClassName = () => {
|
|
1181
1282
|
switch (type) {
|
|
1182
1283
|
case "success" /* SUCCESS */:
|
|
1183
|
-
return "bg-
|
|
1284
|
+
return "bg-green-50 text-green-800 border-green-500";
|
|
1184
1285
|
case "danger" /* DANGER */:
|
|
1185
|
-
return "bg-
|
|
1286
|
+
return "bg-red-50 text-red-600 border-red-500";
|
|
1186
1287
|
case "warning" /* WARNING */:
|
|
1187
|
-
return "bg-
|
|
1288
|
+
return "bg-yellow-50 text-yellow-800 border-yellow-600";
|
|
1188
1289
|
case "info" /* INFO */:
|
|
1189
|
-
return "bg-
|
|
1290
|
+
return "bg-blue-50 text-blue-800 border-blue-600";
|
|
1190
1291
|
case "default" /* DEFAULT */:
|
|
1191
1292
|
default:
|
|
1192
|
-
return "bg-
|
|
1293
|
+
return "bg-neutral-50 text-neutral-800 border-neutral-500";
|
|
1193
1294
|
}
|
|
1194
1295
|
};
|
|
1195
|
-
return /* @__PURE__ */ (0,
|
|
1296
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
1196
1297
|
"div",
|
|
1197
1298
|
{
|
|
1198
|
-
className: `${getClassName()} p-4 rounded-lg flex flex-row gap-4 items-center font-normal border`,
|
|
1299
|
+
className: `${getClassName()} p-4 rounded-lg flex flex-row gap-4 items-center font-normal border ${className}`,
|
|
1199
1300
|
children: [
|
|
1200
|
-
icon && /* @__PURE__ */ (0,
|
|
1201
|
-
/* @__PURE__ */ (0,
|
|
1301
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "size-5", children: icon }),
|
|
1302
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: message })
|
|
1202
1303
|
]
|
|
1203
1304
|
}
|
|
1204
1305
|
);
|
|
@@ -1207,7 +1308,7 @@ var snackBar_default = Snackbar;
|
|
|
1207
1308
|
|
|
1208
1309
|
// src/components/state/index.tsx
|
|
1209
1310
|
var import_image3 = __toESM(require("next/image"));
|
|
1210
|
-
var
|
|
1311
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
1211
1312
|
var STATE_TYPE = /* @__PURE__ */ ((STATE_TYPE2) => {
|
|
1212
1313
|
STATE_TYPE2["EMPTY"] = "EMPTY";
|
|
1213
1314
|
STATE_TYPE2["SUCCESS"] = "SUCCESS";
|
|
@@ -1221,7 +1322,8 @@ var State = ({
|
|
|
1221
1322
|
title,
|
|
1222
1323
|
subTitle,
|
|
1223
1324
|
imageWidth = 526,
|
|
1224
|
-
imageHeight = 526
|
|
1325
|
+
imageHeight = 526,
|
|
1326
|
+
className = ""
|
|
1225
1327
|
}) => {
|
|
1226
1328
|
const typeImage = () => {
|
|
1227
1329
|
switch (type) {
|
|
@@ -1237,58 +1339,70 @@ var State = ({
|
|
|
1237
1339
|
return "/images/empty.png";
|
|
1238
1340
|
}
|
|
1239
1341
|
};
|
|
1240
|
-
return /* @__PURE__ */ (0,
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
{
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1342
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
1343
|
+
"div",
|
|
1344
|
+
{
|
|
1345
|
+
className: `w-full h-full flex flex-col gap-8 items-center justify-center ${className}`,
|
|
1346
|
+
children: [
|
|
1347
|
+
stateImage ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
1348
|
+
import_image3.default,
|
|
1349
|
+
{
|
|
1350
|
+
src: stateImage,
|
|
1351
|
+
alt: "state image",
|
|
1352
|
+
width: imageWidth,
|
|
1353
|
+
height: imageHeight
|
|
1354
|
+
}
|
|
1355
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
1356
|
+
import_image3.default,
|
|
1357
|
+
{
|
|
1358
|
+
src: typeImage(),
|
|
1359
|
+
alt: "state image",
|
|
1360
|
+
width: imageWidth,
|
|
1361
|
+
height: imageHeight
|
|
1362
|
+
}
|
|
1363
|
+
),
|
|
1364
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-2", children: [
|
|
1365
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-3xl text-center font-semibold", children: title }),
|
|
1366
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "w-[300px] text-center", children: subTitle })
|
|
1367
|
+
] })
|
|
1368
|
+
]
|
|
1369
|
+
}
|
|
1370
|
+
);
|
|
1263
1371
|
};
|
|
1264
1372
|
var state_default = State;
|
|
1265
1373
|
|
|
1266
1374
|
// src/components/table/index.tsx
|
|
1267
|
-
var
|
|
1268
|
-
var Table = ({ columns, data }) => {
|
|
1269
|
-
return /* @__PURE__ */ (0,
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
{
|
|
1273
|
-
|
|
1274
|
-
children: header
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1375
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
1376
|
+
var Table = ({ columns, data, className = "" }) => {
|
|
1377
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
1378
|
+
"div",
|
|
1379
|
+
{
|
|
1380
|
+
className: `overflow-hidden rounded-lg border border-neutral-300 ${className}`,
|
|
1381
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("table", { className: "w-full border-collapse", children: [
|
|
1382
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("tr", { className: "bg-neutral-300 border border-neutral-300", children: columns.map(({ header, headerClassName }, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
1383
|
+
"th",
|
|
1384
|
+
{
|
|
1385
|
+
className: `text-left px-4 py-4 ${headerClassName}`,
|
|
1386
|
+
children: header
|
|
1387
|
+
},
|
|
1388
|
+
`column_${index}`
|
|
1389
|
+
)) }) }),
|
|
1390
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
1391
|
+
"tr",
|
|
1392
|
+
{
|
|
1393
|
+
className: "bg-white hover:bg-neutral-100",
|
|
1394
|
+
children: columns.map(({ render }, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("td", { className: "text-left px-4 py-4", children: render(row) }, `cell_${cellIndex}`))
|
|
1395
|
+
},
|
|
1396
|
+
`row_${rowIndex}`
|
|
1397
|
+
)) })
|
|
1398
|
+
] })
|
|
1399
|
+
}
|
|
1400
|
+
);
|
|
1287
1401
|
};
|
|
1288
1402
|
var table_default = Table;
|
|
1289
1403
|
|
|
1290
1404
|
// src/components/tag/index.tsx
|
|
1291
|
-
var
|
|
1405
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
1292
1406
|
var TAG_TYPE = /* @__PURE__ */ ((TAG_TYPE2) => {
|
|
1293
1407
|
TAG_TYPE2["DEFAULT"] = "default";
|
|
1294
1408
|
TAG_TYPE2["SUCCESS"] = "success";
|
|
@@ -1297,29 +1411,37 @@ var TAG_TYPE = /* @__PURE__ */ ((TAG_TYPE2) => {
|
|
|
1297
1411
|
TAG_TYPE2["INFO"] = "info";
|
|
1298
1412
|
return TAG_TYPE2;
|
|
1299
1413
|
})(TAG_TYPE || {});
|
|
1300
|
-
var Tag = ({ type, label }) => {
|
|
1414
|
+
var Tag = ({ type, label, className = "" }) => {
|
|
1301
1415
|
const getTagStyle = (type2) => {
|
|
1302
1416
|
switch (type2) {
|
|
1303
1417
|
case "success" /* SUCCESS */:
|
|
1304
|
-
return "bg-
|
|
1418
|
+
return "bg-green-50 text-green-600";
|
|
1305
1419
|
case "danger" /* DANGER */:
|
|
1306
|
-
return "bg-
|
|
1420
|
+
return "bg-red-50 text-red-600";
|
|
1307
1421
|
case "warning" /* WARNING */:
|
|
1308
|
-
return "bg-
|
|
1422
|
+
return "bg-yellow-50 text-yellow-600";
|
|
1309
1423
|
case "info" /* INFO */:
|
|
1310
|
-
return "bg-
|
|
1424
|
+
return "bg-blue-50 text-blue-600";
|
|
1311
1425
|
default:
|
|
1312
|
-
return "bg-
|
|
1426
|
+
return "bg-neutral-50 text-neutral-600";
|
|
1313
1427
|
}
|
|
1314
1428
|
};
|
|
1315
|
-
return /* @__PURE__ */ (0,
|
|
1429
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
1430
|
+
"div",
|
|
1431
|
+
{
|
|
1432
|
+
className: `w-fit px-4 py-2 rounded-lg text-sm ${getTagStyle(
|
|
1433
|
+
type
|
|
1434
|
+
)} ${className}`,
|
|
1435
|
+
children: label
|
|
1436
|
+
}
|
|
1437
|
+
);
|
|
1316
1438
|
};
|
|
1317
1439
|
var tag_default = Tag;
|
|
1318
1440
|
|
|
1319
1441
|
// src/components/timeLine/index.tsx
|
|
1320
1442
|
var import_react11 = require("react");
|
|
1321
|
-
var
|
|
1322
|
-
var TimeLine = ({ logs }) => {
|
|
1443
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
1444
|
+
var TimeLine = ({ logs, className = "" }) => {
|
|
1323
1445
|
const [steps, setSteps] = (0, import_react11.useState)([]);
|
|
1324
1446
|
(0, import_react11.useEffect)(() => {
|
|
1325
1447
|
if (logs[0].title !== "Order cancelled" /* ORDER_CANCELLED */ && logs[0].title !== "Delivered" /* DELIVERED */) {
|
|
@@ -1340,28 +1462,28 @@ var TimeLine = ({ logs }) => {
|
|
|
1340
1462
|
case "Packaging" /* PACKAGING */:
|
|
1341
1463
|
case "Dispatched to courier" /* DISPATCHED_TO_COURIER */:
|
|
1342
1464
|
case "Delivered" /* DELIVERED */:
|
|
1343
|
-
return /* @__PURE__ */ (0,
|
|
1465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "size-5 bg-green-500 rounded-full p-1 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Check, {}) });
|
|
1344
1466
|
case "Order cancelled" /* ORDER_CANCELLED */:
|
|
1345
|
-
return /* @__PURE__ */ (0,
|
|
1467
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "size-5 bg-red-500 rounded-full p-1 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Cross, {}) });
|
|
1346
1468
|
default:
|
|
1347
|
-
return /* @__PURE__ */ (0,
|
|
1469
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "size-5 bg-neutral-600 text-neutral-200 rounded-full p-1", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Circle, {}) });
|
|
1348
1470
|
}
|
|
1349
1471
|
};
|
|
1350
|
-
return /* @__PURE__ */ (0,
|
|
1351
|
-
/* @__PURE__ */ (0,
|
|
1472
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className, children: steps.map(({ title, date, description }, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-row gap-4", children: [
|
|
1473
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col items-center", children: [
|
|
1352
1474
|
getIcon(title),
|
|
1353
|
-
/* @__PURE__ */ (0,
|
|
1475
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-0.5 h-full bg-neutral-500" })
|
|
1354
1476
|
] }),
|
|
1355
|
-
/* @__PURE__ */ (0,
|
|
1356
|
-
/* @__PURE__ */ (0,
|
|
1477
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col flex-1", children: [
|
|
1478
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
1357
1479
|
"p",
|
|
1358
1480
|
{
|
|
1359
1481
|
className: `text-base font-semibold relative top-[-2px] ${title === "Pending" /* PENDING */ ? "pb-8" : ""}`,
|
|
1360
1482
|
children: title
|
|
1361
1483
|
}
|
|
1362
1484
|
),
|
|
1363
|
-
title && /* @__PURE__ */ (0,
|
|
1364
|
-
description && /* @__PURE__ */ (0,
|
|
1485
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xs text-neutral-700", children: date }),
|
|
1486
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "p-4 text-xs bg-neutral-50 text-neutral-800 rounded-lg my-2", children: description })
|
|
1365
1487
|
] })
|
|
1366
1488
|
] }, `log_${index}`)) });
|
|
1367
1489
|
};
|