@luxfi/ui 5.3.7 → 5.3.8

package/components/commerce/desktop-bag-popup.tsx

@@ -1,78 +1,78 @@
-'use client'
-import React, { useState, useEffect } from 'react'
-import { useRouter } from 'next/navigation'
-
-import { X } from 'lucide-react'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  PopoverClose,
-} from "@hanzo/ui/primitives"
-
-import { cn } from '@hanzo/ui/util'
-import { CartPanel, useCommerce } from '@hanzo/commerce'
-
-import * as Icons from '../icons'
-import sendGAEvent from '../../next/analytics/google-analytics'
-
-const DesktopBagPopup: React.FC<{
-  triggerClx?: string  
-  popupClx?: string
-  trigger: React.ReactNode
-}> = ({
-  triggerClx='',
-  popupClx='',
-  trigger
-}) => {
-  const cmmc = useCommerce()
-
-  const [bagOpen, setBagOpen] = useState<boolean>(false)
-  const router = useRouter()
-
-  useEffect(() => {
-    if (bagOpen) {
-      sendGAEvent('view_cart', {
-        items: cmmc.cartItems.map((item) => ({
-          item_id: item.sku,
-          item_name: item.title,
-          item_category: item.familyId,
-          price: item.price,
-          quantity: item.quantity
-        })),
-        value: cmmc.cartTotal,
-        currency: 'USD',
-      })
-    }
-  }, [bagOpen])
-
-  return (
-    <Popover open={bagOpen} onOpenChange={setBagOpen}>
-      <PopoverTrigger className={triggerClx}>
-        {trigger}
-      </PopoverTrigger>
-      <PopoverContent sideOffset={28} className={cn('relative  flex flex-col p-0 px-4 pb-4 pt-2', popupClx)}>
-        <PopoverClose className='absolute z-above-content right-2 top-2 self-end hover:bg-level-3 text-muted hover:text-accent p-1 rounded-full'><X className='w-5 h-5'/></PopoverClose>
-        <CartPanel 
-          handleCheckout={() => {router.push('/checkout')}} 
-          className='mt-4 mb-4 border-none py-0 px-4'
-          listClx='rounded-sm pr-3'
-          scrollAfter={5}
-          scrollHeightClx='h-[70vh]'
-          itemClx='mt-3'
-          totalClx='sticky px-1 pr-2 -bottom-[1px] bg-level-1'
-          buttonClx='max-w-[220px] flex-none'
-        >
-          <div className='flex flex-row items-center flex-none justify-center '>
-            <Icons.bag  className='mr-2 relative w-6 h-7 fill-foreground ' />
-            <p className='font-heading text-foreground text-default'>Your Bag</p>
-          </div>
-          <div className='h-[1px] w-pr-80 bg-muted-3 mx-auto mt-1.5 flex-none'/>
-        </CartPanel>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-export default DesktopBagPopup
+'use client'
+import React, { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+
+import { X } from 'lucide-react'
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  PopoverClose,
+} from "@hanzo/ui/primitives"
+
+import { cn } from '@hanzo/ui/util'
+import { CartPanel, useCommerce } from '@hanzo/commerce'
+
+import * as Icons from '../icons'
+import sendGAEvent from '../../next/analytics/google-analytics'
+
+const DesktopBagPopup: React.FC<{
+  triggerClx?: string  
+  popupClx?: string
+  trigger: React.ReactNode
+}> = ({
+  triggerClx='',
+  popupClx='',
+  trigger
+}) => {
+  const cmmc = useCommerce()
+
+  const [bagOpen, setBagOpen] = useState<boolean>(false)
+  const router = useRouter()
+
+  useEffect(() => {
+    if (bagOpen) {
+      sendGAEvent('view_cart', {
+        items: cmmc.cartItems.map((item) => ({
+          item_id: item.sku,
+          item_name: item.title,
+          item_category: item.familyId,
+          price: item.price,
+          quantity: item.quantity
+        })),
+        value: cmmc.cartTotal,
+        currency: 'USD',
+      })
+    }
+  }, [bagOpen])
+
+  return (
+    <Popover open={bagOpen} onOpenChange={setBagOpen}>
+      <PopoverTrigger className={triggerClx}>
+        {trigger}
+      </PopoverTrigger>
+      <PopoverContent sideOffset={28} className={cn('relative  flex flex-col p-0 px-4 pb-4 pt-2', popupClx)}>
+        <PopoverClose className='absolute z-above-content right-2 top-2 self-end hover:bg-level-3 text-muted hover:text-accent p-1 rounded-full'><X className='w-5 h-5'/></PopoverClose>
+        <CartPanel 
+          handleCheckout={() => {router.push('/checkout')}} 
+          className='mt-4 mb-4 border-none py-0 px-4'
+          listClx='rounded-sm pr-3'
+          scrollAfter={5}
+          scrollHeightClx='h-[70vh]'
+          itemClx='mt-3'
+          totalClx='sticky px-1 pr-2 -bottom-[1px] bg-level-1'
+          buttonClx='max-w-[220px] flex-none'
+        >
+          <div className='flex flex-row items-center flex-none justify-center '>
+            <Icons.bag  className='mr-2 relative w-6 h-7 fill-foreground ' />
+            <p className='font-heading text-foreground text-default'>Your Bag</p>
+          </div>
+          <div className='h-[1px] w-pr-80 bg-muted-3 mx-auto mt-1.5 flex-none'/>
+        </CartPanel>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default DesktopBagPopup

package/components/commerce/desktop-nav-menu.tsx

@@ -1,194 +1,194 @@
-"use client"
-
-import * as React from "react"
-import Link from "next/link"
-import { cn } from '@hanzo/ui/util'
-import type { ChildMenu, LinkDefExtended } from "../../site-def/main-nav"
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle
-} from '@hanzo/ui/primitives'
-
-const DesktopNav: React.FC<{
-  links: LinkDefExtended[],
-  isMenuOpened: boolean,
-  setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>
-}> = ({ links, isMenuOpened, setIsMenuOpen }) => {
-
-  React.useEffect(() => {
-    const preventScroll = (e: WheelEvent | TouchEvent) => {
-      e.preventDefault();
-    };
-
-    if (isMenuOpened) {
-      window.addEventListener('wheel', preventScroll, { passive: false });
-      window.addEventListener('touchmove', preventScroll, { passive: false });
-      window.addEventListener('keydown', preventScrollKeys, { passive: false });
-    } else {
-      window.removeEventListener('wheel', preventScroll);
-      window.removeEventListener('touchmove', preventScroll);
-      window.removeEventListener('keydown', preventScrollKeys);
-    }
-
-    return () => {
-      window.removeEventListener('wheel', preventScroll);
-      window.removeEventListener('touchmove', preventScroll);
-      window.removeEventListener('keydown', preventScrollKeys);
-    };
-  }, [isMenuOpened]);
-
-  const preventScrollKeys = (e: KeyboardEvent) => {
-    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(e.key)) {
-      e.preventDefault();
-    }
-  };
-
-  const handleMouseEnter = React.useCallback(() => {
-    setIsMenuOpen(true);
-  }, [setIsMenuOpen]);
-
-  const handleMouseLeave = React.useCallback(() => {
-    setIsMenuOpen(false);
-  }, [setIsMenuOpen]);
-
-  const menuHiddenClass = !isMenuOpened ? "invisible" : "";
-
-  return links.length > 0 ? (
-    <NavigationMenu>
-      <NavigationMenuList>
-        {links.map((el, index) => (
-          <NavigationMenuItem key={index} className="!m-0">
-            {el.isAIMenu ? (
-              <Link href={el.href} legacyBehavior passHref>
-                <NavigationMenuLink className={cn(navigationMenuTriggerStyle(), ' text-muted-1 bg-transparent')}>
-                  {el.title}
-                </NavigationMenuLink>
-              </Link>
-            ) : el.title === "Cards" ? (
-              <>
-                <NavigationMenuTrigger
-                  className="text-muted-1 bg-transparent"
-                  onMouseEnter={handleMouseEnter}
-                  onFocus={handleMouseEnter}
-                  onMouseLeave={handleMouseLeave}
-                  onBlur={handleMouseLeave}
-                >
-                  <Link href={el.href} legacyBehavior passHref>
-                    {el.title}
-                  </Link>
-                </NavigationMenuTrigger>
-                <NavigationMenuContent
-                  className={cn("fixed left-0 top-14 pt-6 w-screen h-full border-0 !backdrop-blur-3xl bg-transparent mt-0", menuHiddenClass)}
-                  onMouseEnter={handleMouseEnter}
-                  onMouseLeave={handleMouseLeave}
-                >
-                  <div className="flex justify-center items-start">
-                    <div className="grid xl:grid-cols-3 w-full justify-center max-w-[750px]">
-                      {GroupChildMenu({ childs: el.childMenu, isCards: true })}
-                    </div>
-                  </div>
-                </NavigationMenuContent>
-              </>
-            ) : (
-              <>
-                <NavigationMenuTrigger
-                  className="text-muted-1 bg-transparent"
-                  onMouseEnter={handleMouseEnter}
-                  onFocus={handleMouseEnter}
-                  onMouseLeave={handleMouseLeave}
-                  onBlur={handleMouseLeave}
-                >
-                  {
-                    el.href && el.href !== "" ?
-                      <Link href={el.href} legacyBehavior passHref>
-                        {el.title}
-                      </Link> : <>{el.title}</>
-                  }
-                </NavigationMenuTrigger>
-                <NavigationMenuContent
-                  className={cn("fixed left-0 top-14 pt-6 w-screen h-full border-0 !backdrop-blur-3xl bg-transparent mt-0", menuHiddenClass)}
-                  onMouseEnter={handleMouseEnter}
-                  onMouseLeave={handleMouseLeave}
-                >
-                  <div className="flex flex-row w-full justify-center">
-                    {GroupChildMenu({ childs: el.childMenu })}
-                  </div>
-                </NavigationMenuContent>
-              </>
-            )}
-          </NavigationMenuItem>
-        ))}
-      </NavigationMenuList>
-    </NavigationMenu>
-  ) : null;
-};
-
-export default DesktopNav
-
-const ListItem = React.forwardRef<
-  React.ElementRef<"a">,
-  React.ComponentPropsWithoutRef<"a">
->(({ className, title, children, ...props }, ref) => (
-  <li key={title}>
-    <NavigationMenuLink asChild>
-      <a
-        ref={ref}
-        className={cn(
-          "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:text-accent-foreground focus:bg-level-1 focus:text-accent-foreground text-muted-1 hover:text-primary hover:bg-transparent duration-1000 ease-in-out",
-          className
-        )}
-        {...props}
-      >
-        <div className="text-sm font-medium leading-none">{title}</div>
-        <p className="line-clamp-3 text-sm leading-snug text-muted-1">
-          {children}
-        </p>
-      </a>
-    </NavigationMenuLink>
-  </li>
-));
-ListItem.displayName = "ListItem"
-
-const GroupChildMenu = (params: { childs: ChildMenu[] | undefined, isCards?: boolean }) => {
-  const { childs, isCards = false } = params;
-
-  if (!childs) {
-    return null;
-  }
-
-  const groupedChildMenus = childs.reduce((grouped: Record<string, ChildMenu[]>, childLink) => {
-    if (childLink.groupName) {
-      grouped[childLink.groupName] = grouped[childLink.groupName] || [];
-      grouped[childLink.groupName].push(childLink);
-    }
-    return grouped;
-  }, {});
-
-  const getChildExtraClass = (index: number) => {
-    if (isCards && (index === 3 || index === 4)) {
-      return "xl:-mt-32"
-    }
-    return ""
-  };
-
-  return Object.entries(groupedChildMenus).map(([groupName, childLinks], index) => (
-    <div key={groupName} className={cn("py-4 px-4 ", getChildExtraClass(index))}>
-      <h2 className="text-muted-1">{groupName}</h2>
-      <ul className="w-[200px] gap-3 md:w-[250px] lg:w-[250px]">
-        {childLinks.map((link) => (
-          <div className="flex justify-start items-center" key={link.title}>
-            {link.icon}
-            <ListItem key={link.title} title={link.title} href={link.href} className="ml-[14px]">
-              {link.contents}
-            </ListItem>
-          </div>
-        ))}
-      </ul>
-    </div>
-  ));
-};
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import { cn } from '@hanzo/ui/util'
+import type { ChildMenu, LinkDefExtended } from "../../site-def/main-nav"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle
+} from '@hanzo/ui/primitives'
+
+const DesktopNav: React.FC<{
+  links: LinkDefExtended[],
+  isMenuOpened: boolean,
+  setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>
+}> = ({ links, isMenuOpened, setIsMenuOpen }) => {
+
+  React.useEffect(() => {
+    const preventScroll = (e: WheelEvent | TouchEvent) => {
+      e.preventDefault();
+    };
+
+    if (isMenuOpened) {
+      window.addEventListener('wheel', preventScroll, { passive: false });
+      window.addEventListener('touchmove', preventScroll, { passive: false });
+      window.addEventListener('keydown', preventScrollKeys, { passive: false });
+    } else {
+      window.removeEventListener('wheel', preventScroll);
+      window.removeEventListener('touchmove', preventScroll);
+      window.removeEventListener('keydown', preventScrollKeys);
+    }
+
+    return () => {
+      window.removeEventListener('wheel', preventScroll);
+      window.removeEventListener('touchmove', preventScroll);
+      window.removeEventListener('keydown', preventScrollKeys);
+    };
+  }, [isMenuOpened]);
+
+  const preventScrollKeys = (e: KeyboardEvent) => {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+
+  const handleMouseEnter = React.useCallback(() => {
+    setIsMenuOpen(true);
+  }, [setIsMenuOpen]);
+
+  const handleMouseLeave = React.useCallback(() => {
+    setIsMenuOpen(false);
+  }, [setIsMenuOpen]);
+
+  const menuHiddenClass = !isMenuOpened ? "invisible" : "";
+
+  return links.length > 0 ? (
+    <NavigationMenu>
+      <NavigationMenuList>
+        {links.map((el, index) => (
+          <NavigationMenuItem key={index} className="!m-0">
+            {el.isAIMenu ? (
+              <Link href={el.href} legacyBehavior passHref>
+                <NavigationMenuLink className={cn(navigationMenuTriggerStyle(), ' text-muted-1 bg-transparent')}>
+                  {el.title}
+                </NavigationMenuLink>
+              </Link>
+            ) : el.title === "Cards" ? (
+              <>
+                <NavigationMenuTrigger
+                  className="text-muted-1 bg-transparent"
+                  onMouseEnter={handleMouseEnter}
+                  onFocus={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+                  onBlur={handleMouseLeave}
+                >
+                  <Link href={el.href} legacyBehavior passHref>
+                    {el.title}
+                  </Link>
+                </NavigationMenuTrigger>
+                <NavigationMenuContent
+                  className={cn("fixed left-0 top-14 pt-6 w-screen h-full border-0 !backdrop-blur-3xl bg-transparent mt-0", menuHiddenClass)}
+                  onMouseEnter={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+                >
+                  <div className="flex justify-center items-start">
+                    <div className="grid xl:grid-cols-3 w-full justify-center max-w-[750px]">
+                      {GroupChildMenu({ childs: el.childMenu, isCards: true })}
+                    </div>
+                  </div>
+                </NavigationMenuContent>
+              </>
+            ) : (
+              <>
+                <NavigationMenuTrigger
+                  className="text-muted-1 bg-transparent"
+                  onMouseEnter={handleMouseEnter}
+                  onFocus={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+                  onBlur={handleMouseLeave}
+                >
+                  {
+                    el.href && el.href !== "" ?
+                      <Link href={el.href} legacyBehavior passHref>
+                        {el.title}
+                      </Link> : <>{el.title}</>
+                  }
+                </NavigationMenuTrigger>
+                <NavigationMenuContent
+                  className={cn("fixed left-0 top-14 pt-6 w-screen h-full border-0 !backdrop-blur-3xl bg-transparent mt-0", menuHiddenClass)}
+                  onMouseEnter={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+                >
+                  <div className="flex flex-row w-full justify-center">
+                    {GroupChildMenu({ childs: el.childMenu })}
+                  </div>
+                </NavigationMenuContent>
+              </>
+            )}
+          </NavigationMenuItem>
+        ))}
+      </NavigationMenuList>
+    </NavigationMenu>
+  ) : null;
+};
+
+export default DesktopNav
+
+const ListItem = React.forwardRef<
+  React.ElementRef<"a">,
+  React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => (
+  <li key={title}>
+    <NavigationMenuLink asChild>
+      <a
+        ref={ref}
+        className={cn(
+          "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:text-accent-foreground focus:bg-level-1 focus:text-accent-foreground text-muted-1 hover:text-primary hover:bg-transparent duration-1000 ease-in-out",
+          className
+        )}
+        {...props}
+      >
+        <div className="text-sm font-medium leading-none">{title}</div>
+        <p className="line-clamp-3 text-sm leading-snug text-muted-1">
+          {children}
+        </p>
+      </a>
+    </NavigationMenuLink>
+  </li>
+));
+ListItem.displayName = "ListItem"
+
+const GroupChildMenu = (params: { childs: ChildMenu[] | undefined, isCards?: boolean }) => {
+  const { childs, isCards = false } = params;
+
+  if (!childs) {
+    return null;
+  }
+
+  const groupedChildMenus = childs.reduce((grouped: Record<string, ChildMenu[]>, childLink) => {
+    if (childLink.groupName) {
+      grouped[childLink.groupName] = grouped[childLink.groupName] || [];
+      grouped[childLink.groupName].push(childLink);
+    }
+    return grouped;
+  }, {});
+
+  const getChildExtraClass = (index: number) => {
+    if (isCards && (index === 3 || index === 4)) {
+      return "xl:-mt-32"
+    }
+    return ""
+  };
+
+  return Object.entries(groupedChildMenus).map(([groupName, childLinks], index) => (
+    <div key={groupName} className={cn("py-4 px-4 ", getChildExtraClass(index))}>
+      <h2 className="text-muted-1">{groupName}</h2>
+      <ul className="w-[200px] gap-3 md:w-[250px] lg:w-[250px]">
+        {childLinks.map((link) => (
+          <div className="flex justify-start items-center" key={link.title}>
+            {link.icon}
+            <ListItem key={link.title} title={link.title} href={link.href} className="ml-[14px]">
+              {link.contents}
+            </ListItem>
+          </div>
+        ))}
+      </ul>
+    </div>
+  ));
+};