@sikka/hawa 0.0.172 → 0.0.173
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 +10 -24
- package/es/index.es.js +1 -1
- package/es/layout/HawaSiteLayout.d.ts +20 -6
- package/lib/index.js +1 -1
- package/lib/layout/HawaSiteLayout.d.ts +20 -6
- package/package.json +1 -1
- package/src/blocks/AuthForms/SignInForm.tsx +1 -0
- package/src/blocks/Misc/Testimonial.tsx +1 -1
- package/src/elements/HawaButton.tsx +2 -2
- package/src/layout/HawaSiteLayout.tsx +125 -278
- package/src/styles.css +10 -24
- package/src/tailwind.css +1 -1
- package/es/stories/LayoutStories/SimpleGrid.stories.d.ts +0 -4
- package/lib/stories/LayoutStories/SimpleGrid.stories.d.ts +0 -4
|
@@ -1,9 +1,23 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
type
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
type HawaSiteLayoutTypes = {
|
|
3
|
+
navItems: {
|
|
4
|
+
label: string;
|
|
5
|
+
icon: any;
|
|
6
|
+
slug: string;
|
|
7
|
+
action: () => void;
|
|
8
|
+
subItems?: any;
|
|
9
|
+
}[];
|
|
10
|
+
direction?: "rtl" | "ltr";
|
|
11
|
+
currentPage: string;
|
|
12
|
+
pageTitle?: string;
|
|
13
|
+
logoSymbol?: any;
|
|
14
|
+
logoLink?: string;
|
|
15
|
+
logoText?: any;
|
|
16
|
+
children?: any;
|
|
17
|
+
stickyNav?: boolean;
|
|
18
|
+
topBar?: boolean;
|
|
19
|
+
navigationSize?: "sm" | "md" | "lg";
|
|
20
|
+
floating?: boolean;
|
|
7
21
|
};
|
|
8
|
-
export declare const HawaSiteLayout: React.FunctionComponent<
|
|
22
|
+
export declare const HawaSiteLayout: React.FunctionComponent<HawaSiteLayoutTypes>;
|
|
9
23
|
export {};
|
package/package.json
CHANGED
|
@@ -11,7 +11,7 @@ export const Testimonial: React.FunctionComponent<TEmptyState> = ({
|
|
|
11
11
|
}) => {
|
|
12
12
|
return (
|
|
13
13
|
<div
|
|
14
|
-
className="
|
|
14
|
+
className="flex flex-col gap-2 rounded border-2 border-gray-200 bg-white p-4"
|
|
15
15
|
// style={{ width: "249.708px", marginRight: "24px" }}
|
|
16
16
|
>
|
|
17
17
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
|
|
@@ -31,7 +31,7 @@ const sizeStyles = {
|
|
|
31
31
|
const widthStyles = {
|
|
32
32
|
full: "w-full flex justify-center px-5 py-2.5 text-center inline-flex items-center",
|
|
33
33
|
normal:
|
|
34
|
-
"w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-
|
|
34
|
+
"w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-darker dark:hover:brightness-90 dark:focus:ring-primary-800",
|
|
35
35
|
half: "w-1/2",
|
|
36
36
|
}
|
|
37
37
|
const variantStyles = {
|
|
@@ -42,7 +42,7 @@ const variantStyles = {
|
|
|
42
42
|
const colorStyles = {
|
|
43
43
|
contained: {
|
|
44
44
|
default:
|
|
45
|
-
"text-neutral-900 hover:bg-buttonPrimary-darker bg-buttonPrimary-default text-white",
|
|
45
|
+
"text-neutral-900 bg-buttonPrimary-default hover:bg-buttonPrimary-darker bg-buttonPrimary-default text-white",
|
|
46
46
|
primary:
|
|
47
47
|
"text-white bg-buttonPrimary-default hover:bg-buttonPrimary-darker transition-all",
|
|
48
48
|
secondary:
|
|
@@ -1,297 +1,144 @@
|
|
|
1
1
|
import clsx from "clsx"
|
|
2
|
-
import React, { useState } from "react"
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
</svg>
|
|
28
|
-
</button>
|
|
29
|
-
)
|
|
30
|
-
}
|
|
31
|
-
const ProfileDropdown = (props: any) => {
|
|
32
|
-
return (
|
|
33
|
-
<div
|
|
34
|
-
id="userDropdown"
|
|
35
|
-
className="z-10 hidden w-44 divide-y divide-gray-100 rounded bg-white shadow dark:divide-gray-600 dark:bg-gray-700"
|
|
36
|
-
data-popper-reference-hidden=""
|
|
37
|
-
data-popper-escaped=""
|
|
38
|
-
data-popper-placement="bottom-start"
|
|
39
|
-
// style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 295.5px, 0px);"
|
|
40
|
-
>
|
|
41
|
-
<div className="py-3 px-4 text-sm text-gray-900 dark:text-white">
|
|
42
|
-
<div>{props.username}</div>
|
|
43
|
-
<div className="truncate font-medium">{props.userEmail}</div>
|
|
44
|
-
</div>
|
|
45
|
-
<ul
|
|
46
|
-
className="py-1 text-sm text-gray-700 dark:text-gray-200"
|
|
47
|
-
aria-labelledby="avatarButton"
|
|
48
|
-
>
|
|
49
|
-
{props.profileItems.map((it: any, o) => {
|
|
50
|
-
return <ProfileItem key={o} text={it.text} link={it.slug} />
|
|
51
|
-
})}
|
|
52
|
-
</ul>
|
|
53
|
-
<div className="py-1">
|
|
54
|
-
<a
|
|
55
|
-
href="#"
|
|
56
|
-
className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
|
|
57
|
-
>
|
|
58
|
-
Sign out
|
|
59
|
-
</a>
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
)
|
|
63
|
-
}
|
|
64
|
-
const DrawerContent = (props: any) => {
|
|
65
|
-
return (
|
|
66
|
-
<div
|
|
67
|
-
id="drawer-navigation"
|
|
68
|
-
className="fixed z-40 h-screen w-80 overflow-y-auto bg-white p-4 dark:bg-gray-800"
|
|
69
|
-
tabIndex={-1}
|
|
70
|
-
aria-labelledby="drawer-navigation-label"
|
|
71
|
-
>
|
|
72
|
-
<div
|
|
73
|
-
// href={props.logoHref}
|
|
74
|
-
className="flex items-center"
|
|
75
|
-
>
|
|
76
|
-
<img
|
|
77
|
-
src={
|
|
78
|
-
"https://my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"
|
|
79
|
-
}
|
|
80
|
-
// src={props.logoLink}
|
|
81
|
-
className="h-9"
|
|
82
|
-
/>
|
|
83
|
-
</div>
|
|
84
|
-
<CloseButton />
|
|
85
|
-
<div className="overflow-y-auto py-4">
|
|
86
|
-
<ul className="space-y-2">
|
|
87
|
-
{props.drawerItems.map((item: any, i: any) => {
|
|
88
|
-
return <div key={i}>{item.text}</div>
|
|
89
|
-
})}
|
|
90
|
-
</ul>
|
|
91
|
-
</div>
|
|
92
|
-
</div>
|
|
93
|
-
)
|
|
2
|
+
import React, { useEffect, useRef, useState } from "react"
|
|
3
|
+
import useDiscloser from "../hooks/useDiscloser"
|
|
4
|
+
import { HawaMenu } from "../elements"
|
|
5
|
+
import { HiMenu } from "react-icons/hi"
|
|
6
|
+
import useBreakpoint from "../hooks/useBreakpoint"
|
|
7
|
+
import { FaChevronRight } from "react-icons/fa"
|
|
8
|
+
type HawaSiteLayoutTypes = {
|
|
9
|
+
navItems: {
|
|
10
|
+
label: string
|
|
11
|
+
icon: any
|
|
12
|
+
slug: string
|
|
13
|
+
action: () => void
|
|
14
|
+
subItems?: any
|
|
15
|
+
}[]
|
|
16
|
+
direction?: "rtl" | "ltr"
|
|
17
|
+
currentPage: string
|
|
18
|
+
pageTitle?: string
|
|
19
|
+
logoSymbol?: any
|
|
20
|
+
logoLink?: string
|
|
21
|
+
logoText?: any
|
|
22
|
+
children?: any
|
|
23
|
+
stickyNav?: boolean
|
|
24
|
+
topBar?: boolean
|
|
25
|
+
navigationSize?: "sm" | "md" | "lg"
|
|
26
|
+
floating?: boolean
|
|
94
27
|
}
|
|
95
28
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
href={props.link}
|
|
101
|
-
className="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
|
102
|
-
>
|
|
103
|
-
{props.text}
|
|
104
|
-
</a>
|
|
105
|
-
</li>
|
|
106
|
-
)
|
|
107
|
-
}
|
|
108
|
-
const CloseButton = () => {
|
|
109
|
-
return (
|
|
110
|
-
<button
|
|
111
|
-
type="button"
|
|
112
|
-
data-drawer-dismiss="drawer-navigation"
|
|
113
|
-
aria-controls="drawer-navigation"
|
|
114
|
-
className="absolute top-2.5 right-2.5 inline-flex items-center rounded bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
|
|
115
|
-
>
|
|
116
|
-
<svg
|
|
117
|
-
aria-hidden="true"
|
|
118
|
-
className="h-5 w-5"
|
|
119
|
-
fill="currentColor"
|
|
120
|
-
viewBox="0 0 20 20"
|
|
121
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
122
|
-
>
|
|
123
|
-
<path
|
|
124
|
-
fillRule="evenodd"
|
|
125
|
-
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
126
|
-
clipRule="evenodd"
|
|
127
|
-
></path>
|
|
128
|
-
</svg>
|
|
129
|
-
</button>
|
|
130
|
-
)
|
|
131
|
-
}
|
|
29
|
+
// TODO: fix the drawer top when no topbar
|
|
30
|
+
export const HawaSiteLayout: React.FunctionComponent<HawaSiteLayoutTypes> = ({
|
|
31
|
+
direction = "rtl",
|
|
32
|
+
navigationSize = "md",
|
|
132
33
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
username: string
|
|
136
|
-
userEmail: string
|
|
137
|
-
drawerItems: any
|
|
138
|
-
}
|
|
139
|
-
export const HawaSiteLayout: React.FunctionComponent<LayoutTypes> = (
|
|
140
|
-
props: any
|
|
141
|
-
) => {
|
|
34
|
+
...props
|
|
35
|
+
}) => {
|
|
142
36
|
const [openSideMenu, setOpenSideMenu] = useState(false)
|
|
37
|
+
const [openSubItem, setOpenSubItem] = useState(false)
|
|
38
|
+
const { isOpen, onClose, onOpen } = useDiscloser(false)
|
|
39
|
+
const ref = useRef(null)
|
|
40
|
+
const drawerItemRef = useRef(null)
|
|
41
|
+
|
|
42
|
+
let size
|
|
43
|
+
if (typeof window !== "undefined") {
|
|
44
|
+
size = useBreakpoint()
|
|
45
|
+
} else {
|
|
46
|
+
size = 1200
|
|
47
|
+
}
|
|
48
|
+
const [keepOpen, setKeepOpen] = useState(false)
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
const handleClickOutside = (event) => {
|
|
51
|
+
if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
|
|
52
|
+
// onClickOutside && onClickOutside()
|
|
53
|
+
|
|
54
|
+
setOpenSideMenu(false)
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
document.addEventListener("click", handleClickOutside, true)
|
|
58
|
+
return () => {
|
|
59
|
+
document.removeEventListener("click", handleClickOutside, true)
|
|
60
|
+
}
|
|
61
|
+
}, [keepOpen])
|
|
62
|
+
|
|
63
|
+
//States of the side menu
|
|
64
|
+
//larger than 600
|
|
65
|
+
//as a bar and expands when hover
|
|
66
|
+
//less than 600
|
|
67
|
+
//as nothing and expands as button is clicked
|
|
68
|
+
let ltrDrawerStyle = [
|
|
69
|
+
" fixed top-0 left-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all",
|
|
70
|
+
size > 600 ? "w-14 hover:w-40" : "w-0",
|
|
71
|
+
openSideMenu ? "w-40" : "w-14",
|
|
72
|
+
]
|
|
73
|
+
let rtlDrawerStyle = [
|
|
74
|
+
"fixed top-0 right-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all",
|
|
75
|
+
size > 600 ? "w-14 hover:w-40" : "w-0",
|
|
76
|
+
openSideMenu ? "w-40" : "w-14",
|
|
77
|
+
]
|
|
78
|
+
|
|
79
|
+
let navigationSizeStyles = {
|
|
80
|
+
sm: "h-10",
|
|
81
|
+
md: "",
|
|
82
|
+
lg: "h-24",
|
|
83
|
+
}
|
|
84
|
+
let ltrChildrenStyle = [
|
|
85
|
+
"w-full overflow-y-auto",
|
|
86
|
+
"top-14 h-[calc(100%-3.5rem)]",
|
|
87
|
+
]
|
|
88
|
+
let rtlChildrenStyle = [
|
|
89
|
+
"overflow-y-auto",
|
|
90
|
+
"w-full",
|
|
91
|
+
"top-14 h-[calc(100%-3.5rem)]",
|
|
92
|
+
]
|
|
143
93
|
return (
|
|
144
|
-
<div className="
|
|
145
|
-
<nav className="rounded border-gray-200 dark:bg-gray-900">
|
|
146
|
-
<div className="flex w-full flex-row-reverse items-center justify-between p-3">
|
|
147
|
-
<div
|
|
148
|
-
data-dropdown-toggle="userDropdown"
|
|
149
|
-
data-dropdown-placement="bottom-start"
|
|
150
|
-
className="relative mr-2 h-10 w-10 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-600"
|
|
151
|
-
>
|
|
152
|
-
<svg
|
|
153
|
-
className="absolute -left-1 h-12 w-12 text-gray-400"
|
|
154
|
-
fill="currentColor"
|
|
155
|
-
viewBox="0 0 20 20"
|
|
156
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
157
|
-
>
|
|
158
|
-
<path
|
|
159
|
-
fillRule="evenodd"
|
|
160
|
-
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
|
161
|
-
clipRule="evenodd"
|
|
162
|
-
></path>
|
|
163
|
-
</svg>
|
|
164
|
-
</div>
|
|
165
|
-
<div>{props.pageTitle ?? "Home"}</div>
|
|
166
|
-
<div className="flex flex-row-reverse">
|
|
167
|
-
<button
|
|
168
|
-
data-drawer-target="drawer-navigation"
|
|
169
|
-
data-drawer-show="drawer-navigation"
|
|
170
|
-
aria-controls="drawer-navigation"
|
|
171
|
-
type="button"
|
|
172
|
-
onClick={() => {
|
|
173
|
-
setOpenSideMenu(true)
|
|
174
|
-
console.log("opening side menu")
|
|
175
|
-
}}
|
|
176
|
-
className="inline-flex items-center rounded p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
|
177
|
-
>
|
|
178
|
-
<svg
|
|
179
|
-
aria-hidden="true"
|
|
180
|
-
className="h-6 w-6"
|
|
181
|
-
fill="currentColor"
|
|
182
|
-
viewBox="0 0 20 20"
|
|
183
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
184
|
-
>
|
|
185
|
-
<path
|
|
186
|
-
fillRule="evenodd"
|
|
187
|
-
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
|
|
188
|
-
clipRule="evenodd"
|
|
189
|
-
></path>
|
|
190
|
-
</svg>
|
|
191
|
-
</button>{" "}
|
|
192
|
-
</div>
|
|
193
|
-
</div>
|
|
194
|
-
</nav>
|
|
94
|
+
<div className="h-full w-full">
|
|
195
95
|
<div
|
|
196
|
-
id="drawer-navigation"
|
|
197
|
-
// className="fixed z-40 h-screen w-80 overflow-y-auto bg-white p-4 dark:bg-gray-800"
|
|
198
96
|
className={clsx(
|
|
199
|
-
"flex
|
|
200
|
-
|
|
201
|
-
|
|
97
|
+
"z-30 flex flex-row items-start justify-between bg-layoutPrimary-default transition-all",
|
|
98
|
+
navigationSizeStyles[navigationSize],
|
|
99
|
+
"rounded p-3",
|
|
100
|
+
openSideMenu ? "h-44" : "",
|
|
101
|
+
// props.floating ? "rounded-[30px]" : "rounded",
|
|
102
|
+
props.stickyNav ? "sticky top-2" : "",
|
|
103
|
+
direction === "rtl" ? "flex-row" : "flex-row-reverse"
|
|
202
104
|
)}
|
|
203
|
-
tabIndex={-1}
|
|
204
|
-
aria-labelledby="drawer-navigation-label"
|
|
205
105
|
>
|
|
206
|
-
|
|
106
|
+
{size > 600 ? (
|
|
107
|
+
<div className="flex flex-row gap-2 ">
|
|
108
|
+
{props.navItems?.map(({ label }) => (
|
|
109
|
+
<div className="rounded bg-none p-2 transition-all hover:bg-gray-100">
|
|
110
|
+
{label}
|
|
111
|
+
</div>
|
|
112
|
+
))}
|
|
113
|
+
</div>
|
|
114
|
+
) : (
|
|
115
|
+
<div className="flex items-center justify-center ">
|
|
116
|
+
<div
|
|
117
|
+
onClick={() => setOpenSideMenu(!openSideMenu)}
|
|
118
|
+
className="cursor-pointer rounded p-1 transition-all hover:bg-gray-100"
|
|
119
|
+
>
|
|
120
|
+
<HiMenu size={25} />
|
|
121
|
+
</div>
|
|
122
|
+
{props.pageTitle ? <div>{props.pageTitle}</div> : <div></div>}
|
|
123
|
+
</div>
|
|
124
|
+
)}
|
|
125
|
+
<div className="h-full">
|
|
207
126
|
<img
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
className="h-9"
|
|
127
|
+
className="h-10"
|
|
128
|
+
src={`https://sikka-images.s3.ap-southeast-1.amazonaws.com/seera/seera-horizontal-wordmark-${
|
|
129
|
+
direction === "rtl" ? "ar" : "en"
|
|
130
|
+
}-white.svg`}
|
|
213
131
|
/>
|
|
214
132
|
</div>
|
|
215
|
-
<button
|
|
216
|
-
type="button"
|
|
217
|
-
onClick={() => setOpenSideMenu(false)}
|
|
218
|
-
data-drawer-dismiss="drawer-navigation"
|
|
219
|
-
aria-controls="drawer-navigation"
|
|
220
|
-
className="absolute top-2.5 right-2.5 inline-flex items-center rounded bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
|
|
221
|
-
>
|
|
222
|
-
<svg
|
|
223
|
-
aria-hidden="true"
|
|
224
|
-
className="h-5 w-5"
|
|
225
|
-
fill="currentColor"
|
|
226
|
-
viewBox="0 0 20 20"
|
|
227
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
228
|
-
>
|
|
229
|
-
<path
|
|
230
|
-
fillRule="evenodd"
|
|
231
|
-
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
232
|
-
clipRule="evenodd"
|
|
233
|
-
></path>
|
|
234
|
-
</svg>
|
|
235
|
-
</button>{" "}
|
|
236
|
-
<div className="overflow-y-auto py-4">
|
|
237
|
-
<ul className="space-y-2">
|
|
238
|
-
{props.drawerItems.map((item: any, i: any) => {
|
|
239
|
-
return <div key={i}>{item.text}</div>
|
|
240
|
-
})}
|
|
241
|
-
</ul>
|
|
242
|
-
</div>
|
|
243
133
|
</div>
|
|
244
|
-
<div className="p-3">{props.children}</div>
|
|
245
|
-
</div>
|
|
246
|
-
)
|
|
247
|
-
}
|
|
248
134
|
|
|
249
|
-
const AppLayoutNav = (props) => (
|
|
250
|
-
<nav className="rounded border-gray-200 dark:bg-gray-900">
|
|
251
|
-
<div className="flex w-full flex-row-reverse items-center justify-between p-3">
|
|
252
135
|
<div
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
136
|
+
className={clsx(
|
|
137
|
+
direction === "rtl" ? rtlChildrenStyle : ltrChildrenStyle
|
|
138
|
+
)}
|
|
256
139
|
>
|
|
257
|
-
|
|
258
|
-
className="absolute -left-1 h-12 w-12 text-gray-400"
|
|
259
|
-
fill="currentColor"
|
|
260
|
-
viewBox="0 0 20 20"
|
|
261
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
262
|
-
>
|
|
263
|
-
<path
|
|
264
|
-
fillRule="evenodd"
|
|
265
|
-
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
|
266
|
-
clipRule="evenodd"
|
|
267
|
-
></path>
|
|
268
|
-
</svg>
|
|
269
|
-
</div>
|
|
270
|
-
<div>{props.pageTitle ?? "Home"}</div>
|
|
271
|
-
<div className="flex flex-row-reverse">
|
|
272
|
-
<button
|
|
273
|
-
data-drawer-target="drawer-navigation"
|
|
274
|
-
data-drawer-show="drawer-navigation"
|
|
275
|
-
aria-controls="drawer-navigation"
|
|
276
|
-
type="button"
|
|
277
|
-
onClick={() => props.handleClick()}
|
|
278
|
-
className="inline-flex items-center rounded p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
|
279
|
-
>
|
|
280
|
-
<svg
|
|
281
|
-
aria-hidden="true"
|
|
282
|
-
className="h-6 w-6"
|
|
283
|
-
fill="currentColor"
|
|
284
|
-
viewBox="0 0 20 20"
|
|
285
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
286
|
-
>
|
|
287
|
-
<path
|
|
288
|
-
fillRule="evenodd"
|
|
289
|
-
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
|
|
290
|
-
clipRule="evenodd"
|
|
291
|
-
></path>
|
|
292
|
-
</svg>
|
|
293
|
-
</button>{" "}
|
|
140
|
+
{props.children}
|
|
294
141
|
</div>
|
|
295
142
|
</div>
|
|
296
|
-
|
|
297
|
-
|
|
143
|
+
)
|
|
144
|
+
}
|
package/src/styles.css
CHANGED
|
@@ -384,7 +384,7 @@ video {
|
|
|
384
384
|
--button-secondary: #ffc011;
|
|
385
385
|
--button-secondary-darker: #b48d24;
|
|
386
386
|
|
|
387
|
-
--border-radius:
|
|
387
|
+
--border-radius: 13px;
|
|
388
388
|
}
|
|
389
389
|
input[type="number"]::-webkit-inner-spin-button,
|
|
390
390
|
input[type="number"]::-webkit-outer-spin-button {
|
|
@@ -900,6 +900,9 @@ video {
|
|
|
900
900
|
.h-\[1px\] {
|
|
901
901
|
height: 1px;
|
|
902
902
|
}
|
|
903
|
+
.h-44 {
|
|
904
|
+
height: 11rem;
|
|
905
|
+
}
|
|
903
906
|
.h-96 {
|
|
904
907
|
height: 24rem;
|
|
905
908
|
}
|
|
@@ -986,12 +989,6 @@ video {
|
|
|
986
989
|
.w-10\/12 {
|
|
987
990
|
width: 83.333333%;
|
|
988
991
|
}
|
|
989
|
-
.w-80 {
|
|
990
|
-
width: 20rem;
|
|
991
|
-
}
|
|
992
|
-
.w-12 {
|
|
993
|
-
width: 3rem;
|
|
994
|
-
}
|
|
995
992
|
.min-w-min {
|
|
996
993
|
min-width: -moz-min-content;
|
|
997
994
|
min-width: min-content;
|
|
@@ -1161,11 +1158,6 @@ video {
|
|
|
1161
1158
|
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
|
|
1162
1159
|
margin-bottom: calc(0px * var(--tw-space-y-reverse));
|
|
1163
1160
|
}
|
|
1164
|
-
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
|
|
1165
|
-
--tw-space-y-reverse: 0;
|
|
1166
|
-
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
|
|
1167
|
-
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
|
|
1168
|
-
}
|
|
1169
1161
|
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
|
1170
1162
|
--tw-divide-y-reverse: 0;
|
|
1171
1163
|
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
|
@@ -1226,6 +1218,9 @@ video {
|
|
|
1226
1218
|
.rounded-none {
|
|
1227
1219
|
border-radius: 0px;
|
|
1228
1220
|
}
|
|
1221
|
+
.rounded-\[30px\] {
|
|
1222
|
+
border-radius: 30px;
|
|
1223
|
+
}
|
|
1229
1224
|
.rounded-3xl {
|
|
1230
1225
|
border-radius: 1.5rem;
|
|
1231
1226
|
}
|
|
@@ -1526,6 +1521,9 @@ video {
|
|
|
1526
1521
|
.bg-\[url\(\'https\:\/\/via\.placeholder\.com\/50\'\)\] {
|
|
1527
1522
|
background-image: url('https://via.placeholder.com/50');
|
|
1528
1523
|
}
|
|
1524
|
+
.bg-none {
|
|
1525
|
+
background-image: none;
|
|
1526
|
+
}
|
|
1529
1527
|
.bg-cover {
|
|
1530
1528
|
background-size: cover;
|
|
1531
1529
|
}
|
|
@@ -1619,10 +1617,6 @@ video {
|
|
|
1619
1617
|
padding-top: 0.75rem;
|
|
1620
1618
|
padding-bottom: 0.75rem;
|
|
1621
1619
|
}
|
|
1622
|
-
.py-4 {
|
|
1623
|
-
padding-top: 1rem;
|
|
1624
|
-
padding-bottom: 1rem;
|
|
1625
|
-
}
|
|
1626
1620
|
.py-5 {
|
|
1627
1621
|
padding-top: 1.25rem;
|
|
1628
1622
|
padding-bottom: 1.25rem;
|
|
@@ -1666,9 +1660,6 @@ video {
|
|
|
1666
1660
|
.align-middle {
|
|
1667
1661
|
vertical-align: middle;
|
|
1668
1662
|
}
|
|
1669
|
-
.font-plex {
|
|
1670
|
-
font-family: IBM Plex Sans Arabic;
|
|
1671
|
-
}
|
|
1672
1663
|
.text-sm {
|
|
1673
1664
|
font-size: 0.875rem;
|
|
1674
1665
|
line-height: 1.25rem;
|
|
@@ -2157,11 +2148,6 @@ body {
|
|
|
2157
2148
|
flex-direction: row-reverse;
|
|
2158
2149
|
}
|
|
2159
2150
|
|
|
2160
|
-
.dark .dark\:divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
|
|
2161
|
-
--tw-divide-opacity: 1;
|
|
2162
|
-
border-color: rgb(75 85 99 / var(--tw-divide-opacity));
|
|
2163
|
-
}
|
|
2164
|
-
|
|
2165
2151
|
.dark .dark\:border-gray-700 {
|
|
2166
2152
|
--tw-border-opacity: 1;
|
|
2167
2153
|
border-color: rgb(55 65 81 / var(--tw-border-opacity));
|
package/src/tailwind.css
CHANGED