sprint-asia-custom-component 0.1.78 → 0.1.80
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 +1 -1
- package/package.json +1 -1
- package/src/assets/images/background_whatsapp.png +0 -0
- package/src/assets/images/logo_empty_voucher.png +0 -0
- package/src/components/chip/index.js +1 -1
- package/src/components/customphone/index.js +252 -0
- package/src/components/customphone/style.css +27 -0
package/dist/index.js
CHANGED
|
@@ -351,7 +351,7 @@
|
|
|
351
351
|
}) => {
|
|
352
352
|
return /*#__PURE__*/React__default["default"].createElement("a", {
|
|
353
353
|
className: `
|
|
354
|
-
${type == "white" && "text-neutral300 border-
|
|
354
|
+
${type == "white" && "text-neutral300 border-neutral40 bg-white"}
|
|
355
355
|
${type == "neutral" && "text-neutral300 border-neutral300 bg-neutral30"}
|
|
356
356
|
${type == "success" && "text-success600 border-success600 bg-success50"}
|
|
357
357
|
${type == "primary" && "text-primary500 border-primary500 bg-primary50"}
|
package/package.json
CHANGED
|
Binary file
|
|
Binary file
|
|
@@ -4,7 +4,7 @@ const Chip = ({ title = "Approve", type = "success", onClick }) => {
|
|
|
4
4
|
return (
|
|
5
5
|
<a
|
|
6
6
|
className={`
|
|
7
|
-
${type == "white" && "text-neutral300 border-
|
|
7
|
+
${type == "white" && "text-neutral300 border-neutral40 bg-white"}
|
|
8
8
|
${type == "neutral" && "text-neutral300 border-neutral300 bg-neutral30"}
|
|
9
9
|
${type == "success" && "text-success600 border-success600 bg-success50"}
|
|
10
10
|
${type == "primary" && "text-primary500 border-primary500 bg-primary50"}
|
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import "./style.css"
|
|
3
|
+
import { IoIosBatteryFull, IoIosWifi, IoMdVolumeHigh } from "react-icons/io";
|
|
4
|
+
import LogoPrezentHidden from "../../assets/images/logo_prezent_hidden.png"
|
|
5
|
+
import LogoEmptyVoucher from "../../assets/images/logo_empty_voucher.png"
|
|
6
|
+
import {
|
|
7
|
+
IoIosCamera,
|
|
8
|
+
IoIosAppstore,
|
|
9
|
+
IoIosMic,
|
|
10
|
+
IoIosArrowBack
|
|
11
|
+
} from "react-icons/io";
|
|
12
|
+
import {
|
|
13
|
+
IoMailOutline,
|
|
14
|
+
IoTrashOutline,
|
|
15
|
+
IoEllipsisHorizontal,
|
|
16
|
+
IoArchiveOutline,
|
|
17
|
+
IoStarOutline,
|
|
18
|
+
IoReturnUpBackSharp,
|
|
19
|
+
IoChevronDownOutline,
|
|
20
|
+
IoReturnUpForwardSharp ,
|
|
21
|
+
IoAdd
|
|
22
|
+
} from "react-icons/io5";
|
|
23
|
+
import { PiMicrophone } from "react-icons/pi";
|
|
24
|
+
import { MdOutlineLabelImportant } from "react-icons/md";
|
|
25
|
+
import { PiCamera } from "react-icons/pi";
|
|
26
|
+
import { BsSticky } from "react-icons/bs";
|
|
27
|
+
import { BsTelephonePlus } from "react-icons/bs";
|
|
28
|
+
import BackgroundWA from "../../assets/images/background_whatsapp.png"
|
|
29
|
+
import PrimaryButton from '../button/primarybutton';
|
|
30
|
+
|
|
31
|
+
const CustomPhone = ({
|
|
32
|
+
mode = "Empty",
|
|
33
|
+
data,
|
|
34
|
+
}) => {
|
|
35
|
+
return (
|
|
36
|
+
<div className="iphone-frame">
|
|
37
|
+
<div className='flex justify-between'>
|
|
38
|
+
<p className='absolute left-0 pt-1 pl-2 text-xs text-black ml-2'>09.41</p>
|
|
39
|
+
<div className="iphone-notch"></div>
|
|
40
|
+
<div className='absolute right-0 pt-1 pr-2'>
|
|
41
|
+
<div className='flex'>
|
|
42
|
+
<IoMdVolumeHigh className='w-3 h-3 text-black my-1'/>
|
|
43
|
+
<IoIosWifi className='w-3 h-3 text-black m-1'/>
|
|
44
|
+
<IoIosBatteryFull className='w-3 h-3 text-black my-1'/>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
<div className="iphone-screen">
|
|
49
|
+
{
|
|
50
|
+
mode === "Empty" &&
|
|
51
|
+
<div className='h-full w-full bg-white flex justify-center items-center text-center'>
|
|
52
|
+
<div>
|
|
53
|
+
<div className='flex justify-center'>
|
|
54
|
+
<img src={LogoEmptyVoucher} className='w-16 h-16 mb-2'/>
|
|
55
|
+
</div>
|
|
56
|
+
<div className='w-32'>
|
|
57
|
+
<p className='font-semibold text-xs'>Please click voucher!</p>
|
|
58
|
+
<p style={{fontSize:"8px"}} className='text-neutral300 p-1'>Click on any voucher in the table to preview how it will appear when you use it.</p>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
}
|
|
63
|
+
{
|
|
64
|
+
mode === "Whatsapp" &&
|
|
65
|
+
<div className='h-screen'>
|
|
66
|
+
<div className='w-full bg-neutral20 pt-6 px-2 pb-1 flex justify-between items-center'>
|
|
67
|
+
<div className='flex items-center'>
|
|
68
|
+
<IoIosArrowBack className='w-4 h-4 text-info500 mr-1'/>
|
|
69
|
+
<img src={LogoPrezentHidden} className='rounded-full w-5 h-5 bg-white mx-2 p-0.5'/>
|
|
70
|
+
<div>
|
|
71
|
+
<p className='text-xs text-bold'>Prezent</p>
|
|
72
|
+
<p className='text-neutral80' style={{fontSize:"8px"}}>Online</p>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
<BsTelephonePlus className='w-4 h-4 text-info500'/>
|
|
76
|
+
</div>
|
|
77
|
+
<div className="relative w-full h-screen">
|
|
78
|
+
<img
|
|
79
|
+
src={BackgroundWA}
|
|
80
|
+
className="absolute top-0 left-0 w-full h-full object-cover"
|
|
81
|
+
/>
|
|
82
|
+
<div className="relative z-10 px-3 py-2">
|
|
83
|
+
<div className='flex justify-center'>
|
|
84
|
+
<div className='bg-info50 px-6 rounded w-fit'>
|
|
85
|
+
<p style={{fontSize:"8px"}} className='text-neutral900'>Today</p>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
<div className='bg-warning100 p-1.5 rounded mx-6 my-2 text-center'>
|
|
89
|
+
<p style={{fontSize:"8px"}} className='text-neutral900'>Messages and call are end-to-end encrypted. No one outside of this chat, not even Whatsapp, can read or listen to them. Tap to learn more.</p>
|
|
90
|
+
</div>
|
|
91
|
+
<div className='bg-white py-1 px-2 rounded-md w-32 drop-shadow-2xl'>
|
|
92
|
+
<p style={{ fontSize: "8px", wordBreak: "break-word" }} className='text-neutral5'>{data}</p>
|
|
93
|
+
<div className='flex justify-end'>
|
|
94
|
+
<p style={{ fontSize: "8px" }} className='text-neutral80'>9.41 AM</p>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
<div className='w-full bg-neutral20 absolute bottom-0 p-2 rounded-md-lb rounded-b-xl'>
|
|
100
|
+
<div className='flex justify-between mb-2 items-center'>
|
|
101
|
+
<IoAdd className='w-5 h-5 text-info500'/>
|
|
102
|
+
<div className='w-32 py-1 border border-neutral80 rounded-full flex justify-between items-center px-2'>
|
|
103
|
+
<p className='text-xs text-neutral50'></p>
|
|
104
|
+
<BsSticky className='w-3 h-3 text-info500'/>
|
|
105
|
+
</div>
|
|
106
|
+
<PiCamera className='w-5 h-5 text-info500'/>
|
|
107
|
+
<PiMicrophone className='w-5 h-5 text-info500'/>
|
|
108
|
+
</div>
|
|
109
|
+
<div className='flex justify-center mt-1'>
|
|
110
|
+
<div className='w-32 h-1 bg-black rounded-full'></div>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
}
|
|
115
|
+
{
|
|
116
|
+
mode === "Voucher" &&
|
|
117
|
+
<div className='h-screen'>
|
|
118
|
+
<div className='overflow-y-auto no-scrollbar' style={{height:"450px"}}>
|
|
119
|
+
<div className='w-full h-54 bg-primary500 pt-6 pb-4'>
|
|
120
|
+
<div className='bg-white rounded-md p-3 mx-3 mt-12'>
|
|
121
|
+
<p className='font-semibold text-sm'>Voucher Belanja MAP</p>
|
|
122
|
+
<p className='font-semibold text-sm'>Rp 100.000</p>
|
|
123
|
+
<p className='font-normal text-neutral100 mt-1 text-xs' style={{ fontSize:"10px"}}>Order ID: 12345</p>
|
|
124
|
+
<div className='flex justify-between items-center'>
|
|
125
|
+
<p className='text-xs' style={{ fontSize:"10px"}}>21 Jan 2022 - 22 Mar 2023</p>
|
|
126
|
+
<div className='w-12 h-12 rounded-full bg-primary500'></div>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
<div className='bg-white p-3'>
|
|
131
|
+
<p className='text-md font-semibold'>Happy Birthday, Congratulation!</p>
|
|
132
|
+
<p className='text-neutral300' style={{ fontSize:"10px"}}>You`ve won a Voucher Belanja MAP Rp100.000 as a special birthday gift from us. Enjoy your day with extra joy!</p>
|
|
133
|
+
</div>
|
|
134
|
+
<div className='bg-neutral20 p-3 pb-16'>
|
|
135
|
+
<p className='text-xs font-semibold'>Description</p>
|
|
136
|
+
<p className='text-neutral300 mt-2' style={{ fontSize:"10px"}}>
|
|
137
|
+
MAP Gift Voucher is the official gift voucher of PT Mitra Adiperkasa Tbk. Accepted in2 retail stores managed under MAP Group Indonesia, with a wide range of product brands. It is a perfect gift for Birthdays, Annivesaries, Valentines, Holidays, Festivals
|
|
138
|
+
</p>
|
|
139
|
+
</div>
|
|
140
|
+
<div className='w-12 h-12 rounded-full bg-primary500 absolute bottom-0 right-0 mb-12 mr-2'>
|
|
141
|
+
</div>
|
|
142
|
+
<div className='w-full bg-white absolute bottom-0 p-2 rounded-md-lb rounded-b-xl'>
|
|
143
|
+
<PrimaryButton title='Redeem Voucher' type='full' size='small'/>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
}
|
|
148
|
+
{
|
|
149
|
+
mode === "Email" &&
|
|
150
|
+
<div className='h-screen'>
|
|
151
|
+
<div className='overflow-y-auto no-scrollbar' style={{height:"450px"}}>
|
|
152
|
+
<div className='w-full bg-white pt-6 px-2 flex justify-between'>
|
|
153
|
+
<IoIosArrowBack className='w-4 h-4 text-neutral200 mt-2'/>
|
|
154
|
+
<div className='flex'>
|
|
155
|
+
<IoArchiveOutline className='w-3 h-3 text-neutral200 mt-2 mr-3'/>
|
|
156
|
+
<IoTrashOutline className='w-3 h-3 text-neutral200 mt-2 mr-3'/>
|
|
157
|
+
<IoMailOutline className='w-3 h-3 text-black mt-2 mr-3'/>
|
|
158
|
+
<IoEllipsisHorizontal className='w-3 h-3 text-neutral200 mt-2'/>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
<div className='w-full bg-white pt-2 px-2 flex justify-between'>
|
|
162
|
+
<div className='flex items-center ml-1'>
|
|
163
|
+
<p className='text-sm'>Title Email</p>
|
|
164
|
+
<MdOutlineLabelImportant className='w-4 h-4 text-primary400 ml-2'/>
|
|
165
|
+
<div className='py-0.5 px-2 bg-neutral30 rounded-sm ml-1'>
|
|
166
|
+
<p style={{fontSize:"8px"}}>Inbox</p>
|
|
167
|
+
</div>
|
|
168
|
+
</div>
|
|
169
|
+
<IoStarOutline className='w-4 h-4 text-neutral80 mr-2'/>
|
|
170
|
+
</div>
|
|
171
|
+
<div className='w-full bg-white pt-2 px-2 flex justify-between items-center'>
|
|
172
|
+
<div className='flex items-center ml-1'>
|
|
173
|
+
<img src={LogoPrezentHidden} className='rounded-full w-5 h-5 bg-white'/>
|
|
174
|
+
<div className='ml-1'>
|
|
175
|
+
<p className="font-semibold" style={{fontSize:"10px"}}>Prezent@sprint.id</p>
|
|
176
|
+
<div className='flex items-center'>
|
|
177
|
+
<p className="text-neutral80" style={{fontSize:"8px"}}>to me</p>
|
|
178
|
+
<IoChevronDownOutline className='w-3 h-3 text-neutral80 ml-0.5'/>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
182
|
+
<div className='flex items-center mr-3'>
|
|
183
|
+
<IoReturnUpBackSharp className='w-3 h-3 text-black mr-3'/>
|
|
184
|
+
<IoEllipsisHorizontal className='w-3 h-3 text-neutral200'/>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
<div className='w-full bg-white px-2'>
|
|
188
|
+
<div className="p-4" style={{fontSize:"8px"}}>
|
|
189
|
+
<p>{data}</p>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
<div className='w-full bg-white absolute bottom-0 p-2 rounded-md-lb rounded-b-xl'>
|
|
193
|
+
<div>
|
|
194
|
+
<div className='flex justify-center'>
|
|
195
|
+
<div className='border border-neutral300 flex justify-center items-center w-24 py-1 m-1 rounded-sm'>
|
|
196
|
+
<IoReturnUpBackSharp className='w-3 h-3 text-neutral300'/>
|
|
197
|
+
<p className='ml-1 text-neutral300' style={{fontSize:"10px"}}>Reply</p>
|
|
198
|
+
</div>
|
|
199
|
+
<div className='border flex justify-center items-center w-24 py-1 m-1 rounded-sm'>
|
|
200
|
+
<p className='mr-1 text-neutral300' style={{fontSize:"10px"}}>Forward</p>
|
|
201
|
+
<IoReturnUpForwardSharp className='w-3 h-3 text-neutral300'/>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
<div className='flex justify-center'>
|
|
206
|
+
<div className='w-32 h-1 bg-black rounded-full'></div>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
}
|
|
212
|
+
{
|
|
213
|
+
mode === "SMS" &&
|
|
214
|
+
<div className='h-screen'>
|
|
215
|
+
<div className='overflow-y-auto no-scrollbar' style={{height:"450px"}}>
|
|
216
|
+
<div className='w-full bg-neutral20 border-b border-neutral30 border pt-6 px-2 flex justify-between'>
|
|
217
|
+
<IoIosArrowBack className='w-5 h-5 text-primary300 mt-2'/>
|
|
218
|
+
<div>
|
|
219
|
+
<div className='flex justify-center mt-2'>
|
|
220
|
+
<img src={LogoPrezentHidden} className='rounded-full w-8 h-8 bg-white'/>
|
|
221
|
+
</div>
|
|
222
|
+
<p className='mb-1' style={{fontSize:"10px"}}>Prezent</p>
|
|
223
|
+
</div>
|
|
224
|
+
<IoIosArrowBack className='w-5 h-5 text-neutral20 mt-2'/>
|
|
225
|
+
</div>
|
|
226
|
+
<div className='w-full bg-white px-2 py-4'>
|
|
227
|
+
<div className='w-40 bg-neutral30 rounded-lg p-2' style={{fontSize:"8px"}}>
|
|
228
|
+
<p>{data}</p>
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
<div className='w-full bg-white absolute bottom-0 p-2 rounded-md-lb rounded-b-xl'>
|
|
232
|
+
<div className='flex justify-between mb-2 items-center'>
|
|
233
|
+
<IoIosCamera className='w-5 h-5 text-neutral80'/>
|
|
234
|
+
<IoIosAppstore className='w-5 h-5 text-neutral80'/>
|
|
235
|
+
<div className='w-40 py-1 border border-neutral80 rounded-full flex justify-between items-center px-2'>
|
|
236
|
+
<p className='text-xs text-neutral50'>iMessage</p>
|
|
237
|
+
<IoIosMic className='w-4 h-4 text-neutral80'/>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
<div className='flex justify-center'>
|
|
241
|
+
<div className='w-32 h-1 bg-black rounded-full'></div>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
</div>
|
|
246
|
+
}
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
)
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
export default CustomPhone
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/* src/components/iphone.css */
|
|
2
|
+
.iphone-frame {
|
|
3
|
+
width: 250px; /* Perkecil ukuran dari 375px */
|
|
4
|
+
height: 500px; /* Perkecil ukuran dari 812px */
|
|
5
|
+
border-radius: 25px; /* Perkecil radius dari 40px */
|
|
6
|
+
border: 10px solid #000; /* Perkecil border dari 16px */
|
|
7
|
+
position: relative;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.iphone-notch {
|
|
11
|
+
width: 110px; /* Perkecil ukuran dari 210px */
|
|
12
|
+
height: 20px; /* Perkecil ukuran dari 30px */
|
|
13
|
+
background: #000;
|
|
14
|
+
border-radius: 0px 0px 10px 10px;
|
|
15
|
+
position: absolute;
|
|
16
|
+
top: 0px; /* Perkecil ukuran dari -16px */
|
|
17
|
+
left: calc(50% - 55px); /* Perkecil ukuran dari 105px */
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.iphone-screen {
|
|
21
|
+
width: 100%;
|
|
22
|
+
height: 100%;
|
|
23
|
+
background: #fff;
|
|
24
|
+
border-radius: 15px; /* Perkecil radius dari 24px */
|
|
25
|
+
overflow: hidden;
|
|
26
|
+
}
|
|
27
|
+
|