@luxfi/core 4.4.14 → 4.4.16

package/components/footer.tsx

@@ -1,78 +1,78 @@
-import React from 'react'
-
-import type { LinkDef } from '@hanzo/ui/types'
-import { NavItems } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import Copyright from './copyright'
-import type { SiteDef } from '../site-def'
-import { legal } from '../site-def/footer/legal'
-import Logo from './logo'
-
-const Footer: React.FC<{
-  siteDef: SiteDef,
-  className?: string,
-  noHorizPadding?: boolean
-}> = ({
-  siteDef,
-  className='',
-  noHorizPadding=false
-}) => {
-
-  const { footer, aboveCopyright } = siteDef
-  const smGridCols = Math.floor(footer.length/2)
-  const smGridColsClx = `sm:grid-cols-${smGridCols} `
-  const _aboveCopyright = (typeof aboveCopyright === 'undefined') ? legal : aboveCopyright
-
-  return (
-    <footer className={cn('grow flex flex-col justify-between gap-6 pb-[2vh]', className)}> 
-      <div className={
-        (noHorizPadding ? '' : 'px-5 md:px-8 ') +
-        'grid grid-cols-2 gap-4 gap-y-6 md:gap-x-6 lg:gap-8 ' + smGridColsClx +  
-        'md:w-full sm:justify-items-center md:mx-0 lg:w-full max-w-screen-2xl ' +
-        'md:flex md:flex-row md:justify-between ' 
-      }>
-        <div className='hidden lg:flex flex-col' key={0}>
-          <Logo size='md' layout='text-only' />
-        </div>
-        {footer.map((defs: LinkDef[], index: number) => {
-
-          const xsColSpanClx = ((index === footer.length - 1) && (footer.length % 2 === 1)) ? 
-            'xs:col-span-2 xs:mx-auto md:col-span-1 md:mx-0 ' : ''
-
-          return (
-            <NavItems
-              items={defs} 
-              currentAs={siteDef.currentAs}
-              as='nav' 
-              className={cn('sm:min-w-[150px] md:min-w-0 flex flex-col justify-start items-start ' + 
-                'gap-[11px] sm:gap-[12px] md:gap-[15px] ',
-                xsColSpanClx
-              )} 
-              key={index + 1}
-              itemClx={(def: LinkDef) => ((def.variant === 'linkFG') ?
-                'font-nav text-[15px]/[1.3] font-medium text-foreground tracking-normal'
-                : 
-                'text-[15px]/[1.1] font-normal tracking-[0.2px] text-muted-1'
-              )}
-            /> 
-          )
-        })}
-      </div>
-      <div className='md:mt-[2vh]'>
-      {_aboveCopyright.length > 0 && (
-        <NavItems
-          items={_aboveCopyright} 
-          as='div' 
-          className={'flex flex-row justify-center gap-4 mb-2'} 
-          itemClx={'text-sm text-center text-muted-2 underline hover:text-foreground'}
-        />
-      )} 
-        <Copyright className='text-sm text-center text-muted-3'/>
-      </div>
-    </footer>
-  )
-}
-
-export default Footer
+import React from 'react'
+
+import type { LinkDef } from '@hanzo/ui/types'
+import { NavItems } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+import Copyright from './copyright'
+import type { SiteDef } from '../site-def'
+import { legal } from '../site-def/footer/legal'
+import Logo from './logo'
+
+const Footer: React.FC<{
+  siteDef: SiteDef,
+  className?: string,
+  noHorizPadding?: boolean
+}> = ({
+  siteDef,
+  className='',
+  noHorizPadding=false
+}) => {
+
+  const { footer, aboveCopyright } = siteDef
+  const smGridCols = Math.floor(footer.length/2)
+  const smGridColsClx = `sm:grid-cols-${smGridCols} `
+  const _aboveCopyright = (typeof aboveCopyright === 'undefined') ? legal : aboveCopyright
+
+  return (
+    <footer className={cn('grow flex flex-col justify-between gap-6 pb-[2vh]', className)}> 
+      <div className={
+        (noHorizPadding ? '' : 'px-5 md:px-8 ') +
+        'grid grid-cols-2 gap-4 gap-y-6 md:gap-x-6 lg:gap-8 ' + smGridColsClx +  
+        'md:w-full sm:justify-items-center md:mx-0 lg:w-full max-w-screen-2xl ' +
+        'md:flex md:flex-row md:justify-between ' 
+      }>
+        <div className='hidden lg:flex flex-col' key={0}>
+          <Logo size='md' layout='text-only' />
+        </div>
+        {footer.map((defs: LinkDef[], index: number) => {
+
+          const xsColSpanClx = ((index === footer.length - 1) && (footer.length % 2 === 1)) ? 
+            'xs:col-span-2 xs:mx-auto md:col-span-1 md:mx-0 ' : ''
+
+          return (
+            <NavItems
+              items={defs} 
+              currentAs={siteDef.currentAs}
+              as='nav' 
+              className={cn('sm:min-w-[150px] md:min-w-0 flex flex-col justify-start items-start ' + 
+                'gap-[11px] sm:gap-[12px] md:gap-[15px] ',
+                xsColSpanClx
+              )} 
+              key={index + 1}
+              itemClx={(def: LinkDef) => ((def.variant === 'linkFG') ?
+                'font-nav text-[15px]/[1.3] font-medium text-foreground tracking-normal'
+                : 
+                'text-[15px]/[1.1] font-normal tracking-[0.2px] text-muted-1'
+              )}
+            /> 
+          )
+        })}
+      </div>
+      <div className='md:mt-[2vh]'>
+      {_aboveCopyright.length > 0 && (
+        <NavItems
+          items={_aboveCopyright} 
+          as='div' 
+          className={'flex flex-row justify-center gap-4 mb-2'} 
+          itemClx={'text-sm text-center text-muted-2 underline hover:text-foreground'}
+        />
+      )} 
+        <Copyright className='text-sm text-center text-muted-3'/>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer
 // flex flex-col justify-between gap-6

package/components/header/desktop.tsx

@@ -1,54 +1,54 @@
-import React from 'react'
-
-import { NavItems } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-import { AuthWidget } from '@hanzo/auth/components'
-
-import { Logo } from '..'
-
-import DesktopBagPopup from '../commerce/desktop-bag-popup'
-import BagButton from '../commerce/bag-button'
-
-
-import type { LinkDef } from '@hanzo/ui/types'
-
-const DesktopHeader: React.FC<{
-  currentAs: string | undefined
-  links: LinkDef[]
-  className?: string
-}> = ({
-  currentAs,
-  links,
-  className = ''
-}) => {
-
-    // 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 sticky z-header top-0  ', className)} >
-      {/* md or larger */}
-      <div className={
-        'flex flex-row h-[80px] items-center  justify-between ' +
-        'px-[32px] w-full 2xl:mx-auto max-w-screen-2xl'
-      }>
-        <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'/>
-        {/* md or larger */}
-        <div className='flex gap-4 items-center'>
-          <NavItems 
-            currentAs={currentAs}
-            items={links} 
-            className='flex md:gap-4 lg:justify-between lg:gap-7' 
-            itemClx='font-nav h-8'
-            key='three'
-          />
-          <DesktopBagPopup popupClx='w-[340px]' trigger={<BagButton className='text-primary -mr-[3px] lg:min-w-0' />} />
-          <AuthWidget/>
-        </div>
-      </div>
-    </header>
-  )
-}
-
-export default DesktopHeader
-
+import React from 'react'
+
+import { NavItems } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+import { AuthWidget } from '@hanzo/auth/components'
+
+import { Logo } from '..'
+
+import DesktopBagPopup from '../commerce/desktop-bag-popup'
+import BagButton from '../commerce/bag-button'
+
+
+import type { LinkDef } from '@hanzo/ui/types'
+
+const DesktopHeader: React.FC<{
+  currentAs: string | undefined
+  links: LinkDef[]
+  className?: string
+}> = ({
+  currentAs,
+  links,
+  className = ''
+}) => {
+
+    // 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 sticky z-header top-0  ', className)} >
+      {/* md or larger */}
+      <div className={
+        'flex flex-row h-[80px] items-center  justify-between ' +
+        'px-[32px] w-full 2xl:mx-auto max-w-screen-2xl'
+      }>
+        <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'/>
+        {/* md or larger */}
+        <div className='flex gap-4 items-center'>
+          <NavItems 
+            currentAs={currentAs}
+            items={links} 
+            className='flex md:gap-4 lg:justify-between lg:gap-7' 
+            itemClx='font-nav h-8'
+            key='three'
+          />
+          <DesktopBagPopup popupClx='w-[340px]' trigger={<BagButton className='text-primary -mr-[3px] lg:min-w-0' />} />
+          <AuthWidget/>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default DesktopHeader
+

package/components/header/index.tsx

@@ -1,26 +1,26 @@
-import React from 'react'
-
-import type { SiteDef } from '../../site-def'
-
-import DesktopHeader from './desktop'
-import MobileHeader from './mobile'
-import { cn } from '@hanzo/ui/util'
-
-const Header: React.FC<{
-  siteDef: SiteDef
-  className?: string
-}> = ({
-  siteDef,
-  className = ''
-}) => {
-
-  const { nav: { common, featured }, currentAs } = siteDef
-  const links = (featured) ? [...common, ...featured] : common
-
-  return (<>
-    <DesktopHeader className={cn(className, 'hidden md:flex')} links={links} currentAs={currentAs} />
-    <MobileHeader className={cn(className, 'md:hidden')} links={links} currentAs={currentAs} />
-  </>)
-}
-
-export default Header
+import React from 'react'
+
+import type { SiteDef } from '../../site-def'
+
+import DesktopHeader from './desktop'
+import MobileHeader from './mobile'
+import { cn } from '@hanzo/ui/util'
+
+const Header: React.FC<{
+  siteDef: SiteDef
+  className?: string
+}> = ({
+  siteDef,
+  className = ''
+}) => {
+
+  const { nav: { common, featured }, currentAs } = siteDef
+  const links = (featured) ? [...common, ...featured] : common
+
+  return (<>
+    <DesktopHeader className={cn(className, 'hidden md:flex')} links={links} currentAs={currentAs} />
+    <MobileHeader className={cn(className, 'md:hidden')} links={links} currentAs={currentAs} />
+  </>)
+}
+
+export default Header

package/components/header/mobile.tsx

@@ -1,161 +1,161 @@
-'use client'
-import React, { useState, useEffect  } from 'react'
-import { useRouter } from 'next/navigation'
-
-import type { LinkDef } from '@hanzo/ui/types'
-import { cn } from '@hanzo/ui/util'
-
-import { CartPanel, useCommerce } from '@hanzo/commerce'
-import { AuthWidget, LoginPanel } from '@hanzo/auth/components'
-
-import sendGAEvent from '../../next/analytics/google-analytics'
-import * as Icons from '../icons'
-
-import { Logo } from '..'
-
-import MenuToggleButton from '../commerce/mobile-menu-toggle-button'
-import BagButton from '../commerce/bag-button'
-import MobileBagDrawer from '../commerce/mobile-bag-drawer'
-import NavMenu from '../commerce/mobile-nav-menu'
-
-const bagClx = 'mt-4 mb-8 border-none py-0 px-4 w-full ' +
-    'sm:min-w-[350px] sm:max-w-[500px] sm:mx-auto min-h-[60vh] max-h-[70vh] ' + 
-    'sm:animate-in sm:zoom-in-90 '
-
-const MobileHeader: React.FC<{
-  currentAs: string | undefined
-  links: LinkDef[]
-  className?: string
-}> = ({
-  currentAs,
-  links,
-  className = ''
-}) => {
-
-  const cmmc = useCommerce()
-  const [menuState, setMenuState] = useState<'closed' | 'nav' | 'login' | 'bag'>('closed')
-  const [bagDrawerOpen, setBagDrawerOpen] = useState<boolean>(false)
-  const router = useRouter()
-
-  useEffect(() => {
-    if (menuState === 'bag' || bagDrawerOpen) {
-      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',
-      })
-    }
-  }, [menuState, bagDrawerOpen])
-
-  const menuOpen = () => (menuState !== 'closed')
-
-  const onLoginChanged = (token: string) => {
-    // by def, menu was in state 'login'
-    if (!!token) { setMenuState('nav') }
-  }
-
-  const setMenuOpen = (open: boolean) => {
-    if (!open) {
-      setMenuState('closed')
-    }
-    else {
-      setMenuState('nav')
-    }
-  }
-
-  const handleCheckout = () => {
-    setMenuState('closed')
-    setBagDrawerOpen(false)  
-    router.push('/checkout')
-  }
-
-  const openBag = () => {
-    if (menuOpen()) {
-      setMenuState('bag')
-    } 
-    else {
-      setBagDrawerOpen(true)  
-    }
-  }
-    // 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', 
-      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='relative h-full w-200 flex flex-row'>
-          <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 ' + 
-              'flex flex-col justify-center ' +
-              'bg-background animate-mobile-menu-open'
-            }>
-              <AuthWidget className='' handleLogin={() => {setMenuState('login')}}/>
-            </div>
-          )}
-        </div>
-        <div className='flex gap-0 '>
-          <BagButton className='text-primary -mr-[3px]' onClick={openBag}/>
-          <MenuToggleButton className='text-foreground' open={menuOpen()}  setOpen={setMenuOpen} />
-        </div>
-      </div>
-    </header>
-    <MobileBagDrawer 
-      className=''
-      open={bagDrawerOpen} 
-      setOpen={setBagDrawerOpen} 
-      handleCheckout={handleCheckout}
-    />
-    {menuOpen() && (
-      <div className={  
-        'fixed top-0 left-0 w-full h-full ' + 
-          // z must below header itself
-        'flex flex-column p-6 pt-15 bg-background z-below-header animate-mobile-menu-open' 
-      }>
-      {menuState === 'login' ? (
-        <LoginPanel noHeading onLoginChanged={onLoginChanged} className='sm:animate-in sm:zoom-in-90' />
-      ) : ( 
-        menuState === 'bag' ? (
-
-          <CartPanel 
-            handleCheckout={() => {router.push('/checkout')}} 
-            className={bagClx}
-            listClx='rounded-sm'
-            scrollAfter={6}
-            scrollHeightClx='h-[80vh]'
-            itemClx='mt-2'
-            totalClx='sticky px-1 pr-2 border rounded-sm -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-4 h-5 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>
-
-        ) : ( /* menuState === 'nav' */
-          <NavMenu 
-            currentAs={currentAs}
-            links={links}
-            className='sm:animate-in sm:zoom-in-90' 
-            commonItemClx='px-0 text-xl h-16 justify-start ' 
-          />
-        )
-      )} 
-      </div>
-    ) /* menuOpen */}
-  </>)
-}
-
-export default MobileHeader
+'use client'
+import React, { useState, useEffect  } from 'react'
+import { useRouter } from 'next/navigation'
+
+import type { LinkDef } from '@hanzo/ui/types'
+import { cn } from '@hanzo/ui/util'
+
+import { CartPanel, useCommerce } from '@hanzo/commerce'
+import { AuthWidget, LoginPanel } from '@hanzo/auth/components'
+
+import sendGAEvent from '../../next/analytics/google-analytics'
+import * as Icons from '../icons'
+
+import { Logo } from '..'
+
+import MenuToggleButton from '../commerce/mobile-menu-toggle-button'
+import BagButton from '../commerce/bag-button'
+import MobileBagDrawer from '../commerce/mobile-bag-drawer'
+import NavMenu from '../commerce/mobile-nav-menu'
+
+const bagClx = 'mt-4 mb-8 border-none py-0 px-4 w-full ' +
+    'sm:min-w-[350px] sm:max-w-[500px] sm:mx-auto min-h-[60vh] max-h-[70vh] ' + 
+    'sm:animate-in sm:zoom-in-90 '
+
+const MobileHeader: React.FC<{
+  currentAs: string | undefined
+  links: LinkDef[]
+  className?: string
+}> = ({
+  currentAs,
+  links,
+  className = ''
+}) => {
+
+  const cmmc = useCommerce()
+  const [menuState, setMenuState] = useState<'closed' | 'nav' | 'login' | 'bag'>('closed')
+  const [bagDrawerOpen, setBagDrawerOpen] = useState<boolean>(false)
+  const router = useRouter()
+
+  useEffect(() => {
+    if (menuState === 'bag' || bagDrawerOpen) {
+      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',
+      })
+    }
+  }, [menuState, bagDrawerOpen])
+
+  const menuOpen = () => (menuState !== 'closed')
+
+  const onLoginChanged = (token: string) => {
+    // by def, menu was in state 'login'
+    if (!!token) { setMenuState('nav') }
+  }
+
+  const setMenuOpen = (open: boolean) => {
+    if (!open) {
+      setMenuState('closed')
+    }
+    else {
+      setMenuState('nav')
+    }
+  }
+
+  const handleCheckout = () => {
+    setMenuState('closed')
+    setBagDrawerOpen(false)  
+    router.push('/checkout')
+  }
+
+  const openBag = () => {
+    if (menuOpen()) {
+      setMenuState('bag')
+    } 
+    else {
+      setBagDrawerOpen(true)  
+    }
+  }
+    // 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', 
+      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='relative h-full w-200 flex flex-row'>
+          <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 ' + 
+              'flex flex-col justify-center ' +
+              'bg-background animate-mobile-menu-open'
+            }>
+              <AuthWidget className='' handleLogin={() => {setMenuState('login')}}/>
+            </div>
+          )}
+        </div>
+        <div className='flex gap-0 '>
+          <BagButton className='text-primary -mr-[3px]' onClick={openBag}/>
+          <MenuToggleButton className='text-foreground' open={menuOpen()}  setOpen={setMenuOpen} />
+        </div>
+      </div>
+    </header>
+    <MobileBagDrawer 
+      className=''
+      open={bagDrawerOpen} 
+      setOpen={setBagDrawerOpen} 
+      handleCheckout={handleCheckout}
+    />
+    {menuOpen() && (
+      <div className={  
+        'fixed top-0 left-0 w-full h-full ' + 
+          // z must below header itself
+        'flex flex-column p-6 pt-15 bg-background z-below-header animate-mobile-menu-open' 
+      }>
+      {menuState === 'login' ? (
+        <LoginPanel noHeading onLoginChanged={onLoginChanged} className='sm:animate-in sm:zoom-in-90' />
+      ) : ( 
+        menuState === 'bag' ? (
+
+          <CartPanel 
+            handleCheckout={() => {router.push('/checkout')}} 
+            className={bagClx}
+            listClx='rounded-sm'
+            scrollAfter={6}
+            scrollHeightClx='h-[80vh]'
+            itemClx='mt-2'
+            totalClx='sticky px-1 pr-2 border rounded-sm -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-4 h-5 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>
+
+        ) : ( /* menuState === 'nav' */
+          <NavMenu 
+            currentAs={currentAs}
+            links={links}
+            className='sm:animate-in sm:zoom-in-90' 
+            commonItemClx='px-0 text-xl h-16 justify-start ' 
+          />
+        )
+      )} 
+      </div>
+    ) /* menuOpen */}
+  </>)
+}
+
+export default MobileHeader