@sikka/hawa 0.0.224 → 0.0.225
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/styles.css +29 -0
- package/es/elements/HawaLandingCard.d.ts +17 -0
- package/es/elements/HawaStoreButtons.d.ts +7 -0
- package/es/elements/index.d.ts +2 -0
- package/es/index.es.js +1 -1
- package/lib/elements/HawaLandingCard.d.ts +17 -0
- package/lib/elements/HawaStoreButtons.d.ts +7 -0
- package/lib/elements/index.d.ts +2 -0
- package/lib/index.js +1 -1
- package/package.json +1 -1
- package/src/elements/HawaLandingCard.tsx +66 -0
- package/src/elements/HawaPhoneInput.tsx +5 -2
- package/src/elements/HawaStoreButtons.tsx +131 -0
- package/src/elements/index.ts +2 -0
- package/src/styles.css +29 -0
package/package.json
CHANGED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import clsx from "clsx"
|
|
2
|
+
import React from "react"
|
|
3
|
+
|
|
4
|
+
type LandingCardTypes = {
|
|
5
|
+
orientation: "vertical" | "horizontal"
|
|
6
|
+
title: string
|
|
7
|
+
description: string
|
|
8
|
+
imageURL: string
|
|
9
|
+
handleHide: any
|
|
10
|
+
texts?: {
|
|
11
|
+
titleTip?: string
|
|
12
|
+
title?: string
|
|
13
|
+
description?: string
|
|
14
|
+
linkText?: string
|
|
15
|
+
}
|
|
16
|
+
buttonLink?: string
|
|
17
|
+
}
|
|
18
|
+
export const HawaLandingCard: React.FunctionComponent<LandingCardTypes> = ({
|
|
19
|
+
orientation,
|
|
20
|
+
...props
|
|
21
|
+
}) => {
|
|
22
|
+
let cardStyles = {
|
|
23
|
+
horizontal:
|
|
24
|
+
"flex max-w-xl rounded border-gray-200 bg-gray-100 shadow-md dark:border-gray-700 dark:bg-gray-800 ",
|
|
25
|
+
vertical:
|
|
26
|
+
"flex max-w-xs rounded border-gray-200 bg-gray-100 shadow-md dark:border-gray-700 dark:bg-gray-800 ",
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
let imageStyles = {
|
|
30
|
+
horizontal: "w-8 h-8 rounded",
|
|
31
|
+
vertical: "w-14 h-14 rounded",
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
return (
|
|
35
|
+
<div
|
|
36
|
+
className={clsx(
|
|
37
|
+
cardStyles[orientation],
|
|
38
|
+
"flex flex-col p-10",
|
|
39
|
+
"relative overflow-hidden"
|
|
40
|
+
)}
|
|
41
|
+
{...props}
|
|
42
|
+
>
|
|
43
|
+
{props.texts.titleTip && (
|
|
44
|
+
<div className="text-sm text-red-600">{props.texts.titleTip}</div>
|
|
45
|
+
)}
|
|
46
|
+
{props.imageURL && (
|
|
47
|
+
<img
|
|
48
|
+
className="absolute -bottom-10 -right-10 h-40 w-auto "
|
|
49
|
+
src={props.imageURL}
|
|
50
|
+
/>
|
|
51
|
+
)}
|
|
52
|
+
|
|
53
|
+
{props.texts.title && (
|
|
54
|
+
<div className="mt-2 text-lg font-medium">{props.texts.title} </div>
|
|
55
|
+
)}
|
|
56
|
+
{props.texts.description && (
|
|
57
|
+
<div className="mt-4 text-sm z-10">{props.texts.description}</div>
|
|
58
|
+
)}
|
|
59
|
+
{props.texts.linkText && (
|
|
60
|
+
<div className="z-10 mt-6 text-sm underline underline-offset-8">
|
|
61
|
+
{props.texts.linkText}
|
|
62
|
+
</div>
|
|
63
|
+
)}
|
|
64
|
+
</div>
|
|
65
|
+
)
|
|
66
|
+
}
|
|
@@ -20,10 +20,13 @@ const Option: React.FunctionComponent<OptionTypes> = ({
|
|
|
20
20
|
}) => (
|
|
21
21
|
<div
|
|
22
22
|
ref={innerRef}
|
|
23
|
-
className="m-2 flex flex-row items-center justify-between rounded p-1 px-
|
|
23
|
+
className="m-2 flex flex-row items-center justify-between rounded p-1 px-2 hover:bg-blue-200"
|
|
24
24
|
{...innerProps}
|
|
25
25
|
>
|
|
26
|
-
<
|
|
26
|
+
<div className="flex flex-row items-center justify-center gap-1">
|
|
27
|
+
<img className="h-8 w-8" src={props.data.image}></img>
|
|
28
|
+
<span className="text-[10px]">{props.data.country_label}</span>
|
|
29
|
+
</div>
|
|
27
30
|
{children}
|
|
28
31
|
</div>
|
|
29
32
|
)
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
|
|
3
|
+
type StoreButtonsTypes = {
|
|
4
|
+
store: "apple" | "google"
|
|
5
|
+
mode: "dark" | "light"
|
|
6
|
+
}
|
|
7
|
+
export const HawaStoreButtons: React.FunctionComponent<StoreButtonsTypes> = (
|
|
8
|
+
props
|
|
9
|
+
) => {
|
|
10
|
+
return (
|
|
11
|
+
<div className="flex justify-center">
|
|
12
|
+
<div>
|
|
13
|
+
{/* <!-- https://developer.apple.com/app-store/marketing/guidelines/#section-badges --> */}
|
|
14
|
+
{props.store === "apple" ? (
|
|
15
|
+
props.mode === "dark" ? (
|
|
16
|
+
<div className="mt-3 flex h-14 w-48 items-center justify-center rounded-lg bg-black text-white">
|
|
17
|
+
<div className="mr-3">
|
|
18
|
+
<svg viewBox="0 0 384 512" width="30">
|
|
19
|
+
<path
|
|
20
|
+
fill="currentColor"
|
|
21
|
+
d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
|
|
22
|
+
/>
|
|
23
|
+
</svg>
|
|
24
|
+
</div>
|
|
25
|
+
<div>
|
|
26
|
+
<div className="text-xs">Download on the</div>
|
|
27
|
+
<div className="font-sans -mt-1 text-2xl font-semibold">
|
|
28
|
+
App Store
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
) : (
|
|
33
|
+
<div className="mt-3 flex h-14 w-48 items-center justify-center rounded-lg border border-black bg-transparent text-black">
|
|
34
|
+
<div className="mr-3">
|
|
35
|
+
<svg viewBox="0 0 384 512" width="30">
|
|
36
|
+
<path
|
|
37
|
+
fill="currentColor"
|
|
38
|
+
d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
|
|
39
|
+
/>
|
|
40
|
+
</svg>
|
|
41
|
+
</div>
|
|
42
|
+
<div>
|
|
43
|
+
<div className="text-xs">Download on the</div>
|
|
44
|
+
<div className="font-sans -mt-1 text-2xl font-semibold">
|
|
45
|
+
App Store
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
)
|
|
50
|
+
) : props.mode === "dark" ? (
|
|
51
|
+
<div className="mt-3 flex h-14 w-48 items-center justify-center rounded-lg bg-black text-white">
|
|
52
|
+
<div className="mr-3">
|
|
53
|
+
<svg viewBox="30 336.7 120.9 129.2" width="30">
|
|
54
|
+
<path
|
|
55
|
+
fill="#FFD400"
|
|
56
|
+
d="M119.2,421.2c15.3-8.4,27-14.8,28-15.3c3.2-1.7,6.5-6.2,0-9.7 c-2.1-1.1-13.4-7.3-28-15.3l-20.1,20.2L119.2,421.2z"
|
|
57
|
+
/>
|
|
58
|
+
<path
|
|
59
|
+
fill="#FF3333"
|
|
60
|
+
d="M99.1,401.1l-64.2,64.7c1.5,0.2,3.2-0.2,5.2-1.3 c4.2-2.3,48.8-26.7,79.1-43.3L99.1,401.1L99.1,401.1z"
|
|
61
|
+
/>
|
|
62
|
+
<path
|
|
63
|
+
fill="#48FF48"
|
|
64
|
+
d="M99.1,401.1l20.1-20.2c0,0-74.6-40.7-79.1-43.1 c-1.7-1-3.6-1.3-5.3-1L99.1,401.1z"
|
|
65
|
+
/>
|
|
66
|
+
<path
|
|
67
|
+
fill="#3BCCFF"
|
|
68
|
+
d="M99.1,401.1l-64.3-64.3c-2.6,0.6-4.8,2.9-4.8,7.6 c0,7.5,0,107.5,0,113.8c0,4.3,1.7,7.4,4.9,7.7L99.1,401.1z"
|
|
69
|
+
/>
|
|
70
|
+
</svg>
|
|
71
|
+
</div>
|
|
72
|
+
<div>
|
|
73
|
+
<div className="text-xs">GET IT ON</div>
|
|
74
|
+
<div className="font-sans -mt-1 text-xl font-semibold">
|
|
75
|
+
Google Play
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
) : (
|
|
80
|
+
<div className="mt-3 flex h-14 w-48 items-center justify-center rounded-lg bg-white border border-black text-black">
|
|
81
|
+
<div className="mr-3">
|
|
82
|
+
<svg viewBox="30 336.7 120.9 129.2" width="30">
|
|
83
|
+
<path
|
|
84
|
+
fill="#FFD400"
|
|
85
|
+
d="M119.2,421.2c15.3-8.4,27-14.8,28-15.3c3.2-1.7,6.5-6.2,0-9.7 c-2.1-1.1-13.4-7.3-28-15.3l-20.1,20.2L119.2,421.2z"
|
|
86
|
+
/>
|
|
87
|
+
<path
|
|
88
|
+
fill="#FF3333"
|
|
89
|
+
d="M99.1,401.1l-64.2,64.7c1.5,0.2,3.2-0.2,5.2-1.3 c4.2-2.3,48.8-26.7,79.1-43.3L99.1,401.1L99.1,401.1z"
|
|
90
|
+
/>
|
|
91
|
+
<path
|
|
92
|
+
fill="#48FF48"
|
|
93
|
+
d="M99.1,401.1l20.1-20.2c0,0-74.6-40.7-79.1-43.1 c-1.7-1-3.6-1.3-5.3-1L99.1,401.1z"
|
|
94
|
+
/>
|
|
95
|
+
<path
|
|
96
|
+
fill="#3BCCFF"
|
|
97
|
+
d="M99.1,401.1l-64.3-64.3c-2.6,0.6-4.8,2.9-4.8,7.6 c0,7.5,0,107.5,0,113.8c0,4.3,1.7,7.4,4.9,7.7L99.1,401.1z"
|
|
98
|
+
/>
|
|
99
|
+
</svg>
|
|
100
|
+
</div>
|
|
101
|
+
<div>
|
|
102
|
+
<div className="text-xs">GET IT ON</div>
|
|
103
|
+
<div className="font-sans -mt-1 text-xl font-semibold">
|
|
104
|
+
Google Play
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
)}
|
|
109
|
+
|
|
110
|
+
{/* <div className="mt-3 flex h-14 w-60 items-center justify-center rounded-xl bg-black text-white">
|
|
111
|
+
<div className="mr-3">
|
|
112
|
+
<svg viewBox="0 0 384 512" width="30">
|
|
113
|
+
<path
|
|
114
|
+
fill="currentColor"
|
|
115
|
+
d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
|
|
116
|
+
/>
|
|
117
|
+
</svg>
|
|
118
|
+
</div>
|
|
119
|
+
<div>
|
|
120
|
+
<div className="text-xs">Download on the</div>
|
|
121
|
+
<div className="font-sans -mt-1 text-2xl font-semibold">
|
|
122
|
+
Mac App Store
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
</div> */}
|
|
126
|
+
|
|
127
|
+
{/* <!-- https://play.google.com/intl/en_us/badges/ --> */}
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
)
|
|
131
|
+
}
|
package/src/elements/index.ts
CHANGED
|
@@ -37,6 +37,8 @@ export * from "./HawaPinInput"
|
|
|
37
37
|
export * from "./HawaItemCard"
|
|
38
38
|
export * from "./HawaPricingCard"
|
|
39
39
|
export * from "./HawaAdCard"
|
|
40
|
+
export * from "./HawaLandingCard"
|
|
40
41
|
//Buttons
|
|
41
42
|
export * from "./HawaButton"
|
|
43
|
+
export * from "./HawaStoreButtons"
|
|
42
44
|
export * from "./HawaLogoButton"
|
package/src/styles.css
CHANGED
|
@@ -570,9 +570,15 @@ video {
|
|
|
570
570
|
.inset-0 {
|
|
571
571
|
inset: 0px;
|
|
572
572
|
}
|
|
573
|
+
.-bottom-10 {
|
|
574
|
+
bottom: -2.5rem;
|
|
575
|
+
}
|
|
573
576
|
.-left-1 {
|
|
574
577
|
left: -0.25rem;
|
|
575
578
|
}
|
|
579
|
+
.-right-10 {
|
|
580
|
+
right: -2.5rem;
|
|
581
|
+
}
|
|
576
582
|
.-right-3 {
|
|
577
583
|
right: -0.75rem;
|
|
578
584
|
}
|
|
@@ -687,6 +693,9 @@ video {
|
|
|
687
693
|
.-mb-px {
|
|
688
694
|
margin-bottom: -1px;
|
|
689
695
|
}
|
|
696
|
+
.-mt-1 {
|
|
697
|
+
margin-top: -0.25rem;
|
|
698
|
+
}
|
|
690
699
|
.mb-0 {
|
|
691
700
|
margin-bottom: 0px;
|
|
692
701
|
}
|
|
@@ -747,6 +756,9 @@ video {
|
|
|
747
756
|
.mr-2 {
|
|
748
757
|
margin-right: 0.5rem;
|
|
749
758
|
}
|
|
759
|
+
.mr-3 {
|
|
760
|
+
margin-right: 0.75rem;
|
|
761
|
+
}
|
|
750
762
|
.mr-4 {
|
|
751
763
|
margin-right: 1rem;
|
|
752
764
|
}
|
|
@@ -944,6 +956,9 @@ video {
|
|
|
944
956
|
.w-44 {
|
|
945
957
|
width: 11rem;
|
|
946
958
|
}
|
|
959
|
+
.w-48 {
|
|
960
|
+
width: 12rem;
|
|
961
|
+
}
|
|
947
962
|
.w-5 {
|
|
948
963
|
width: 1.25rem;
|
|
949
964
|
}
|
|
@@ -1241,6 +1256,9 @@ video {
|
|
|
1241
1256
|
.rounded-none {
|
|
1242
1257
|
border-radius: 0px;
|
|
1243
1258
|
}
|
|
1259
|
+
.rounded-xl {
|
|
1260
|
+
border-radius: 0.75rem;
|
|
1261
|
+
}
|
|
1244
1262
|
.rounded-b {
|
|
1245
1263
|
border-bottom-right-radius: var(--border-radius);
|
|
1246
1264
|
border-bottom-left-radius: var(--border-radius);
|
|
@@ -1429,6 +1447,10 @@ video {
|
|
|
1429
1447
|
--tw-border-opacity: 1;
|
|
1430
1448
|
border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
|
|
1431
1449
|
}
|
|
1450
|
+
.bg-black {
|
|
1451
|
+
--tw-bg-opacity: 1;
|
|
1452
|
+
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
|
1453
|
+
}
|
|
1432
1454
|
.bg-blue-100 {
|
|
1433
1455
|
--tw-bg-opacity: 1;
|
|
1434
1456
|
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
|
|
@@ -1847,9 +1869,16 @@ video {
|
|
|
1847
1869
|
--tw-text-opacity: 1;
|
|
1848
1870
|
color: rgb(161 98 7 / var(--tw-text-opacity));
|
|
1849
1871
|
}
|
|
1872
|
+
.underline {
|
|
1873
|
+
-webkit-text-decoration-line: underline;
|
|
1874
|
+
text-decoration-line: underline;
|
|
1875
|
+
}
|
|
1850
1876
|
.underline-offset-4 {
|
|
1851
1877
|
text-underline-offset: 4px;
|
|
1852
1878
|
}
|
|
1879
|
+
.underline-offset-8 {
|
|
1880
|
+
text-underline-offset: 8px;
|
|
1881
|
+
}
|
|
1853
1882
|
.opacity-0 {
|
|
1854
1883
|
opacity: 0;
|
|
1855
1884
|
}
|