@sikka/hawa 0.0.119 → 0.0.121

package/lib/layout/HawaAppLayout.d.ts

@@ -1,13 +1,16 @@
 import React from "react";
 type HawaAppLayoutTypes = {
-    logoLink: string;
     drawerItems: {
         label: string;
         icon: any;
         slug: string;
         action: () => void;
     }[];
-    currentPage?: string;
+    currentPage: string;
+    logoSymbol?: any;
+    logoLink?: string;
+    logoText?: any;
+    children?: any;
 };
 export declare const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.119",
+  "version": "0.0.121",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/HawaStats.tsx

@@ -11,7 +11,7 @@ type StatTypes = {
   handleClick?: () => void
 }
 export const HawaStats: React.FunctionComponent<StatTypes> = (props) => {
-  let defaultStyle = "flex flex-col gap-1 rounded-lg p-4 text-sm"
+  let defaultStyle = "flex flex-col gap-1 rounded-lg p-4 text-sm max-h-fit"
   let statStyles = {
     plain: "",
     contained: "bg-primary-200 w-fit",

package/src/layout/HawaAppLayout.tsx

@@ -2,31 +2,39 @@ import clsx from "clsx"
 import React, { useState } from "react"
 
 type HawaAppLayoutTypes = {
-  logoLink: string
   drawerItems: { label: string; icon: any; slug: string; action: () => void }[]
-  currentPage?: string
+  currentPage: string
+  logoSymbol?: any
+  logoLink?: string
+  logoText?: any
+  children?: any
 }
 export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
   props: any
 ) => {
   const [openSideMenu, setOpenSideMenu] = useState(false)
-
   return (
-    <div className="fixed top-0 left-0 m-0 w-full p-0">
+    <div className="flex">
       <div
         onMouseEnter={() => setOpenSideMenu(true)}
         onMouseLeave={() => setOpenSideMenu(false)}
-        className="absolute top-0 z-10 flex h-screen w-12 flex-col gap-0 bg-blue-300 transition-all hover:w-40"
+        className="top-0 z-10 flex h-screen w-12 flex-col gap-0 bg-blue-300 transition-all hover:w-40"
       >
-        <div className="m-1 bg-red-300 p-2">logo</div>
-        {props.drawerItems.map((dItem) => (
+        <div className="m-1 flex flex-row bg-red-300 p-2">
+          <div>{props.logoSymbol}</div>
+          <div className={openSideMenu ? "scale-100" : "scale-0"}>
+            {props.logoText}
+          </div>
+        </div>
+        {props.drawerItems.map((dItem, i) => (
           <div
+            key={i}
             onClick={() => dItem.action(dItem.slug)}
             className={clsx(
-              "m-1 flex cursor-pointer flex-row items-center overflow-x-clip rounded-lg p-2  pl-3 transition-all hover:bg-green-300",
+              "m-1 flex cursor-pointer flex-row items-center overflow-x-clip rounded-lg p-2  pl-3 transition-all hover:bg-primary-400",
               props.currentPage === dItem.slug
-                ? "bg-primary-400"
-                : "bg-yellow-300"
+                ? "bg-primary-600 text-white hover:bg-primary-600"
+                : ""
             )}
           >
             <div className="flex items-center justify-center">{dItem.icon}</div>
@@ -42,35 +50,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
         ))}
       </div>
 
-      {/* 
-      <div className="relative flex flex-row bg-yellow-300">
-        <div className="relative left-10 h-screen w-full bg-orange-300">
-          <div className="m-0 flex flex-row justify-between bg-red-300 p-2">
-            <div></div>
-            <div>page title</div>
-            <div className="relative mr-2 h-10 w-10 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-600">
-              <AvatarIcon />
-            </div>
-          </div>
-
-          <div>{props.children}</div>
-        </div>
-      </div> */}
+      <div className="w-full">{props.children}</div>
     </div>
   )
 }
-
-const AvatarIcon = () => (
-  <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>
-)

package/src/styles.css

@@ -553,12 +553,6 @@ video {
 .top-5 {
   top: 1.25rem;
 }
-.left-10 {
-  left: 2.5rem;
-}
-.-left-1 {
-  left: -0.25rem;
-}
 .top-auto {
   top: auto;
 }
@@ -571,6 +565,9 @@ video {
 .top-2 {
   top: 0.5rem;
 }
+.-left-1 {
+  left: -0.25rem;
+}
 .z-10 {
   z-index: 10;
 }
@@ -589,12 +586,12 @@ video {
 .m-2 {
   margin: 0.5rem;
 }
-.m-0 {
-  margin: 0px;
-}
 .m-1 {
   margin: 0.25rem;
 }
+.m-0 {
+  margin: 0px;
+}
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -767,12 +764,12 @@ video {
 .h-0\.5 {
   height: 0.125rem;
 }
-.h-12 {
-  height: 3rem;
-}
 .h-9 {
   height: 2.25rem;
 }
+.h-12 {
+  height: 3rem;
+}
 .h-20 {
   height: 5rem;
 }
@@ -899,6 +896,16 @@ video {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-0 {
+  --tw-scale-x: 0;
+  --tw-scale-y: 0;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -1329,13 +1336,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
-.bg-yellow-300 {
+.bg-primary-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
-}
-.bg-orange-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 186 116 / var(--tw-bg-opacity));
+  background-color: rgb(6 92 198 / var(--tw-bg-opacity));
 }
 .bg-primary-300 {
   --tw-bg-opacity: 1;
@@ -1831,9 +1834,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
-.hover\:bg-green-300:hover {
+.hover\:bg-primary-400:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
+  background-color: rgb(116 177 251 / var(--tw-bg-opacity));
 }
 .hover\:text-gray-900:hover {
   --tw-text-opacity: 1;