sprint-asia-custom-component 0.1.118 → 0.1.120
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 +138 -55
- package/package.json +1 -1
- package/src/components/chip/index.js +1 -1
- package/src/components/header/index.js +131 -121
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@ const Chip = ({ title = "Approve", type = "success", onClick }) => {
|
|
|
5
5
|
<a
|
|
6
6
|
className={`
|
|
7
7
|
${type == "white" && "text-black border-black bg-white"}
|
|
8
|
-
${type == "neutral" && "text-neutral300 border-
|
|
8
|
+
${type == "neutral" && "text-neutral300 border-neutral40 bg-white"}
|
|
9
9
|
${type == "success" && "text-success600 border-success600 bg-success50"}
|
|
10
10
|
${type == "primary" && "text-primary500 border-primary500 bg-primary50"}
|
|
11
11
|
${type == "dropdown" && "text-primary500 border-primary500 bg-primary50"}
|
|
@@ -1,134 +1,144 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
/* eslint-disable jsx-a11y/anchor-is-valid */
|
|
2
|
+
import React, { useState, useRef } from "react";
|
|
3
|
+
import Profile from "../../assets/images/profile.png";
|
|
4
|
+
import { PiDoorOpenDuotone, PiUserCircleDuotone, PiBellDuotone, PiWalletDuotone } from "react-icons/pi";
|
|
4
5
|
|
|
5
6
|
const Header = ({
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
7
|
+
title = "Label",
|
|
8
|
+
fullName = "Undefined Name",
|
|
9
|
+
roleName = "Undefined Role",
|
|
10
|
+
dataProfile = [
|
|
11
|
+
{
|
|
12
|
+
title: "Change Password",
|
|
13
|
+
action: () => {
|
|
14
|
+
console.log("Change Password");
|
|
15
|
+
},
|
|
16
|
+
logo: PiUserCircleDuotone,
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
title: "Logout",
|
|
20
|
+
action: () => {
|
|
21
|
+
console.log("Logout");
|
|
22
|
+
},
|
|
23
|
+
logo: PiDoorOpenDuotone,
|
|
24
|
+
},
|
|
25
|
+
],
|
|
26
|
+
isNotificationActive = false,
|
|
27
|
+
dataNotification = ["Notification 1", "Notification 2"],
|
|
28
|
+
dataBalance = "0",
|
|
29
|
+
onClickWallet,
|
|
16
30
|
}) => {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
const modalRefNotification = useRef(null);
|
|
31
|
+
const [isProfileContentVisible, setProfileContentVisible] = useState(false);
|
|
32
|
+
const [isNotificationContentVisible, setNotificationContentVisible] = useState(false);
|
|
33
|
+
const modalRefProfile = useRef(null);
|
|
34
|
+
const modalRefNotification = useRef(null);
|
|
22
35
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
36
|
+
function toggleProfileContent() {
|
|
37
|
+
setProfileContentVisible(!isProfileContentVisible);
|
|
38
|
+
setNotificationContentVisible(false);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function toggleNotificationContent() {
|
|
42
|
+
setNotificationContentVisible(!isNotificationContentVisible);
|
|
43
|
+
setProfileContentVisible(false);
|
|
44
|
+
}
|
|
27
45
|
|
|
28
|
-
function toggleNotificationContent() {
|
|
29
|
-
setNotificationContentVisible(!isNotificationContentVisible)
|
|
30
|
-
setProfileContentVisible(false)
|
|
31
|
-
}
|
|
32
|
-
|
|
33
46
|
return (
|
|
34
|
-
<div className=
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
47
|
+
<div className="w-full h-16 flex items-center bg-white border-b border-neutral40 px-8">
|
|
48
|
+
<div className="flex w-full justify-between items-center">
|
|
49
|
+
<p className="text-2xl font-semibold">{title}</p>
|
|
50
|
+
<div className="flex">
|
|
51
|
+
<a className="flex items-center cursor-pointer" onClick={onClickWallet}>
|
|
52
|
+
<div className="w-10 h-10 rounded-full border border-neutral40 mr-2 flex items-center justify-center">
|
|
53
|
+
<PiWalletDuotone size={24} />
|
|
54
|
+
</div>
|
|
55
|
+
<div>
|
|
56
|
+
<p className="text-neutral300 text-xs">Balance:</p>
|
|
57
|
+
<p className="font-semibold text-black">Rp {dataBalance}</p>
|
|
58
|
+
</div>
|
|
59
|
+
</a>
|
|
60
|
+
<div className="w-px bg-neutral40 h-16 mx-3"></div>
|
|
61
|
+
<div
|
|
62
|
+
className="flex items-center cursor-pointer"
|
|
63
|
+
onClick={toggleNotificationContent}
|
|
64
|
+
ref={modalRefNotification}
|
|
65
|
+
>
|
|
66
|
+
<div className="w-10 h-10 rounded-full border border-neutral40 flex items-center justify-center">
|
|
67
|
+
<div className="relative">
|
|
68
|
+
<PiBellDuotone size={24} />
|
|
69
|
+
{isNotificationActive && (
|
|
70
|
+
<div className="absolute top-0 right-0 border border-white w-2 h-2 rounded-full bg-danger500"></div>
|
|
71
|
+
)}
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
{isNotificationContentVisible && (
|
|
75
|
+
<div className="absolute right-20 top-16 z-50">
|
|
76
|
+
{dataNotification.length !== 0 && (
|
|
77
|
+
<div className="z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md">
|
|
78
|
+
{dataNotification.map((value, index) => (
|
|
79
|
+
<div
|
|
80
|
+
key={index}
|
|
81
|
+
className={`px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2
|
|
82
|
+
${
|
|
83
|
+
dataProfile.length == 1
|
|
84
|
+
? "rounded-md"
|
|
85
|
+
: index === 0
|
|
86
|
+
? "rounded-t-md"
|
|
87
|
+
: index === dataProfile.length - 1
|
|
88
|
+
? "rounded-b-md"
|
|
89
|
+
: ""
|
|
77
90
|
}
|
|
78
91
|
`}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
index ===
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
index === dataProfile.length - 1 ?
|
|
113
|
-
'rounded-b-md'
|
|
114
|
-
: ""
|
|
92
|
+
onClick={value.action}
|
|
93
|
+
>
|
|
94
|
+
<p className="text-sm">{value}</p>
|
|
95
|
+
</div>
|
|
96
|
+
))}
|
|
97
|
+
</div>
|
|
98
|
+
)}
|
|
99
|
+
</div>
|
|
100
|
+
)}
|
|
101
|
+
</div>
|
|
102
|
+
<div className="w-px bg-neutral40 h-16 mx-3"></div>
|
|
103
|
+
<div className="flex items-center cursor-pointer" onClick={toggleProfileContent} ref={modalRefProfile}>
|
|
104
|
+
<img src={Profile} className="w-10 h-10 mr-2" />
|
|
105
|
+
<div className="flex-1">
|
|
106
|
+
<p className="text-sm text-black font-semibold whitespace-nowrap">{fullName}</p>
|
|
107
|
+
<p className="text-xs text-neutral300 font-normal whitespace-nowrap">{roleName}</p>
|
|
108
|
+
</div>
|
|
109
|
+
{isProfileContentVisible && (
|
|
110
|
+
<div className="absolute right-0 top-16 z-50">
|
|
111
|
+
{dataProfile.length !== 0 && (
|
|
112
|
+
<div className="z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md">
|
|
113
|
+
{dataProfile.map((value, index) => (
|
|
114
|
+
<div
|
|
115
|
+
key={index}
|
|
116
|
+
className={`px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2
|
|
117
|
+
${
|
|
118
|
+
dataProfile.length == 1
|
|
119
|
+
? "rounded-md"
|
|
120
|
+
: index === 0
|
|
121
|
+
? "rounded-t-md"
|
|
122
|
+
: index === dataProfile.length - 1
|
|
123
|
+
? "rounded-b-md"
|
|
124
|
+
: ""
|
|
115
125
|
}
|
|
116
126
|
`}
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
</div>
|
|
127
|
+
onClick={value.action}
|
|
128
|
+
>
|
|
129
|
+
<value.logo size={16} className="text-neutral300 mr-2" />
|
|
130
|
+
<p className="text-sm">{value.title}</p>
|
|
131
|
+
</div>
|
|
132
|
+
))}
|
|
133
|
+
</div>
|
|
134
|
+
)}
|
|
135
|
+
</div>
|
|
136
|
+
)}
|
|
137
|
+
</div>
|
|
129
138
|
</div>
|
|
139
|
+
</div>
|
|
130
140
|
</div>
|
|
131
|
-
)
|
|
132
|
-
}
|
|
141
|
+
);
|
|
142
|
+
};
|
|
133
143
|
|
|
134
|
-
export default Header
|
|
144
|
+
export default Header;
|