@sikka/hawa 0.1.86 → 0.1.88
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.d.mts +23 -4
- package/dist/index.d.ts +23 -4
- package/dist/index.js +404 -309
- package/dist/index.mjs +317 -242
- package/dist/styles.css +16 -66
- package/package.json +1 -1
- package/src/blocks/AuthForms/AppLanding.tsx +17 -7
- package/src/blocks/AuthForms/CheckEmail.tsx +54 -0
- package/src/blocks/AuthForms/SignInForm.tsx +1 -1
- package/src/blocks/AuthForms/SignUpForm.tsx +1 -1
- package/src/blocks/AuthForms/index.ts +1 -0
- package/src/blocks/Misc/NoPermission.tsx +1 -5
- package/src/blocks/Payment/CreditCardForm.tsx +20 -19
- package/src/elements/Carousel.tsx +5 -155
- package/src/elements/DropdownMenu.tsx +5 -0
- package/src/elements/HawaAdCard.tsx +61 -23
- package/src/layout/Footer.tsx +50 -13
- package/src/styles.css +16 -66
- package/src/translations/ar.json +4 -1
- package/src/translations/en.json +4 -1
|
@@ -1,14 +1,40 @@
|
|
|
1
1
|
import clsx from "clsx"
|
|
2
|
-
import React, { FC } from "react"
|
|
2
|
+
import React, { FC, useState, useEffect, useRef } from "react"
|
|
3
3
|
|
|
4
4
|
type AdCardTypes = {
|
|
5
5
|
orientation: "vertical" | "horizontal"
|
|
6
6
|
title: string
|
|
7
7
|
description: string
|
|
8
8
|
imageURL: string
|
|
9
|
-
handleHide
|
|
9
|
+
handleHide?: any
|
|
10
|
+
handleCantHide?: () => void
|
|
11
|
+
canHide: boolean
|
|
10
12
|
}
|
|
11
13
|
export const HawaAdCard: FC<AdCardTypes> = ({ orientation, ...props }) => {
|
|
14
|
+
const adRef = useRef(null)
|
|
15
|
+
const [closed, setClosed] = useState(false)
|
|
16
|
+
|
|
17
|
+
let duration = 0
|
|
18
|
+
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
if (duration) {
|
|
21
|
+
//To change opacity and hide the component
|
|
22
|
+
const timeoutHide = setTimeout(() => {
|
|
23
|
+
setClosed(true)
|
|
24
|
+
}, duration)
|
|
25
|
+
//To destroy the component after hiding it
|
|
26
|
+
const timeoutDestroy = setTimeout(() => {
|
|
27
|
+
setClosed(true)
|
|
28
|
+
adRef.current.removeChild(adRef.current.children[0])
|
|
29
|
+
}, duration + 1000)
|
|
30
|
+
|
|
31
|
+
return () => {
|
|
32
|
+
clearTimeout(timeoutHide)
|
|
33
|
+
clearTimeout(timeoutDestroy)
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}, [duration])
|
|
37
|
+
|
|
12
38
|
let cardStyles = {
|
|
13
39
|
horizontal:
|
|
14
40
|
"flex flex-row max-w-xl rounded border-gray-200 bg-gray-100 shadow-md p-2 gap-2 items-center relative dark:border-gray-700 dark:bg-gray-800 ",
|
|
@@ -22,28 +48,40 @@ export const HawaAdCard: FC<AdCardTypes> = ({ orientation, ...props }) => {
|
|
|
22
48
|
}
|
|
23
49
|
|
|
24
50
|
return (
|
|
25
|
-
<div
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<div className="flex aspect-square w-full max-w-fit items-start ">
|
|
30
|
-
<img
|
|
31
|
-
src={
|
|
32
|
-
props.imageURL ? props.imageURL : "https://via.placeholder.com/50"
|
|
33
|
-
}
|
|
34
|
-
className={imageStyles[orientation]}
|
|
35
|
-
/>
|
|
36
|
-
</div>
|
|
37
|
-
<div className="w-full text-xs">
|
|
38
|
-
<div className="font-bold">{props.title}</div>
|
|
39
|
-
<div className="text-[12px]">{props.description}</div>
|
|
40
|
-
</div>
|
|
41
|
-
<span
|
|
42
|
-
onClick={props.handleHide}
|
|
43
|
-
className="absolute right-0 top-0 h-fit cursor-pointer select-none rounded-bl-lg rounded-tr-lg bg-blue-100 px-2.5 py-0.5 text-[10px] font-semibold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
|
|
51
|
+
<div ref={adRef}>
|
|
52
|
+
<div
|
|
53
|
+
className={clsx(cardStyles[orientation], "dark:text-white")}
|
|
54
|
+
{...props}
|
|
44
55
|
>
|
|
45
|
-
|
|
46
|
-
|
|
56
|
+
<div className="flex aspect-square w-full max-w-fit items-start ">
|
|
57
|
+
<img
|
|
58
|
+
src={
|
|
59
|
+
props.imageURL ? props.imageURL : "https://via.placeholder.com/50"
|
|
60
|
+
}
|
|
61
|
+
className={imageStyles[orientation]}
|
|
62
|
+
/>
|
|
63
|
+
</div>
|
|
64
|
+
<div className="w-full text-xs">
|
|
65
|
+
<div className="font-bold">{props.title}</div>
|
|
66
|
+
<div className="text-[12px]">{props.description}</div>
|
|
67
|
+
</div>
|
|
68
|
+
<span
|
|
69
|
+
// onClick={props.handleHide}
|
|
70
|
+
onClick={() => {
|
|
71
|
+
if (props.canHide) {
|
|
72
|
+
setClosed(true)
|
|
73
|
+
setTimeout(() => {
|
|
74
|
+
adRef.current.removeChild(adRef.current.children[0])
|
|
75
|
+
}, 200)
|
|
76
|
+
} else {
|
|
77
|
+
props.handleCantHide()
|
|
78
|
+
}
|
|
79
|
+
}}
|
|
80
|
+
className="absolute right-0 top-0 h-fit cursor-pointer select-none rounded-bl-lg rounded-tr-lg bg-blue-100 px-2.5 py-0.5 text-[10px] font-semibold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
|
|
81
|
+
>
|
|
82
|
+
Hide
|
|
83
|
+
</span>
|
|
84
|
+
</div>
|
|
47
85
|
</div>
|
|
48
86
|
)
|
|
49
87
|
}
|
package/src/layout/Footer.tsx
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import { BsInstagram, BsTwitter } from "react-icons/bs"
|
|
2
2
|
import { FaSnapchatGhost, FaTiktok } from "react-icons/fa"
|
|
3
|
+
import { Button } from "../elements"
|
|
4
|
+
import { cn } from "../util"
|
|
3
5
|
|
|
4
6
|
type FooterTypes = {
|
|
5
7
|
logoText?: string
|
|
6
8
|
logoURL?: string
|
|
9
|
+
copyRights?: string
|
|
10
|
+
variation?: "default" | "minimal"
|
|
7
11
|
socialLinks?: {
|
|
8
12
|
twitter?: string
|
|
9
13
|
instagram?: string
|
|
@@ -19,12 +23,45 @@ type FooterTypes = {
|
|
|
19
23
|
}[]
|
|
20
24
|
}
|
|
21
25
|
|
|
22
|
-
export const Footer: React.FunctionComponent<FooterTypes> = ({
|
|
26
|
+
export const Footer: React.FunctionComponent<FooterTypes> = ({
|
|
27
|
+
variation = "default",
|
|
28
|
+
...props
|
|
29
|
+
}) => {
|
|
30
|
+
let variationStyles = {
|
|
31
|
+
default: "rounded border",
|
|
32
|
+
minimal: "border-t",
|
|
33
|
+
}
|
|
23
34
|
return (
|
|
24
|
-
<div
|
|
25
|
-
{
|
|
26
|
-
|
|
27
|
-
|
|
35
|
+
<div
|
|
36
|
+
className={cn(
|
|
37
|
+
"flex w-full flex-row items-center justify-between gap-8 rounded bg-background p-4",
|
|
38
|
+
variationStyles[variation]
|
|
39
|
+
)}
|
|
40
|
+
>
|
|
41
|
+
<div className="flex flex-col items-center gap-2">
|
|
42
|
+
<div className="flex flex-row items-center gap-2">
|
|
43
|
+
{props.logoURL && (
|
|
44
|
+
<div>
|
|
45
|
+
<img className="h-8" src={props.logoURL} />
|
|
46
|
+
</div>
|
|
47
|
+
)}
|
|
48
|
+
{props.logoText && (
|
|
49
|
+
<div>
|
|
50
|
+
<div className="text-2xl font-bold text-primary">
|
|
51
|
+
{props.logoText}
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
)}
|
|
55
|
+
</div>
|
|
56
|
+
{props.copyRights && props.footerLinks && (
|
|
57
|
+
<div className="text-xs text-muted-foreground">
|
|
58
|
+
© {props.copyRights} {new Date().getFullYear()}
|
|
59
|
+
</div>
|
|
60
|
+
)}
|
|
61
|
+
</div>
|
|
62
|
+
{props.copyRights && !props.footerLinks && (
|
|
63
|
+
<div className="text-xs text-muted-foreground">
|
|
64
|
+
© {props.copyRights} {new Date().getFullYear()}
|
|
28
65
|
</div>
|
|
29
66
|
)}
|
|
30
67
|
{props.footerLinks?.map((pagesSection) => (
|
|
@@ -45,24 +82,24 @@ export const Footer: React.FunctionComponent<FooterTypes> = ({ ...props }) => {
|
|
|
45
82
|
{props.socialLinks && (
|
|
46
83
|
<div className="flex flex-row gap-2">
|
|
47
84
|
{props.socialLinks.twitter && (
|
|
48
|
-
<
|
|
85
|
+
<Button size="smallIcon" variant="ghost">
|
|
49
86
|
<BsTwitter />
|
|
50
|
-
</
|
|
87
|
+
</Button>
|
|
51
88
|
)}
|
|
52
89
|
{props.socialLinks.instagram && (
|
|
53
|
-
<
|
|
90
|
+
<Button size="smallIcon" variant="ghost">
|
|
54
91
|
<BsInstagram />
|
|
55
|
-
</
|
|
92
|
+
</Button>
|
|
56
93
|
)}
|
|
57
94
|
{props.socialLinks.tiktok && (
|
|
58
|
-
<
|
|
95
|
+
<Button size="smallIcon" variant="ghost">
|
|
59
96
|
<FaTiktok />
|
|
60
|
-
</
|
|
97
|
+
</Button>
|
|
61
98
|
)}
|
|
62
99
|
{props.socialLinks.snapchat && (
|
|
63
|
-
<
|
|
100
|
+
<Button size="smallIcon" variant="ghost">
|
|
64
101
|
<FaSnapchatGhost />
|
|
65
|
-
</
|
|
102
|
+
</Button>
|
|
66
103
|
)}
|
|
67
104
|
</div>
|
|
68
105
|
)}
|
package/src/styles.css
CHANGED
|
@@ -1078,9 +1078,6 @@ video {
|
|
|
1078
1078
|
.hidden {
|
|
1079
1079
|
display: none;
|
|
1080
1080
|
}
|
|
1081
|
-
.aspect-\[2\/3\] {
|
|
1082
|
-
aspect-ratio: 2/3;
|
|
1083
|
-
}
|
|
1084
1081
|
.aspect-square {
|
|
1085
1082
|
aspect-ratio: 1 / 1;
|
|
1086
1083
|
}
|
|
@@ -1099,12 +1096,12 @@ video {
|
|
|
1099
1096
|
.h-11 {
|
|
1100
1097
|
height: 2.75rem;
|
|
1101
1098
|
}
|
|
1102
|
-
.h-12 {
|
|
1103
|
-
height: 3rem;
|
|
1104
|
-
}
|
|
1105
1099
|
.h-14 {
|
|
1106
1100
|
height: 3.5rem;
|
|
1107
1101
|
}
|
|
1102
|
+
.h-16 {
|
|
1103
|
+
height: 4rem;
|
|
1104
|
+
}
|
|
1108
1105
|
.h-2 {
|
|
1109
1106
|
height: 0.5rem;
|
|
1110
1107
|
}
|
|
@@ -1234,6 +1231,9 @@ video {
|
|
|
1234
1231
|
.min-h-\[80px\] {
|
|
1235
1232
|
min-height: 80px;
|
|
1236
1233
|
}
|
|
1234
|
+
.min-h-screen {
|
|
1235
|
+
min-height: 100vh;
|
|
1236
|
+
}
|
|
1237
1237
|
.w-0 {
|
|
1238
1238
|
width: 0px;
|
|
1239
1239
|
}
|
|
@@ -1258,6 +1258,9 @@ video {
|
|
|
1258
1258
|
.w-14 {
|
|
1259
1259
|
width: 3.5rem;
|
|
1260
1260
|
}
|
|
1261
|
+
.w-16 {
|
|
1262
|
+
width: 4rem;
|
|
1263
|
+
}
|
|
1261
1264
|
.w-2 {
|
|
1262
1265
|
width: 0.5rem;
|
|
1263
1266
|
}
|
|
@@ -1315,6 +1318,9 @@ video {
|
|
|
1315
1318
|
.w-\[1\.2rem\] {
|
|
1316
1319
|
width: 1.2rem;
|
|
1317
1320
|
}
|
|
1321
|
+
.w-\[1000px\] {
|
|
1322
|
+
width: 1000px;
|
|
1323
|
+
}
|
|
1318
1324
|
.w-\[12px\] {
|
|
1319
1325
|
width: 12px;
|
|
1320
1326
|
}
|
|
@@ -1351,15 +1357,9 @@ video {
|
|
|
1351
1357
|
.w-\[42px\] {
|
|
1352
1358
|
width: 42px;
|
|
1353
1359
|
}
|
|
1354
|
-
.w-\[500px\] {
|
|
1355
|
-
width: 500px;
|
|
1356
|
-
}
|
|
1357
1360
|
.w-\[64px\] {
|
|
1358
1361
|
width: 64px;
|
|
1359
1362
|
}
|
|
1360
|
-
.w-\[90\%\] {
|
|
1361
|
-
width: 90%;
|
|
1362
|
-
}
|
|
1363
1363
|
.w-\[calc\(1\%\)\] {
|
|
1364
1364
|
width: calc(1%);
|
|
1365
1365
|
}
|
|
@@ -1582,19 +1582,6 @@ video {
|
|
|
1582
1582
|
.snap-x {
|
|
1583
1583
|
scroll-snap-type: x var(--tw-scroll-snap-strictness);
|
|
1584
1584
|
}
|
|
1585
|
-
.snap-mandatory {
|
|
1586
|
-
--tw-scroll-snap-strictness: mandatory;
|
|
1587
|
-
}
|
|
1588
|
-
.snap-start {
|
|
1589
|
-
scroll-snap-align: start;
|
|
1590
|
-
}
|
|
1591
|
-
.snap-always {
|
|
1592
|
-
scroll-snap-stop: always;
|
|
1593
|
-
}
|
|
1594
|
-
.scroll-px-10 {
|
|
1595
|
-
scroll-padding-left: 2.5rem;
|
|
1596
|
-
scroll-padding-right: 2.5rem;
|
|
1597
|
-
}
|
|
1598
1585
|
.appearance-none {
|
|
1599
1586
|
-webkit-appearance: none;
|
|
1600
1587
|
-moz-appearance: none;
|
|
@@ -1775,15 +1762,9 @@ video {
|
|
|
1775
1762
|
.overflow-y-clip {
|
|
1776
1763
|
overflow-y: clip;
|
|
1777
1764
|
}
|
|
1778
|
-
.overflow-x-scroll {
|
|
1779
|
-
overflow-x: scroll;
|
|
1780
|
-
}
|
|
1781
1765
|
.overflow-y-scroll {
|
|
1782
1766
|
overflow-y: scroll;
|
|
1783
1767
|
}
|
|
1784
|
-
.scroll-smooth {
|
|
1785
|
-
scroll-behavior: smooth;
|
|
1786
|
-
}
|
|
1787
1768
|
.truncate {
|
|
1788
1769
|
overflow: hidden;
|
|
1789
1770
|
text-overflow: ellipsis;
|
|
@@ -2033,10 +2014,6 @@ video {
|
|
|
2033
2014
|
--tw-bg-opacity: 1;
|
|
2034
2015
|
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
|
|
2035
2016
|
}
|
|
2036
|
-
.bg-blue-200 {
|
|
2037
|
-
--tw-bg-opacity: 1;
|
|
2038
|
-
background-color: rgb(191 219 254 / var(--tw-bg-opacity));
|
|
2039
|
-
}
|
|
2040
2017
|
.bg-blue-300 {
|
|
2041
2018
|
--tw-bg-opacity: 1;
|
|
2042
2019
|
background-color: rgb(147 197 253 / var(--tw-bg-opacity));
|
|
@@ -2123,10 +2100,6 @@ video {
|
|
|
2123
2100
|
--tw-bg-opacity: 1;
|
|
2124
2101
|
background-color: rgb(220 252 231 / var(--tw-bg-opacity));
|
|
2125
2102
|
}
|
|
2126
|
-
.bg-green-300 {
|
|
2127
|
-
--tw-bg-opacity: 1;
|
|
2128
|
-
background-color: rgb(134 239 172 / var(--tw-bg-opacity));
|
|
2129
|
-
}
|
|
2130
2103
|
.bg-green-500 {
|
|
2131
2104
|
--tw-bg-opacity: 1;
|
|
2132
2105
|
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
|
@@ -2144,10 +2117,6 @@ video {
|
|
|
2144
2117
|
.bg-muted {
|
|
2145
2118
|
background-color: hsl(var(--muted));
|
|
2146
2119
|
}
|
|
2147
|
-
.bg-orange-100 {
|
|
2148
|
-
--tw-bg-opacity: 1;
|
|
2149
|
-
background-color: rgb(255 237 213 / var(--tw-bg-opacity));
|
|
2150
|
-
}
|
|
2151
2120
|
.bg-orange-400 {
|
|
2152
2121
|
--tw-bg-opacity: 1;
|
|
2153
2122
|
background-color: rgb(251 146 60 / var(--tw-bg-opacity));
|
|
@@ -2194,10 +2163,6 @@ video {
|
|
|
2194
2163
|
--tw-bg-opacity: 1;
|
|
2195
2164
|
background-color: rgb(127 29 29 / var(--tw-bg-opacity));
|
|
2196
2165
|
}
|
|
2197
|
-
.bg-rose-100 {
|
|
2198
|
-
--tw-bg-opacity: 1;
|
|
2199
|
-
background-color: rgb(255 228 230 / var(--tw-bg-opacity));
|
|
2200
|
-
}
|
|
2201
2166
|
.bg-secondary {
|
|
2202
2167
|
background-color: hsl(var(--secondary));
|
|
2203
2168
|
}
|
|
@@ -2242,17 +2207,9 @@ video {
|
|
|
2242
2207
|
.bg-opacity-80 {
|
|
2243
2208
|
--tw-bg-opacity: 0.8;
|
|
2244
2209
|
}
|
|
2245
|
-
.bg-gradient-to-t {
|
|
2246
|
-
background-image: linear-gradient(to top, var(--tw-gradient-stops));
|
|
2247
|
-
}
|
|
2248
2210
|
.bg-none {
|
|
2249
2211
|
background-image: none;
|
|
2250
2212
|
}
|
|
2251
|
-
.from-black {
|
|
2252
|
-
--tw-gradient-from: #000 var(--tw-gradient-from-position);
|
|
2253
|
-
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
|
|
2254
|
-
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
2255
|
-
}
|
|
2256
2213
|
.bg-cover {
|
|
2257
2214
|
background-size: cover;
|
|
2258
2215
|
}
|
|
@@ -2728,9 +2685,6 @@ video {
|
|
|
2728
2685
|
--tw-text-opacity: 1;
|
|
2729
2686
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
2730
2687
|
}
|
|
2731
|
-
.text-white\/50 {
|
|
2732
|
-
color: rgb(255 255 255 / 0.5);
|
|
2733
|
-
}
|
|
2734
2688
|
.text-yellow-700 {
|
|
2735
2689
|
--tw-text-opacity: 1;
|
|
2736
2690
|
color: rgb(161 98 7 / var(--tw-text-opacity));
|
|
@@ -4071,10 +4025,6 @@ body {
|
|
|
4071
4025
|
display: flex;
|
|
4072
4026
|
}
|
|
4073
4027
|
|
|
4074
|
-
.sm\:w-\[44\%\] {
|
|
4075
|
-
width: 44%;
|
|
4076
|
-
}
|
|
4077
|
-
|
|
4078
4028
|
.sm\:columns-2 {
|
|
4079
4029
|
-moz-columns: 2;
|
|
4080
4030
|
columns: 2;
|
|
@@ -4186,10 +4136,6 @@ body {
|
|
|
4186
4136
|
width: 12rem;
|
|
4187
4137
|
}
|
|
4188
4138
|
|
|
4189
|
-
.md\:w-\[30\%\] {
|
|
4190
|
-
width: 30%;
|
|
4191
|
-
}
|
|
4192
|
-
|
|
4193
4139
|
.md\:w-full {
|
|
4194
4140
|
width: 100%;
|
|
4195
4141
|
}
|
|
@@ -4219,6 +4165,10 @@ body {
|
|
|
4219
4165
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
4220
4166
|
}
|
|
4221
4167
|
|
|
4168
|
+
.md\:grid-cols-3 {
|
|
4169
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
4170
|
+
}
|
|
4171
|
+
|
|
4222
4172
|
.md\:flex-row {
|
|
4223
4173
|
flex-direction: row;
|
|
4224
4174
|
}
|
package/src/translations/ar.json
CHANGED
|
@@ -43,5 +43,8 @@
|
|
|
43
43
|
"password": "كلمة المرور",
|
|
44
44
|
"settings": "الإعدادات",
|
|
45
45
|
"display": "المظهر",
|
|
46
|
-
"option": "خيار"
|
|
46
|
+
"option": "خيار",
|
|
47
|
+
"checkEmail": "تحقق من بريدك الإلكتروني",
|
|
48
|
+
"resendEmail": "إعادة إرسال البريد الإلكتروني",
|
|
49
|
+
"pleaseVerify": "شكرًا لتسجيلك! لإتمام عملية التسجيل، قمنا بإرسال بريد إلكتروني للتحقق إلى العنوان الذي قدمته. يُرجى التحقق من صندوق الوارد الخاص بك واتباع التعليمات الموجودة في البريد الإلكتروني لتنشيط حسابك"
|
|
47
50
|
}
|
package/src/translations/en.json
CHANGED
|
@@ -42,5 +42,8 @@
|
|
|
42
42
|
"password": "Password",
|
|
43
43
|
"settings": "Settings",
|
|
44
44
|
"display": "Display",
|
|
45
|
-
"option": "Option"
|
|
45
|
+
"option": "Option",
|
|
46
|
+
"checkEmail": "Check you email",
|
|
47
|
+
"resendEmail": "Resend Email",
|
|
48
|
+
"pleaseVerify": "Thank you for signing up! To complete your registration, we've sent a verification email to the address you provided. Please check your inbox and follow the instructions in the email to activate your account."
|
|
46
49
|
}
|