@sikka/hawa 0.0.46 → 0.0.48

package/src/layout/HawaLayout.js

@@ -29,41 +29,149 @@ const MenuButton = () => {
     </button>
   );
 };
+const ProfileDropdown = (props) => {
+  return (
+    <div
+      id="userDropdown"
+      class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
+      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 class="py-3 px-4 text-sm text-gray-900 dark:text-white">
+        <div>{props.username}</div>
+        <div class="font-medium truncate">{props.userEmail}</div>
+      </div>
+      <ul
+        class="py-1 text-sm text-gray-700 dark:text-gray-200"
+        aria-labelledby="avatarButton"
+      >
+        {props.profileItems.map((it) => {
+          return <ProfileItem text={it.text} link={it.slug} />;
+        })}
+      </ul>
+      <div class="py-1">
+        <a
+          href="#"
+          class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+        >
+          Sign out
+        </a>
+      </div>
+    </div>
+  );
+};
+const DrawerContent = (props) => {
+  return (
+    <div
+      id="drawer-navigation"
+      class="fixed z-40 h-screen p-4 overflow-y-auto bg-white w-80 dark:bg-gray-800"
+      tabindex="-1"
+      aria-labelledby="drawer-navigation-label"
+    >
+      <div href={props.logoHref} class="flex items-center">
+        <img
+          src={
+            "https://my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"
+          }
+          // src={props.logoLink}
+          class="h-9"
+          alt="Flowbite Logo"
+        />
+      </div>
+      <CloseButton />
+      <div class="py-4 overflow-y-auto">
+        <ul class="space-y-2">
+          {props.drawerItems.map((item, i) => {
+            return (
+              <HawaDrawerItem action={item.action} key={i} text={item.text} />
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+const ProfileItem = (props) => {
+  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="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+    >
+      <svg
+        aria-hidden="true"
+        class="w-5 h-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>
+  );
+};
 export const HawaLayout = (props) => {
   return (
-    <div>
+    <div className="font-plex">
       <div>
         <nav class="border-gray-200 rounded dark:bg-gray-900">
           <div class="flex p-3 flex-row-reverse items-center justify-between w-full">
-            <div href={props.logoLink} class="flex items-center">
+            {/* <div href={props.logoHref} class="flex items-center">
+              <img src={props.logoLink} class="h-9" alt="Flowbite Logo" />
+            </div> */}
+            <div
+              data-dropdown-toggle="userDropdown"
+              data-dropdown-placement="bottom-start"
+              class="overflow-hidden mr-2 relative w-10 h-10 bg-gray-100 rounded-full dark:bg-gray-600"
+            >
+              <svg
+                class="absolute -left-1 w-12 h-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 href={props.logoHref} class="flex items-center">
               <img
-                src="https://flowbite.com/docs/images/logo.svg"
-                class="h-9"
+                src={
+                  // "https://my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"
+                  "https://qawaim-images.s3-ap-southeast-1.amazonaws.com/614580f79706137eab618399"
+                }
+                // src={props.logoLink}
+                class="h-12"
                 alt="Flowbite Logo"
               />
-            </div>
+            </div> */}
+            <div>{props.pageTitle ?? "Home"}</div>
             <div className="flex flex-row-reverse">
               <MenuButton />
-
-              <div
-                data-dropdown-toggle="userDropdown"
-                data-dropdown-placement="bottom-start"
-                class="overflow-hidden mr-2 relative w-10 h-10 bg-gray-100 rounded-full dark:bg-gray-600"
-              >
-                <svg
-                  class="absolute -left-1 w-12 h-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>
-
               {/* <img
                 id="avatarButton"
                 type="button"
@@ -77,101 +185,24 @@ export const HawaLayout = (props) => {
           </div>
         </nav>
       </div>
-      <div
-        id="userDropdown"
-        class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
-        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 class="py-3 px-4 text-sm text-gray-900 dark:text-white">
-          <div>Bonnie Green</div>
-          <div class="font-medium truncate">name@flowbite.com</div>
-        </div>
-        <ul
-          class="py-1 text-sm text-gray-700 dark:text-gray-200"
-          aria-labelledby="avatarButton"
-        >
-          <li>
-            <a
-              href="#"
-              class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-            >
-              Dashboard
-            </a>
-          </li>
-          <li>
-            <a
-              href="#"
-              class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-            >
-              Settings
-            </a>
-          </li>
-          <li>
-            <a
-              href="#"
-              class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-            >
-              Earnings
-            </a>
-          </li>
-        </ul>
-        <div class="py-1">
-          <a
-            href="#"
-            class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-          >
-            Sign out
-          </a>
-        </div>
-      </div>
-
-      <div
-        id="drawer-navigation"
-        class="fixed z-40 h-screen p-4 overflow-y-auto bg-white w-80 dark:bg-gray-800"
-        tabindex="-1"
-        aria-labelledby="drawer-navigation-label"
-      >
-        <h5
-          id="drawer-navigation-label"
-          class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400"
-        >
-          {props.appTitle}
-        </h5>
-        <button
-          type="button"
-          data-drawer-dismiss="drawer-navigation"
-          aria-controls="drawer-navigation"
-          class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
-        >
-          <svg
-            aria-hidden="true"
-            class="w-5 h-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 class="py-4 overflow-y-auto">
-          <ul class="space-y-2">
-            {props.drawerItems.map((item, i) => {
-              return <HawaDrawerItem key={i} text={item.text} />;
-            })}
-          </ul>
-        </div>
-      </div>
+      <ProfileDropdown profileItems={props.profileItems} />
+      <DrawerContent
+        logoHref={props.logoHref}
+        appTitle={props.appTitle}
+        drawerItems={props.drawerItems}
+      />
+      <div className="p-3">{props.children}</div>
     </div>
   );
 };
 
 HawaLayout.propTypes = {
-  logoLink: PropTypes.string
+  logoLink: PropTypes.string,
+  username: PropTypes.string,
+  userEmail: PropTypes.string,
+  drawerItems: PropTypes.objectOf({
+    text: PropTypes.string,
+    slug: PropTypes.string,
+    action: PropTypes.func
+  })
 };

package/src/layout/index.js

@@ -1,7 +1,6 @@
 export * from "./Box";
 export * from "./HawaAppLayout";
 export * from "./HawaDialog";
-export * from "./HawaAppBar";
 export * from "./HawaPageControls";
 export * from "./HawaBottomAppBar";
 export * from "./HawaDrawer";

package/src/tailwind.css

@@ -1,3 +1,7 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss/utilities';
+
+body {
+    font-family: "IBM Plex Sans Arabic";
+}

package/storybook-static/iframe.html

@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.0e8a2888.iframe.bundle.js"></script><script src="vendors~main.bfb520c7.iframe.bundle.js"></script><script src="main.e8029a3c.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.0e8a2888.iframe.bundle.js"></script><script src="vendors~main.ceb9a32a.iframe.bundle.js"></script><script src="main.7d233d65.iframe.bundle.js"></script></body></html>