sprint-asia-custom-component 0.1.85 → 0.1.87
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +8 -8
- package/package.json +1 -1
- package/src/components/description/index.js +14 -24
- package/src/components/footer/index.js +44 -76
- package/src/templates/index.js +5 -1
package/dist/index.js
CHANGED
|
@@ -23853,8 +23853,8 @@
|
|
|
23853
23853
|
};
|
|
23854
23854
|
|
|
23855
23855
|
const Description = ({
|
|
23856
|
-
title
|
|
23857
|
-
value
|
|
23856
|
+
title,
|
|
23857
|
+
value,
|
|
23858
23858
|
textColor = "default",
|
|
23859
23859
|
subtitle,
|
|
23860
23860
|
linkSubtitle,
|
|
@@ -23865,12 +23865,12 @@
|
|
|
23865
23865
|
className: "w-full"
|
|
23866
23866
|
}, title && /*#__PURE__*/React__default["default"].createElement("p", {
|
|
23867
23867
|
className: "text-sm font-normal text-black mb-1"
|
|
23868
|
-
}, title), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
23868
|
+
}, title), value && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
23869
23869
|
className: "py-1"
|
|
23870
23870
|
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
23871
23871
|
className: `
|
|
23872
|
-
|
|
23873
|
-
|
|
23872
|
+
${textColor == "default" && "text-black font-semibold text-base"}
|
|
23873
|
+
${textColor == "success" && "text-success500 font-semibold text-base"}
|
|
23874
23874
|
`
|
|
23875
23875
|
}, value)), subtitle && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
23876
23876
|
className: "flex items-center mt-1"
|
|
@@ -23882,11 +23882,11 @@
|
|
|
23882
23882
|
}, linkSubtitle)), image && (typeof image === "string" ? /*#__PURE__*/React__default["default"].createElement("img", {
|
|
23883
23883
|
src: image,
|
|
23884
23884
|
alt: "voucher-img",
|
|
23885
|
-
className: "w-52 h-52 object-
|
|
23885
|
+
className: "w-52 h-52 object-cover rounded-lg mt-1"
|
|
23886
23886
|
}) : /*#__PURE__*/React__default["default"].createElement("img", {
|
|
23887
23887
|
src: URL.createObjectURL(image),
|
|
23888
23888
|
alt: "voucher-img",
|
|
23889
|
-
className: "w-52 h-52 object-
|
|
23889
|
+
className: "w-52 h-52 object-cover rounded-lg mt-1"
|
|
23890
23890
|
})));
|
|
23891
23891
|
};
|
|
23892
23892
|
|
|
@@ -47894,7 +47894,7 @@
|
|
|
47894
47894
|
onClickRightButton
|
|
47895
47895
|
}) => {
|
|
47896
47896
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47897
|
-
className: "fixed bottom-0 flex justify-end w-full items-center py-1 px-6 bg-white"
|
|
47897
|
+
className: "fixed bottom-0 flex justify-end w-full items-center py-1 px-6 bg-white z-10"
|
|
47898
47898
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
47899
47899
|
className: "flex items-center mr-48"
|
|
47900
47900
|
}, isActiveLeftButton && /*#__PURE__*/React__default["default"].createElement("div", {
|
package/package.json
CHANGED
|
@@ -1,27 +1,21 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
|
|
3
|
-
const Description = ({
|
|
4
|
-
title = "Title",
|
|
5
|
-
value = "Description",
|
|
6
|
-
textColor = "default",
|
|
7
|
-
subtitle,
|
|
8
|
-
linkSubtitle,
|
|
9
|
-
onClickSubtitle,
|
|
10
|
-
image,
|
|
11
|
-
}) => {
|
|
3
|
+
const Description = ({ title, value, textColor = "default", subtitle, linkSubtitle, onClickSubtitle, image }) => {
|
|
12
4
|
return (
|
|
13
5
|
<div className="w-full">
|
|
14
6
|
{title && <p className="text-sm font-normal text-black mb-1">{title}</p>}
|
|
15
|
-
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
7
|
+
{value && (
|
|
8
|
+
<div className="py-1">
|
|
9
|
+
<p
|
|
10
|
+
className={`
|
|
11
|
+
${textColor == "default" && "text-black font-semibold text-base"}
|
|
12
|
+
${textColor == "success" && "text-success500 font-semibold text-base"}
|
|
20
13
|
`}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
14
|
+
>
|
|
15
|
+
{value}
|
|
16
|
+
</p>
|
|
17
|
+
</div>
|
|
18
|
+
)}
|
|
25
19
|
{subtitle && (
|
|
26
20
|
<div className="flex items-center mt-1">
|
|
27
21
|
<p className="text-sm font-normal text-black mr-1">{subtitle}</p>
|
|
@@ -35,13 +29,9 @@ const Description = ({
|
|
|
35
29
|
|
|
36
30
|
{image &&
|
|
37
31
|
(typeof image === "string" ? (
|
|
38
|
-
<img src={image} alt="voucher-img" className="w-52 h-52 object-
|
|
32
|
+
<img src={image} alt="voucher-img" className="w-52 h-52 object-cover rounded-lg mt-1" />
|
|
39
33
|
) : (
|
|
40
|
-
<img
|
|
41
|
-
src={URL.createObjectURL(image)}
|
|
42
|
-
alt="voucher-img"
|
|
43
|
-
className="w-52 h-52 object-contain rounded-lg mt-1"
|
|
44
|
-
/>
|
|
34
|
+
<img src={URL.createObjectURL(image)} alt="voucher-img" className="w-52 h-52 object-cover rounded-lg mt-1" />
|
|
45
35
|
))}
|
|
46
36
|
</div>
|
|
47
37
|
);
|
|
@@ -1,83 +1,51 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import OutlineButton from
|
|
3
|
-
import DangerButton from
|
|
4
|
-
import PrimaryButton from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import OutlineButton from "../button/outlinebutton";
|
|
3
|
+
import DangerButton from "../button/dangerbutton";
|
|
4
|
+
import PrimaryButton from "../button/primarybutton";
|
|
5
5
|
|
|
6
|
-
const Footer = ({
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
6
|
+
const Footer = ({
|
|
7
|
+
titleLeftButton = "Delete",
|
|
8
|
+
titleRightButton = "Edit",
|
|
9
|
+
isActiveLeftButton,
|
|
10
|
+
isActiveRightButton,
|
|
11
|
+
isActive,
|
|
12
|
+
modeLeftButton = "danger",
|
|
13
|
+
modeRightButton = "outline",
|
|
14
|
+
onClickLeftButton,
|
|
15
|
+
onClickRightButton,
|
|
16
16
|
}) => {
|
|
17
17
|
return (
|
|
18
|
-
<div className=
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
</div>
|
|
48
|
-
}
|
|
49
|
-
{
|
|
50
|
-
isActiveRightButton &&
|
|
51
|
-
<div className='m-1'>
|
|
52
|
-
{
|
|
53
|
-
modeRightButton == "primary" &&
|
|
54
|
-
<PrimaryButton
|
|
55
|
-
title={titleRightButton}
|
|
56
|
-
onClick={onClickRightButton}
|
|
57
|
-
isActive={isActive}
|
|
58
|
-
/>
|
|
59
|
-
}
|
|
60
|
-
{
|
|
61
|
-
modeRightButton == "danger" &&
|
|
62
|
-
<DangerButton
|
|
63
|
-
title={titleRightButton}
|
|
64
|
-
onClick={onClickRightButton}
|
|
65
|
-
isActive={isActive}
|
|
66
|
-
/>
|
|
67
|
-
}
|
|
68
|
-
{
|
|
69
|
-
modeRightButton == "outline" &&
|
|
70
|
-
<OutlineButton
|
|
71
|
-
title={titleRightButton}
|
|
72
|
-
onClick={onClickRightButton}
|
|
73
|
-
isActive={isActive}
|
|
74
|
-
/>
|
|
75
|
-
}
|
|
76
|
-
</div>
|
|
77
|
-
}
|
|
78
|
-
</div>
|
|
18
|
+
<div className="fixed bottom-0 flex justify-end w-full items-center py-1 px-6 bg-white z-10">
|
|
19
|
+
<div className="flex items-center mr-48">
|
|
20
|
+
{isActiveLeftButton && (
|
|
21
|
+
<div className="m-1">
|
|
22
|
+
{modeLeftButton == "primary" && (
|
|
23
|
+
<PrimaryButton title={titleLeftButton} onClick={onClickLeftButton} isActive={true} />
|
|
24
|
+
)}
|
|
25
|
+
{modeLeftButton == "danger" && (
|
|
26
|
+
<DangerButton title={titleLeftButton} onClick={onClickLeftButton} isActive={true} />
|
|
27
|
+
)}
|
|
28
|
+
{modeLeftButton == "outline" && (
|
|
29
|
+
<OutlineButton title={titleLeftButton} onClick={onClickLeftButton} isActive={true} />
|
|
30
|
+
)}
|
|
31
|
+
</div>
|
|
32
|
+
)}
|
|
33
|
+
{isActiveRightButton && (
|
|
34
|
+
<div className="m-1">
|
|
35
|
+
{modeRightButton == "primary" && (
|
|
36
|
+
<PrimaryButton title={titleRightButton} onClick={onClickRightButton} isActive={isActive} />
|
|
37
|
+
)}
|
|
38
|
+
{modeRightButton == "danger" && (
|
|
39
|
+
<DangerButton title={titleRightButton} onClick={onClickRightButton} isActive={isActive} />
|
|
40
|
+
)}
|
|
41
|
+
{modeRightButton == "outline" && (
|
|
42
|
+
<OutlineButton title={titleRightButton} onClick={onClickRightButton} isActive={isActive} />
|
|
43
|
+
)}
|
|
44
|
+
</div>
|
|
45
|
+
)}
|
|
46
|
+
</div>
|
|
79
47
|
</div>
|
|
80
48
|
);
|
|
81
49
|
};
|
|
82
50
|
|
|
83
|
-
export default Footer;
|
|
51
|
+
export default Footer;
|
package/src/templates/index.js
CHANGED
|
@@ -1059,7 +1059,11 @@ const Templates = () => {
|
|
|
1059
1059
|
|
|
1060
1060
|
<div className="m-9"></div>
|
|
1061
1061
|
<p className="text-black font-bold text-2xl text-center py-2">Description</p>
|
|
1062
|
-
<Description
|
|
1062
|
+
<Description
|
|
1063
|
+
title="Sample Title"
|
|
1064
|
+
// value="This is a sample description."
|
|
1065
|
+
image="https://static.promediateknologi.id/crop/0x0:0x0/0x0/webp/photo/jawapos/2022/09/one-piece-red.jpeg"
|
|
1066
|
+
/>
|
|
1063
1067
|
|
|
1064
1068
|
<div className="m-9"></div>
|
|
1065
1069
|
<p className="text-black font-bold text-2xl text-center py-2">Dropdown</p>
|