@luxfi/core 5.2.7 → 5.2.9

package/components/commerce/mobile-nav-menu-ai.tsx

@@ -1,10 +1,9 @@
 'use client'
 import React, { useState } from 'react'
-import { Plus } from 'lucide-react'
+import { ArrowRight, Plus } from 'lucide-react'
 import { Search } from '../icons'
-import { ChatWidget } from '../../components'
 import { Button, Card } from '@hanzo/ui/primitives'
-import LuxLogo from '../icons/lux-logo'
+import { Logo } from '..'
 
 interface MobileNavMenuAIProps {
     setMenuOpen: (open: boolean) => void
@@ -15,11 +14,16 @@ const MobileNavMenuAI: React.FC<MobileNavMenuAIProps> = ({ setMenuOpen }) => {
 
     return (
         <>
-            <div className="w-full px-5 py-4 text-2xl bg-[#202020] cursor-pointer">
-                <div className="flex items-center gap-5 border-b border-[#3A3A3A]">
-                    <Search className='w-6 h-6 flex-none' />
-                    <div className="text-white font-bold flex-1" onClick={() => setIsOpen(true)}>Ask AI Chat...</div>
-                    <Plus className='w-6 h-6 flex-none rotate-45 transition-transform' onClick={() => setMenuOpen(false)} />
+            <div className="w-full px-[10.8px] py-4 text-2xl cursor-pointer">
+                <div className='flex justify-between'>
+                    <Logo variant='text-only' />
+                    <Plus className='w-[17.7px] h-[17.7px] flex-none rotate-45 transition-transform' onClick={() => setMenuOpen(false)} />
+                </div>
+                <div className="flex items-center gap-5 border-b border-[#3A3A3A] mt-4 rounded-2xl bg-muted-4">
+                    <div className="text-muted-1 font-bold flex-1 flex justify-between h-9 items-center" onClick={() => setIsOpen(true)}>
+                        <span className='text-base pl-2 font-light'>Ask AI a question</span>
+                        <ArrowRight />
+                    </div>                    
                 </div>
             </div>
             <div className={

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

@@ -1,12 +1,14 @@
 'use client'
 import React from 'react'
-
 import type { LinkDef } from '@hanzo/ui/types'
 import { cn } from '@hanzo/ui/util'
-import type { LinkDefExtended } from '../../site-def/main-nav'
+import type { LinkDefExtended, ChildMenu } from '../../site-def/main-nav'
 import MobileNavMenuAI from './mobile-nav-menu-ai'
 import MobileNavMenuItem from './mobile-nav-menu-item'
 import MobileAuthWidget from './mobile-login-button'
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@hanzo/ui/primitives'
+import { ChevronDown } from 'lucide-react'
+import Link from 'next/link'
 
 const MobileNav: React.FC<{
   currentAs: string | undefined
@@ -15,11 +17,6 @@ const MobileNav: React.FC<{
   commonItemClx?: string | ((def: LinkDef) => string)
   setChatbotOpen: (open: boolean) => void
   setMenuOpen: (open: boolean) => void
-  /**
-   * This is called *in addition* to the link's actual navigation 
-   * action.  eg, I link is clicked, and the modal menu is closes
-   */
-  // TODO :aa shouldn't be so aware of parent context! 
   setMenuState: (arg: 'closed' | 'nav' | 'login' | 'bag') => void
 }> = ({
   currentAs,
@@ -31,38 +28,75 @@ const MobileNav: React.FC<{
   setMenuOpen
 }) => (
     links.length > 0 ? (
-
-      <div className={cn('flex flex-col h-full', className)} >
+      <div className={cn('flex flex-col h-full', className)}>
         <MobileNavMenuAI setMenuOpen={setMenuOpen} />
-        <div className="flex flex-col flex-1">
-          {links.map((el, index) => {
-            const variant = el.variant ?? 'link'
-            let internalClx = ''
-            // note that linkFG (or any other variant of 'link') 
-            // will not get assigned these classes,
-            // and will remain styles is 'foreground' (hence the name)
-            if (variant === 'link') {
-              internalClx += ' text-muted hover:text-foreground active:text-accent rounded-none'
+        <div className="flex flex-col flex-1 overflow-auto">
+          <Accordion type="single" collapsible className='w-full h-full'>
+            {links.map((el, index) => {
+              const itemClx = (commonItemClx) ? (typeof commonItemClx === 'string' ? commonItemClx : commonItemClx(el)) : ''
+              const variant = el.variant ?? 'link'
+              let internalClx = variant === 'link'
+                ? ' text-muted hover:text-foreground active:text-accent rounded-none'
+                : ' min-w-0'
+
               if (currentAs && currentAs === el.href) {
-                internalClx += ' text-accent '
+                internalClx += ' pointer-events-none'
+                if (variant === 'link') {
+                  internalClx += ' text-accent'
+                }
               }
-            }
-            else {
-              internalClx += ' min-w-0'
-            }
-            if (currentAs && currentAs === el.href) {
-              internalClx += ' pointer-events-none'
-            }
-            const itemClx = (commonItemClx) ? (typeof commonItemClx === 'string' ? commonItemClx : commonItemClx(el)) : ''
 
-            if (!el.isAIMenu) {
-              return <MobileNavMenuItem link={el} setMenuOpen={setMenuOpen}/>
-            }
-          })}
+              if (!el.isAIMenu) {
+                return (
+                  <AccordionItem key={index} value={el.title ? el.title : ""} className='!no-underline !border-0'>
+                    <AccordionTrigger className={cn(internalClx, itemClx, '')}>
+                      <div className={cn(internalClx, itemClx, 'flex items-center justify-between w-full pl-3 text-base font-normal leading-6')}>
+                        {el.title}
+                      </div>
+                      <ChevronDown className="w-4 h-4 mr-3" />
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      {el.childMenu && (
+                        <div className="px-4">
+                          {Object.entries(el.childMenu.reduce((acc, child) => {
+                            const group = acc[child.groupName ? child.groupName : ""] || []
+                            group.push(child)
+                            acc[child.groupName ? child.groupName : ""] = group
+                            return acc
+                          }, {} as { [key: string]: ChildMenu[] })).map(([groupName, children]) => (
+                            <div key={groupName}>
+                              <div className="mt-4 mb-4 font-light text-muted-1">{groupName}</div>
+                              {children.map((child, childIndex) => (
+                                <div key={childIndex} className="m-2">
+                                  <div className="flex items-center py-1">
+                                    <span>
+                                      {child.icon && child.icon}
+                                    </span>
+                                    <Link
+                                      href={child.href}
+                                      className="text-muted-2 hover:underline ml-5 hover:text-primary"
+                                      target={child.newTab ? '_blank' : '_self'}
+                                      rel="noopener noreferrer"
+                                    >
+                                      {child.title}
+                                    </Link>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </AccordionContent>
+                  </AccordionItem>
+                )
+              }
+            })}
+          </Accordion>
         </div>
-        <MobileAuthWidget className=' text-2xl' handleLogin={() => { setMenuState('login') }} />
+        <MobileAuthWidget className='text-2xl z-10' handleLogin={() => { setMenuState('login') }} />
       </div>
     ) : null
-  )
+  );
 
-export default MobileNav
+export default MobileNav;

package/components/footer.tsx

@@ -33,7 +33,7 @@ const Footer: React.FC<{
         'md:flex md:flex-row md:justify-between ' 
       }>
         <div className='hidden lg:flex flex-col' key={0}>
-          <Logo size='md' layout='text-only' />
+          <Logo size='md' variant='text-only' />
         </div>
         {footer.map((defs: LinkDef[], index: number) => {
 

package/components/header/desktop.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 
-import { NavItems } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 import { AuthWidget } from '@hanzo/auth/components'
 
@@ -8,7 +7,7 @@ import { Logo } from '..'
 
 import DesktopBagPopup from '../commerce/desktop-bag-popup'
 import BagButton from '../commerce/bag-button'
-import  DesktopNav  from '../commerce/desktop-nav-menu'
+import DesktopNav from '../commerce/desktop-nav-menu'
 
 
 import type { LinkDef } from '@hanzo/ui/types'
@@ -25,25 +24,27 @@ const DesktopHeader: React.FC<{
 
     // TODO move 13px into a size class and configure twMerge to recognize say, 'text-size-nav' 
     // (vs be beat out by 'text-color-nav')
-  return (
-    <header className={cn('bg-background fixed z-header top-0 left-0 right-0', className)} >
-      {/* md or larger */}
-      <div className={
-        'flex flex-row h-[80px] items-center  justify-between ' +
-        'px-[8px] w-full mx-auto max-w-screen'
-      }>
-        <Logo size='md' href='/' className='hidden lg:flex' key='two' layout='text-only'/>
-        <Logo size='sm' href='/' className='hidden md:flex lg:hidden' key='one' layout='text-only'/>
+    return (
+      <header className={cn('bg-background fixed z-header top-0 left-0 right-0', className)} >
         {/* md or larger */}
-        <div className='flex gap-4 items-center'>
-          <DesktopNav links = {links}/>
-          <DesktopBagPopup popupClx='w-[340px]' trigger={<BagButton className='text-primary -mr-[3px] lg:min-w-0' />} />
-          <AuthWidget/>
+        <div className={
+          'flex flex-row h-[80px] items-center  justify-between ' +
+          'px-[8px] w-full mx-auto max-w-screen'
+        }>
+          <Logo size='md' href='/' outerClx='hidden lg:flex' key='two' variant='text-only' />
+          <Logo size='sm' href='/' outerClx='hidden md:flex lg:hidden' key='one' variant='text-only' />
+          {/* md or larger */}
+          <div className='flex w-full gap-4 items-center justify-between lg:ml-22'>
+            <DesktopNav links={links} />
+            <div className='flex items-center'>
+              <DesktopBagPopup popupClx='w-[340px]' trigger={<BagButton className='text-primary -mr-[3px] lg:min-w-0' />} />
+              <AuthWidget />
+            </div>
+          </div>
         </div>
-      </div>
-    </header>
-  )
-}
+      </header>
+    )
+  }
 
 export default DesktopHeader
 

package/components/header/mobile.tsx

@@ -86,28 +86,25 @@ const MobileHeader: React.FC<{
     // header element MUST be fixed, and NOT sticky.  Or else drawer breaks on mobile browsers
     return (<>
       <header className={cn(
-        `bg-background fixed z-header top-0 left-0 w-full h-19 ${menuOpen() ? 'hidden' : 'block'}`,
+        `bg-background fixed z-header top-0 left-0 w-full ${menuOpen() ? 'hidden' : 'block'}`,
         className
       )}>
         {/* smaller than md: mobile style drawer menu; h-11 is 44px, the standard mobile header height */}
-        <div className="flex h-11 items-center justify-between pl-6 pr-4">
-          <div className='h-[74px] w-pr-100 flex flex-row justify-between items-center font-bold'>
-            <Logo href='/' size='sm' className={'top-[3px] h-full'} layout='text-only' />
-            {/* Not that key to the cross-fade effect 
-              is that this is **on top of** the logo. */}
-            {menuOpen() && (
-              <div className={'absolute left-0 top-0 bottom-0 right-0 pl-8 ' +
-              'flex flex-row ' +
-              'bg-background animate-mobile-menu-open'
-            }>
-                <Icons.Avatar className='self-center ' />
-              </div>
-            )}
-            <div className='flex gap-0 flex-row'>
-              <BagButton className='text-primary -mr-[3px]' onClick={openBag} />
-              <MenuToggleButton className='text-foreground' open={menuOpen()} setOpen={setMenuOpen} />
+        <div className='w-full h-11 flex flex-row justify-between items-center font-bold pl-6 pr-4'>
+          <Logo href='/' size='sm' outerClx={'top-[3px] h-full'} variant='text-only' />
+          {/* Not that key to the cross-fade effect 
+            is that this is **on top of** the logo. */}
+          {menuOpen() && (
+            <div className={'absolute left-0 top-0 bottom-0 right-0 pl-8 ' +
+            'flex flex-row ' +
+            'bg-background animate-mobile-menu-open'
+          }>
+              <Icons.Avatar className='self-center ' />
             </div>
-
+          )}
+          <div className='flex gap-0 flex-row'>
+            <BagButton className='text-primary -mr-[3px]' onClick={openBag} />
+            <MenuToggleButton className='text-foreground' open={menuOpen()} setOpen={setMenuOpen} />
           </div>
 
         </div>