@sikka/hawa 0.0.113 → 0.0.116

package/src/layout/HawaSiteLayout.tsx

@@ -0,0 +1,302 @@
+import clsx from "clsx"
+import React, { useState } from "react"
+import HawaDrawerItem from "../elements/HawaDrawerItem"
+
+const MenuButton = ({ handleClick }) => {
+  return (
+    <button
+      data-drawer-target="drawer-navigation"
+      data-drawer-show="drawer-navigation"
+      aria-controls="drawer-navigation"
+      type="button"
+      onClick={handleClick()}
+      className="inline-flex items-center rounded-lg 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"
+    >
+      {/* <span className="sr-only">Open main menu</span> */}
+      <svg
+        aria-hidden="true"
+        className="h-6 w-6"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          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"
+          clip-rule="evenodd"
+        ></path>
+      </svg>
+    </button>
+  )
+}
+const ProfileDropdown = (props: any) => {
+  return (
+    <div
+      id="userDropdown"
+      className="z-10 hidden w-44 divide-y divide-gray-100 rounded bg-white shadow dark:divide-gray-600 dark:bg-gray-700"
+      data-popper-reference-hidden=""
+      data-popper-escaped=""
+      data-popper-placement="bottom-start"
+      // style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 295.5px, 0px);"
+    >
+      <div className="py-3 px-4 text-sm text-gray-900 dark:text-white">
+        <div>{props.username}</div>
+        <div className="truncate font-medium">{props.userEmail}</div>
+      </div>
+      <ul
+        className="py-1 text-sm text-gray-700 dark:text-gray-200"
+        aria-labelledby="avatarButton"
+      >
+        {props.profileItems.map((it: any) => {
+          return <ProfileItem text={it.text} link={it.slug} />
+        })}
+      </ul>
+      <div className="py-1">
+        <a
+          href="#"
+          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"
+        >
+          Sign out
+        </a>
+      </div>
+    </div>
+  )
+}
+const DrawerContent = (props: any) => {
+  return (
+    <div
+      id="drawer-navigation"
+      className="fixed z-40 h-screen w-80 overflow-y-auto bg-white p-4 dark:bg-gray-800"
+      tabIndex={-1}
+      aria-labelledby="drawer-navigation-label"
+    >
+      <div
+        // href={props.logoHref}
+        className="flex items-center"
+      >
+        <img
+          src={
+            "https://my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"
+          }
+          // src={props.logoLink}
+          className="h-9"
+        />
+      </div>
+      <CloseButton />
+      <div className="overflow-y-auto py-4">
+        <ul className="space-y-2">
+          {props.drawerItems.map((item: any, i: any) => {
+            return (
+              <HawaDrawerItem action={item.action} key={i} text={item.text} />
+            )
+          })}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+const ProfileItem = (props: any) => {
+  return (
+    <li>
+      <a
+        href={props.link}
+        className="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+      >
+        {props.text}
+      </a>
+    </li>
+  )
+}
+const CloseButton = () => {
+  return (
+    <button
+      type="button"
+      data-drawer-dismiss="drawer-navigation"
+      aria-controls="drawer-navigation"
+      className="absolute top-2.5 right-2.5 inline-flex items-center rounded-lg 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"
+    >
+      <svg
+        aria-hidden="true"
+        className="h-5 w-5"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          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"
+          clip-rule="evenodd"
+        ></path>
+      </svg>
+    </button>
+  )
+}
+
+type LayoutTypes = {
+  logoLink: string
+  username: string
+  userEmail: string
+  drawerItems: any
+}
+export const HawaSiteLayout: React.FunctionComponent<LayoutTypes> = (
+  props: any
+) => {
+  const [openSideMenu, setOpenSideMenu] = useState(false)
+  return (
+    <div className="font-plex">
+      <nav className="rounded border-gray-200 dark:bg-gray-900">
+        <div className="flex w-full flex-row-reverse items-center justify-between p-3">
+          <div
+            data-dropdown-toggle="userDropdown"
+            data-dropdown-placement="bottom-start"
+            className="relative mr-2 h-10 w-10 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-600"
+          >
+            <svg
+              className="absolute -left-1 h-12 w-12 text-gray-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </div>
+          <div>{props.pageTitle ?? "Home"}</div>
+          <div className="flex flex-row-reverse">
+            <button
+              data-drawer-target="drawer-navigation"
+              data-drawer-show="drawer-navigation"
+              aria-controls="drawer-navigation"
+              type="button"
+              onClick={() => {
+                setOpenSideMenu(true)
+                console.log("opening side menu")
+              }}
+              className="inline-flex items-center rounded-lg 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"
+            >
+              <svg
+                aria-hidden="true"
+                className="h-6 w-6"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  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"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+            </button>{" "}
+          </div>
+        </div>
+      </nav>
+      <div
+        id="drawer-navigation"
+        // className="fixed z-40 h-screen w-80 overflow-y-auto bg-white p-4 dark:bg-gray-800"
+        className={clsx(
+          "flex w-80  flex-col items-center bg-red-300",
+          "fixed top-0 left-0 z-40 h-screen w-80 overflow-y-auto p-4 dark:bg-gray-800",
+          openSideMenu ? "visible" : "invisible"
+        )}
+        tabIndex={-1}
+        aria-labelledby="drawer-navigation-label"
+      >
+        <div>
+          <img
+            src={
+              "https://my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"
+            }
+            // src={props.logoLink}
+            className="h-9"
+          />
+        </div>
+        <button
+          type="button"
+          onClick={() => setOpenSideMenu(false)}
+          data-drawer-dismiss="drawer-navigation"
+          aria-controls="drawer-navigation"
+          className="absolute top-2.5 right-2.5 inline-flex items-center rounded-lg 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"
+        >
+          <svg
+            aria-hidden="true"
+            className="h-5 w-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              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"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+        </button>{" "}
+        <div className="overflow-y-auto py-4">
+          <ul className="space-y-2">
+            {props.drawerItems.map((item: any, i: any) => {
+              return (
+                <HawaDrawerItem action={item.action} key={i} text={item.text} />
+              )
+            })}
+          </ul>
+        </div>
+      </div>
+      <div className="p-3">{props.children}</div>
+    </div>
+  )
+}
+
+const AppLayoutNav = (props) => (
+  <nav className="rounded border-gray-200 dark:bg-gray-900">
+    <div className="flex w-full flex-row-reverse items-center justify-between p-3">
+      <div
+        data-dropdown-toggle="userDropdown"
+        data-dropdown-placement="bottom-start"
+        className="relative mr-2 h-10 w-10 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-600"
+      >
+        <svg
+          className="absolute -left-1 h-12 w-12 text-gray-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+      </div>
+      <div>{props.pageTitle ?? "Home"}</div>
+      <div className="flex flex-row-reverse">
+        <button
+          data-drawer-target="drawer-navigation"
+          data-drawer-show="drawer-navigation"
+          aria-controls="drawer-navigation"
+          type="button"
+          onClick={() => props.handleClick()}
+          className="inline-flex items-center rounded-lg 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"
+        >
+          <svg
+            aria-hidden="true"
+            className="h-6 w-6"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              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"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+        </button>{" "}
+      </div>
+    </div>
+  </nav>
+)

package/src/layout/index.ts

@@ -1,6 +1,6 @@
-export * from "./Box";
-// export * from "./HawaPageControls";
-export * from "./HawaBottomAppBar";
-export * from "./HawaLayout";
-export * from "./HawaContainer";
-export * from "./SimpleGrid";
+export * from "./Box"
+export * from "./HawaBottomAppBar"
+export * from "./HawaSiteLayout"
+export * from "./HawaAppLayout"
+export * from "./HawaContainer"
+export * from "./SimpleGrid"

package/src/styles.css

@@ -541,9 +541,15 @@ video {
 .bottom-4 {
   bottom: 1rem;
 }
+.left-3 {
+  left: 0.75rem;
+}
 .top-5 {
   top: 1.25rem;
 }
+.-left-1 {
+  left: -0.25rem;
+}
 .top-auto {
   top: auto;
 }
@@ -556,9 +562,6 @@ video {
 .top-2 {
   top: 0.5rem;
 }
-.-left-1 {
-  left: -0.25rem;
-}
 .z-10 {
   z-index: 10;
 }
@@ -740,24 +743,24 @@ video {
 .h-screen {
   height: 100vh;
 }
-.h-2 {
-  height: 0.5rem;
-}
 .h-10 {
   height: 2.5rem;
 }
+.h-2 {
+  height: 0.5rem;
+}
 .h-32 {
   height: 8rem;
 }
 .h-0\.5 {
   height: 0.125rem;
 }
-.h-9 {
-  height: 2.25rem;
-}
 .h-12 {
   height: 3rem;
 }
+.h-9 {
+  height: 2.25rem;
+}
 .h-20 {
   height: 5rem;
 }
@@ -805,14 +808,17 @@ video {
 .w-44 {
   width: 11rem;
 }
+.w-10 {
+  width: 2.5rem;
+}
 .w-11 {
   width: 2.75rem;
 }
 .w-1 {
   width: 0.25rem;
 }
-.w-10 {
-  width: 2.5rem;
+.w-12 {
+  width: 3rem;
 }
 .w-1\/3 {
   width: 33.333333%;
@@ -820,9 +826,6 @@ video {
 .w-80 {
   width: 20rem;
 }
-.w-12 {
-  width: 3rem;
-}
 .w-20 {
   width: 5rem;
 }
@@ -931,6 +934,9 @@ video {
 .items-stretch {
   align-items: stretch;
 }
+.justify-start {
+  justify-content: flex-start;
+}
 .justify-end {
   justify-content: flex-end;
 }
@@ -1100,6 +1106,18 @@ video {
 .border-t-0 {
   border-top-width: 0px;
 }
+.border-t-4 {
+  border-top-width: 4px;
+}
+.border-l-4 {
+  border-left-width: 4px;
+}
+.border-r-4 {
+  border-right-width: 4px;
+}
+.border-b-4 {
+  border-bottom-width: 4px;
+}
 .border-r {
   border-right-width: 1px;
 }
@@ -1136,6 +1154,22 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
+.border-blue-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(147 197 253 / var(--tw-border-opacity));
+}
+.border-yellow-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(253 224 71 / var(--tw-border-opacity));
+}
+.border-red-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 165 165 / var(--tw-border-opacity));
+}
+.border-green-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(134 239 172 / var(--tw-border-opacity));
+}
 .border-transparent {
   border-color: transparent;
 }
@@ -1266,6 +1300,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(116 177 251 / var(--tw-bg-opacity));
 }
+.bg-yellow-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+}
 .bg-primary-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(156 199 252 / var(--tw-bg-opacity));
@@ -1389,6 +1427,9 @@ video {
 .pr-3 {
   padding-right: 0.75rem;
 }
+.pl-10 {
+  padding-left: 2.5rem;
+}
 .pt-0 {
   padding-top: 0px;
 }
@@ -1700,6 +1741,9 @@ body {
   --tw-content: '';
   content: var(--tw-content);
 }
+.hover\:w-60:hover {
+  width: 15rem;
+}
 .hover\:cursor-pointer:hover {
   cursor: pointer;
 }