@sikka/hawa 0.1.85 → 0.1.87

package/src/elements/DropdownMenu.tsx

@@ -89,6 +89,7 @@ const DropdownMenuItem = React.forwardRef<
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
+    disabled={props.disabled}
     ref={ref}
     className={cn(
       "relative flex cursor-pointer select-none items-center justify-between rounded-sm px-2 py-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -238,6 +239,7 @@ export type SubItem = {
   icon?: any
   action?: () => void
   highlighted?: boolean
+  disabled?: boolean
 }
 
 export type MenuItemType = {
@@ -249,6 +251,7 @@ export type MenuItemType = {
   action?: () => void
   highlighted?: boolean
   subitems?: SubItem[] // Note the use of the optional modifier
+  disabled?: boolean
 }
 interface DropdownMenuProps {
   trigger?: any
@@ -306,6 +309,7 @@ export const DropdownMenu: React.FC<DropdownMenuProps> = ({
                   <DropdownMenuSubContent>
                     {item.subitems.map((subitem, subIndex) => (
                       <DropdownMenuItem
+                        disabled={subitem.disabled}
                         className="flex flex-row gap-2"
                         onSelect={() => subitem.action()}
                         key={subIndex}
@@ -319,6 +323,7 @@ export const DropdownMenu: React.FC<DropdownMenuProps> = ({
               </DropdownMenuSub>
             ) : (
               <DropdownMenuItem
+                disabled={item.disabled}
                 className="flex flex-row gap-2"
                 key={index}
                 onSelect={(e) => {

package/src/elements/index.ts

@@ -50,6 +50,8 @@ export * from "./HawaLandingCard"
 export * from "./HawaButton"
 export * from "./HawaStoreButtons"
 
+export * from "./ActionCard"
+
 // v0.1
 export * from "./Button"
 export * from "./Carousel"

package/src/layout/Footer.tsx

@@ -1,9 +1,13 @@
 import { BsInstagram, BsTwitter } from "react-icons/bs"
 import { FaSnapchatGhost, FaTiktok } from "react-icons/fa"
+import { Button } from "../elements"
+import { cn } from "../util"
 
 type FooterTypes = {
   logoText?: string
   logoURL?: string
+  copyRights?: string
+  variation?: "default" | "minimal"
   socialLinks?: {
     twitter?: string
     instagram?: string
@@ -19,12 +23,45 @@ type FooterTypes = {
   }[]
 }
 
-export const Footer: React.FunctionComponent<FooterTypes> = ({ ...props }) => {
+export const Footer: React.FunctionComponent<FooterTypes> = ({
+  variation = "default",
+  ...props
+}) => {
+  let variationStyles = {
+    default: "rounded border",
+    minimal: "border-t",
+  }
   return (
-    <div className="sticky  bottom-0 left-0 flex w-full flex-row gap-8  bg-blue-200 p-4">
-      {props.logoText && (
-        <div>
-          <div className="text-2xl font-bold">{props.logoText}</div>
+    <div
+      className={cn(
+        "flex w-full flex-row items-center justify-between gap-8  rounded bg-background p-4",
+        variationStyles[variation]
+      )}
+    >
+      <div className="flex flex-col items-center gap-2">
+        <div className="flex flex-row items-center gap-2">
+          {props.logoURL && (
+            <div>
+              <img className="h-8" src={props.logoURL} />
+            </div>
+          )}
+          {props.logoText && (
+            <div>
+              <div className="text-2xl font-bold text-primary">
+                {props.logoText}
+              </div>
+            </div>
+          )}
+        </div>
+        {props.copyRights && props.footerLinks && (
+          <div className="text-xs text-muted-foreground">
+            © {props.copyRights} {new Date().getFullYear()}
+          </div>
+        )}
+      </div>
+      {props.copyRights && !props.footerLinks && (
+        <div className="text-xs text-muted-foreground">
+          © {props.copyRights} {new Date().getFullYear()}
         </div>
       )}
       {props.footerLinks?.map((pagesSection) => (
@@ -45,24 +82,24 @@ export const Footer: React.FunctionComponent<FooterTypes> = ({ ...props }) => {
       {props.socialLinks && (
         <div className="flex flex-row gap-2">
           {props.socialLinks.twitter && (
-            <div className="flex h-6 w-6 items-center justify-center rounded bg-white">
+            <Button size="smallIcon" variant="ghost">
               <BsTwitter />
-            </div>
+            </Button>
           )}
           {props.socialLinks.instagram && (
-            <div className="flex h-6 w-6 items-center justify-center rounded bg-white">
+            <Button size="smallIcon" variant="ghost">
               <BsInstagram />
-            </div>
+            </Button>
           )}
           {props.socialLinks.tiktok && (
-            <div className="flex h-6 w-6 items-center justify-center rounded bg-white">
+            <Button size="smallIcon" variant="ghost">
               <FaTiktok />
-            </div>
+            </Button>
           )}
           {props.socialLinks.snapchat && (
-            <div className="flex h-6 w-6 items-center justify-center rounded bg-white">
+            <Button size="smallIcon" variant="ghost">
               <FaSnapchatGhost />
-            </div>
+            </Button>
           )}
         </div>
       )}

package/src/styles.css

@@ -758,6 +758,9 @@ video {
 .bottom-14 {
   bottom: 3.5rem;
 }
+.bottom-2 {
+  bottom: 0.5rem;
+}
 .bottom-4 {
   bottom: 1rem;
 }
@@ -1075,9 +1078,6 @@ video {
 .hidden {
   display: none;
 }
-.aspect-\[2\/3\] {
-  aspect-ratio: 2/3;
-}
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
@@ -1096,9 +1096,6 @@ video {
 .h-11 {
   height: 2.75rem;
 }
-.h-12 {
-  height: 3rem;
-}
 .h-14 {
   height: 3.5rem;
 }
@@ -1180,6 +1177,9 @@ video {
 .h-\[32px\] {
   height: 32px;
 }
+.h-\[400px\] {
+  height: 400px;
+}
 .h-\[calc\(100\%-3\.5rem\)\] {
   height: calc(100% - 3.5rem);
 }
@@ -1228,6 +1228,9 @@ video {
 .min-h-\[80px\] {
   min-height: 80px;
 }
+.min-h-screen {
+  min-height: 100vh;
+}
 .w-0 {
   width: 0px;
 }
@@ -1309,6 +1312,9 @@ video {
 .w-\[1\.2rem\] {
   width: 1.2rem;
 }
+.w-\[1000px\] {
+  width: 1000px;
+}
 .w-\[12px\] {
   width: 12px;
 }
@@ -1345,15 +1351,9 @@ video {
 .w-\[42px\] {
   width: 42px;
 }
-.w-\[500px\] {
-  width: 500px;
-}
 .w-\[64px\] {
   width: 64px;
 }
-.w-\[90\%\] {
-  width: 90%;
-}
 .w-\[calc\(1\%\)\] {
   width: calc(1%);
 }
@@ -1576,19 +1576,6 @@ video {
 .snap-x {
   scroll-snap-type: x var(--tw-scroll-snap-strictness);
 }
-.snap-mandatory {
-  --tw-scroll-snap-strictness: mandatory;
-}
-.snap-start {
-  scroll-snap-align: start;
-}
-.snap-always {
-  scroll-snap-stop: always;
-}
-.scroll-px-10 {
-  scroll-padding-left: 2.5rem;
-  scroll-padding-right: 2.5rem;
-}
 .appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -1769,15 +1756,9 @@ video {
 .overflow-y-clip {
   overflow-y: clip;
 }
-.overflow-x-scroll {
-  overflow-x: scroll;
-}
 .overflow-y-scroll {
   overflow-y: scroll;
 }
-.scroll-smooth {
-  scroll-behavior: smooth;
-}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2027,10 +2008,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
-.bg-blue-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-}
 .bg-blue-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(147 197 253 / var(--tw-bg-opacity));
@@ -2117,10 +2094,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
 }
-.bg-green-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
-}
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@@ -2138,10 +2111,6 @@ video {
 .bg-muted {
   background-color: hsl(var(--muted));
 }
-.bg-orange-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
-}
 .bg-orange-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(251 146 60 / var(--tw-bg-opacity));
@@ -2188,10 +2157,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(127 29 29 / var(--tw-bg-opacity));
 }
-.bg-rose-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 228 230 / var(--tw-bg-opacity));
-}
 .bg-secondary {
   background-color: hsl(var(--secondary));
 }
@@ -2236,16 +2201,14 @@ video {
 .bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
 .bg-none {
   background-image: none;
 }
-.from-black {
-  --tw-gradient-from: #000 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+.bg-cover {
+  background-size: cover;
+}
+.bg-center {
+  background-position: center;
 }
 .fill-current {
   fill: currentColor;
@@ -2716,9 +2679,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.text-white\/50 {
-  color: rgb(255 255 255 / 0.5);
-}
 .text-yellow-700 {
   --tw-text-opacity: 1;
   color: rgb(161 98 7 / var(--tw-text-opacity));
@@ -2918,6 +2878,9 @@ video {
 .duration-300 {
   transition-duration: 300ms;
 }
+.duration-500 {
+  transition-duration: 500ms;
+}
 .will-change-\[opacity\2c transform\] {
   will-change: opacity,transform;
 }
@@ -2968,6 +2931,9 @@ video {
 .duration-300 {
   animation-duration: 300ms;
 }
+.duration-500 {
+  animation-duration: 500ms;
+}
 .delay-100 {
   animation-delay: 100ms;
 }
@@ -3269,6 +3235,10 @@ body {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.hover\:drop-shadow-2xl:hover {
+  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .hover\:drop-shadow-lg:hover {
   --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -4049,10 +4019,6 @@ body {
     display: flex;
   }
 
-  .sm\:w-\[44\%\] {
-    width: 44%;
-  }
-
   .sm\:columns-2 {
     -moz-columns: 2;
          columns: 2;
@@ -4164,10 +4130,6 @@ body {
     width: 12rem;
   }
 
-  .md\:w-\[30\%\] {
-    width: 30%;
-  }
-
   .md\:w-full {
     width: 100%;
   }
@@ -4197,6 +4159,10 @@ body {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }