@luxfi/ui 5.3.16 → 5.3.17

package/components/drawer-margin.tsx

@@ -1,28 +1,28 @@
-'use client'
-import React from 'react'
-
-import { cn } from '@hanzo/ui/util'
-import { useCommerceDrawer } from '@luxfi/ui/commerce'
-import { observer } from 'mobx-react-lite'
-
-const DrawerMargin: React.FC<{
-  clx?: string
-}> = observer(({
-  clx=''
-}) => {
-
-  const drawer = useCommerceDrawer()
-  if (!drawer) {
-    throw new Error("DrawerMargin must be used with a CommerceUIContext!")
-  }
-  return (
-    <div 
-      className={cn('transition-height', clx)} 
-      style={{
-        height: drawer.state === 'micro' ? drawer.microHeight : 0
-      }}
-    />
-  )
-})
-
-export default DrawerMargin
+'use client'
+import React from 'react'
+
+import { cn } from '@hanzo/ui/util'
+import { useCommerceDrawer } from '@luxfi/ui/commerce'
+import { observer } from 'mobx-react-lite'
+
+const DrawerMargin: React.FC<{
+  clx?: string
+}> = observer(({
+  clx=''
+}) => {
+
+  const drawer = useCommerceDrawer()
+  if (!drawer) {
+    throw new Error("DrawerMargin must be used with a CommerceUIContext!")
+  }
+  return (
+    <div 
+      className={cn('transition-height', clx)} 
+      style={{
+        height: drawer.state === 'micro' ? drawer.microHeight : 0
+      }}
+    />
+  )
+})
+
+export default DrawerMargin

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 ' +
-        'md:flex md:flex-row md:justify-between px-[24px]' 
-      }>
-        <div className='hidden lg:flex flex-col' key={0}>
-          <Logo size='md' variant='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 tracking-normal text-muted-1 sm:hover:text-foreground transition-color duration-500'
-                : 
-                'text-[15px]/[1.1] font-normal tracking-[0.2px] text-muted-1 sm:hover:text-foreground transition-color duration-500'
-              )}
-            /> 
-          )
-        })}
-      </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 ' +
+        'md:flex md:flex-row md:justify-between px-[24px]' 
+      }>
+        <div className='hidden lg:flex flex-col' key={0}>
+          <Logo size='md' variant='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 tracking-normal text-muted-1 sm:hover:text-foreground transition-color duration-500'
+                : 
+                'text-[15px]/[1.1] font-normal tracking-[0.2px] text-muted-1 sm:hover:text-foreground transition-color duration-500'
+              )}
+            /> 
+          )
+        })}
+      </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,51 +1,51 @@
-import React from 'react'
-
-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 DesktopNav from '../commerce/desktop-nav-menu'
-
-
-import type { LinkDef } from '@hanzo/ui/types'
-
-const DesktopHeader: React.FC<{
-  currentAs: string | undefined
-  links: LinkDef[]
-  className?: string
-}> = ({
-  links,
-  className = ''
-}) => {
-    const [isMenuOpened, setIsMenuOpen] = React.useState(false);
-    const opendMenuClass = isMenuOpened ? " h-full" : ""
-
-    // 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-[rgba(0, 0, 0, 0.5)] !backdrop-blur-3xl fixed z-header top-0 left-0 right-0', className, opendMenuClass)} >
-        {/* md or larger */}
-        <div className={
-          'flex flex-row h-[80px] items-center justify-between ' +
-          'mx-[24px] w-full 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-center'>
-            <DesktopNav links={links} isMenuOpened={isMenuOpened} setIsMenuOpen={setIsMenuOpen} />
-          </div>
-          <div className='flex items-center'>
-            <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 { 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 DesktopNav from '../commerce/desktop-nav-menu'
+
+
+import type { LinkDef } from '@hanzo/ui/types'
+
+const DesktopHeader: React.FC<{
+  currentAs: string | undefined
+  links: LinkDef[]
+  className?: string
+}> = ({
+  links,
+  className = ''
+}) => {
+    const [isMenuOpened, setIsMenuOpen] = React.useState(false);
+    const opendMenuClass = isMenuOpened ? " h-full" : ""
+
+    // 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-[rgba(0, 0, 0, 0.5)] !backdrop-blur-3xl fixed z-header top-0 left-0 right-0', className, opendMenuClass)} >
+        {/* md or larger */}
+        <div className={
+          'flex flex-row h-[80px] items-center justify-between ' +
+          'mx-[24px] w-full 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-center'>
+            <DesktopNav links={links} isMenuOpened={isMenuOpened} setIsMenuOpen={setIsMenuOpen} />
+          </div>
+          <div className='flex items-center'>
+            <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,44 +1,44 @@
-'use client'
-import React from 'react'
-
-import type { SiteDef } from '../../site-def'
-
-import DesktopHeader from './desktop'
-import MobileHeader from './mobile'
-import { cn } from '@hanzo/ui/util'
-import { ChatWidget } from '../../components'
-
-const Header: React.FC<{
-  siteDef: SiteDef
-  className?: string
-}> = ({
-  siteDef,
-  className = ''
-}) => {
-
-    // TODO
-    const [open, setOpen] = React.useState<boolean>(false);
-
-    const { nav: { common, featured }, currentAs } = siteDef
-    const links = (featured) ? [...common, ...featured] : common
-    const isDesktopView = (): boolean => {
-      if (typeof window === 'undefined') return false 
-      return window.innerWidth > 768 
-    }
-
-    return (<>
-      <DesktopHeader
-        className={cn(className, 'hidden md:flex')}
-        links={links}
-        currentAs={currentAs}
-      />
-      <MobileHeader
-        className={cn(className, 'md:hidden')}
-        links={links}
-        currentAs={currentAs}
-        setChatbotOpen={setOpen}
-      />
-    </>)
-  }
-
-export default Header
+'use client'
+import React from 'react'
+
+import type { SiteDef } from '../../site-def'
+
+import DesktopHeader from './desktop'
+import MobileHeader from './mobile'
+import { cn } from '@hanzo/ui/util'
+import { ChatWidget } from '../../components'
+
+const Header: React.FC<{
+  siteDef: SiteDef
+  className?: string
+}> = ({
+  siteDef,
+  className = ''
+}) => {
+
+    // TODO
+    const [open, setOpen] = React.useState<boolean>(false);
+
+    const { nav: { common, featured }, currentAs } = siteDef
+    const links = (featured) ? [...common, ...featured] : common
+    const isDesktopView = (): boolean => {
+      if (typeof window === 'undefined') return false 
+      return window.innerWidth > 768 
+    }
+
+    return (<>
+      <DesktopHeader
+        className={cn(className, 'hidden md:flex')}
+        links={links}
+        currentAs={currentAs}
+      />
+      <MobileHeader
+        className={cn(className, 'md:hidden')}
+        links={links}
+        currentAs={currentAs}
+        setChatbotOpen={setOpen}
+      />
+    </>)
+  }
+
+export default Header