@luxfi/core 5.1.4 → 5.1.6

package/components/commerce/mobile-menu-toggle-button.tsx

@@ -1,35 +1,35 @@
-'use client'
-import React, { useState } from 'react'
-
-import { Plus } from 'lucide-react'
-
-import { Button } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-const MobileMenuToggleButton: React.FC<{
-  open: boolean
-  setOpen: (b: boolean) => void
-  className?: string
-}> = ({
-  open,
-  setOpen,
-  className=''
-}) => {
-
-  return (
-    <Button 
-      variant='ghost' 
-      size='default' 
-      rounded='full' 
-      onClick={() => {setOpen(!open)}} 
-      className={cn('p-0 aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75', className)}
-    >
-      <Plus width={28} height={28} className={
-        'block h-full will-change-transform transition-transform transition-scale transition-duration-[1500] ' + 
-        (open ? 'rotate-[135deg] scale-110' : 'rotate-none')
-      } />
-    </Button>
-  )
-}
-
-export default MobileMenuToggleButton
+'use client'
+import React, { useState } from 'react'
+
+import { Plus } from 'lucide-react'
+
+import { Button } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+const MobileMenuToggleButton: React.FC<{
+  open: boolean
+  setOpen: (b: boolean) => void
+  className?: string
+}> = ({
+  open,
+  setOpen,
+  className=''
+}) => {
+
+  return (
+    <Button 
+      variant='ghost' 
+      size='default' 
+      rounded='full' 
+      onClick={() => {setOpen(!open)}} 
+      className={cn('p-0 aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75', className)}
+    >
+      <Plus width={28} height={28} className={
+        'block h-full will-change-transform transition-transform transition-scale transition-duration-[1500] ' + 
+        (open ? 'rotate-[135deg] scale-110' : 'rotate-none')
+      } />
+    </Button>
+  )
+}
+
+export default MobileMenuToggleButton

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

@@ -1,98 +1,98 @@
-'use client'
-import React, { useState } from 'react'
-import type { LinkDefExtended } from '../../site-def/main-nav'
-import { LeftArrow, RightArrow, Search } from '../icons'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '@hanzo/ui/primitives'
-import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
-import { ChatWidget } from '@luxfi/core'
-import Link from 'next/link'
-
-interface MobileNavMenuAIProps {
-    link: LinkDefExtended,
-    setChatbotOpen: (open: boolean) => void
-}
-
-const MobileNavMenuAI: React.FC<MobileNavMenuAIProps> = ({
-    link,
-    setChatbotOpen
-}) => {
-    const [isOpen, setIsOpen] = useState<boolean>(false)
-
-    React.useEffect(() => {
-        console.log('open', setChatbotOpen)
-    }, [setChatbotOpen]);
-
-    return (
-        <>
-            <Link href="https://lux.chat">
-                <div className="w-full px-5 py-4 text-2xl bg-[#202020] cursor-pointer" onClick={() => {
-                    console.log('test1', setChatbotOpen)
-                    if (setChatbotOpen) {
-                        setChatbotOpen(true)
-                        console.log('test2')
-                    }
-                }}>
-                    <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 ">Ask AI Chat...</div>
-                        <RightArrow className='w-6 h-6 flex-none' />
-                    </div>
-                </div>
-            </Link>
-            <div className={`fixed left-0 top-0 w-screen h-[calc(100vh-64px)] ${isOpen ? 'block' : 'hidden'}`} style={{ backgroundColor: 'black' }}>
-                <div className="h-fit bg-[#202020]">
-                    <Command className='rounded-lg border shadow-md text-[#A7A7A8]'>
-                        <div className="w-full px-5 py-4 text-2xl cursor-pointer">
-                            <div className="flex items-center gap-5 border-b border-[#3A3A3A]">
-                                <LeftArrow className='w-6 h-6' onClick={() => setIsOpen(false)} />
-                                {/* <Search className='w-6 h-6 flex-none' />
-                                <div className="text-white font-bold flex-1 ">Ask AI Chat...</div> */}
-                                <CommandInput className="text-white font-bold flex-1 text-xl" placeholder='Ask AI Chat...' />
-                                <RightArrow className='w-6 h-6 flex-none' />
-                            </div>
-                        </div>
-                        <CommandList className='max-h-none h-fit'>
-                            <CommandEmpty>No result found.</CommandEmpty>
-                            <CommandGroup heading="Suggestions">
-                                <CommandItem>
-                                    <Calendar className='mr-2 h-4 w-4' />
-                                    <span>Calendar</span>
-                                </CommandItem>
-                                <CommandItem>
-                                    <Smile className='mr-2 h-4 w-4' />
-                                    <span>Search Emoji</span>
-                                </CommandItem>
-                                <CommandItem>
-                                    <Calculator className="mr-2 h-4 w-4" />
-                                    <span>Calculator</span>
-                                </CommandItem>
-                            </CommandGroup>
-                            <CommandSeparator>
-                            </CommandSeparator>
-                            <CommandGroup heading='Settings'>
-                                <CommandItem>
-                                    <User className='mr-2 h-4 w-4' />
-                                    <span>Profile</span>
-                                    <CommandShortcut>⌘P</CommandShortcut>
-                                </CommandItem>
-                                <CommandItem>
-                                    <CreditCard className="mr-2 h-4 w-4" />
-                                    <span>Billing</span>
-                                    <CommandShortcut>⌘B</CommandShortcut>
-                                </CommandItem>
-                                <CommandItem>
-                                    <Settings className="mr-2 h-4 w-4" />
-                                    <span>Settings</span>
-                                    <CommandShortcut>⌘S</CommandShortcut>
-                                </CommandItem>
-                            </CommandGroup>
-                        </CommandList>
-                    </Command>
-
-                </div>
-            </div>
-        </>
-    )
-}
-
+'use client'
+import React, { useState } from 'react'
+import type { LinkDefExtended } from '../../site-def/main-nav'
+import { LeftArrow, RightArrow, Search } from '../icons'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '@hanzo/ui/primitives'
+import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
+import { ChatWidget } from '@luxfi/core'
+import Link from 'next/link'
+
+interface MobileNavMenuAIProps {
+    link: LinkDefExtended,
+    setChatbotOpen: (open: boolean) => void
+}
+
+const MobileNavMenuAI: React.FC<MobileNavMenuAIProps> = ({
+    link,
+    setChatbotOpen
+}) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false)
+
+    React.useEffect(() => {
+        console.log('open', setChatbotOpen)
+    }, [setChatbotOpen]);
+
+    return (
+        <>
+            <Link href="https://lux.chat">
+                <div className="w-full px-5 py-4 text-2xl bg-[#202020] cursor-pointer" onClick={() => {
+                    console.log('test1', setChatbotOpen)
+                    if (setChatbotOpen) {
+                        setChatbotOpen(true)
+                        console.log('test2')
+                    }
+                }}>
+                    <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 ">Ask AI Chat...</div>
+                        <RightArrow className='w-6 h-6 flex-none' />
+                    </div>
+                </div>
+            </Link>
+            <div className={`fixed left-0 top-0 w-screen h-[calc(100vh-64px)] ${isOpen ? 'block' : 'hidden'}`} style={{ backgroundColor: 'black' }}>
+                <div className="h-fit bg-[#202020]">
+                    <Command className='rounded-lg border shadow-md text-[#A7A7A8]'>
+                        <div className="w-full px-5 py-4 text-2xl cursor-pointer">
+                            <div className="flex items-center gap-5 border-b border-[#3A3A3A]">
+                                <LeftArrow className='w-6 h-6' onClick={() => setIsOpen(false)} />
+                                {/* <Search className='w-6 h-6 flex-none' />
+                                <div className="text-white font-bold flex-1 ">Ask AI Chat...</div> */}
+                                <CommandInput className="text-white font-bold flex-1 text-xl" placeholder='Ask AI Chat...' />
+                                <RightArrow className='w-6 h-6 flex-none' />
+                            </div>
+                        </div>
+                        <CommandList className='max-h-none h-fit'>
+                            <CommandEmpty>No result found.</CommandEmpty>
+                            <CommandGroup heading="Suggestions">
+                                <CommandItem>
+                                    <Calendar className='mr-2 h-4 w-4' />
+                                    <span>Calendar</span>
+                                </CommandItem>
+                                <CommandItem>
+                                    <Smile className='mr-2 h-4 w-4' />
+                                    <span>Search Emoji</span>
+                                </CommandItem>
+                                <CommandItem>
+                                    <Calculator className="mr-2 h-4 w-4" />
+                                    <span>Calculator</span>
+                                </CommandItem>
+                            </CommandGroup>
+                            <CommandSeparator>
+                            </CommandSeparator>
+                            <CommandGroup heading='Settings'>
+                                <CommandItem>
+                                    <User className='mr-2 h-4 w-4' />
+                                    <span>Profile</span>
+                                    <CommandShortcut>⌘P</CommandShortcut>
+                                </CommandItem>
+                                <CommandItem>
+                                    <CreditCard className="mr-2 h-4 w-4" />
+                                    <span>Billing</span>
+                                    <CommandShortcut>⌘B</CommandShortcut>
+                                </CommandItem>
+                                <CommandItem>
+                                    <Settings className="mr-2 h-4 w-4" />
+                                    <span>Settings</span>
+                                    <CommandShortcut>⌘S</CommandShortcut>
+                                </CommandItem>
+                            </CommandGroup>
+                        </CommandList>
+                    </Command>
+
+                </div>
+            </div>
+        </>
+    )
+}
+
 export default MobileNavMenuAI

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

@@ -1,46 +1,46 @@
-import React, { useState } from 'react'
-import type { LinkDefExtended } from '../../site-def/main-nav'
-import { RightArrow } from '../icons'
-import LeftArrow from '../icons/left-arrow'
-import Link from 'next/link'
-
-interface MobileNavMenuItemProps {
-    link: LinkDefExtended
-}
-
-const MobileNavMenuItem: React.FC<MobileNavMenuItemProps> = ({
-    link
-}) => {
-    const [isOpen, setIsOpen] = useState<boolean>(false);
-
-    return (
-        <>
-            <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl cursor-pointer" onClick={() => setIsOpen(true)}>
-                <span className='block w-[18px] h-[22px] items-center'>{link.icon}</span>
-                <span className='flex-1'>{link.title}</span>
-                <RightArrow className='' />
-            </div>
-            <div className={`fixed left-0 top-0 w-screen h-screen ${isOpen ? 'block' : 'hidden'}`} style={{ backgroundColor: 'black' }}>
-                <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl font-bold" onClick={() => setIsOpen(false)}>
-                    <LeftArrow />
-                    <span className="text-white">{link.title}</span>
-                </div>
-                <div className="flex flex-col">
-                    {link.childMenu?.map((menu, index) => {
-                        return (
-                            <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl" key={index}>
-                                <span className='block w-[18px] h-[22px] self-center'>{menu.icon}</span>
-                                <span className='flex-1'>{menu.title}</span>
-                                <Link href={menu.href}>
-                                    <RightArrow className='' />
-                                </Link>
-                            </div>
-                        )
-                    })}
-                </div>
-            </div>
-        </>
-    )
-}
-
+import React, { useState } from 'react'
+import type { LinkDefExtended } from '../../site-def/main-nav'
+import { RightArrow } from '../icons'
+import LeftArrow from '../icons/left-arrow'
+import Link from 'next/link'
+
+interface MobileNavMenuItemProps {
+    link: LinkDefExtended
+}
+
+const MobileNavMenuItem: React.FC<MobileNavMenuItemProps> = ({
+    link
+}) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    return (
+        <>
+            <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl cursor-pointer" onClick={() => setIsOpen(true)}>
+                <span className='block w-[18px] h-[22px] items-center'>{link.icon}</span>
+                <span className='flex-1'>{link.title}</span>
+                <RightArrow className='' />
+            </div>
+            <div className={`fixed left-0 top-0 w-screen h-screen ${isOpen ? 'block' : 'hidden'}`} style={{ backgroundColor: 'black' }}>
+                <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl font-bold" onClick={() => setIsOpen(false)}>
+                    <LeftArrow />
+                    <span className="text-white">{link.title}</span>
+                </div>
+                <div className="flex flex-col">
+                    {link.childMenu?.map((menu, index) => {
+                        return (
+                            <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl" key={index}>
+                                <span className='block w-[18px] h-[22px] self-center'>{menu.icon}</span>
+                                <span className='flex-1'>{menu.title}</span>
+                                <Link href={menu.href}>
+                                    <RightArrow className='' />
+                                </Link>
+                            </div>
+                        )
+                    })}
+                </div>
+            </div>
+        </>
+    )
+}
+
 export default MobileNavMenuItem

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

@@ -1,79 +1,80 @@
-'use client'
-import React from 'react'
-
-import type { LinkDef } from '@hanzo/ui/types'
-import { LinkElement } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-import type { LinkDefExtended } 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'
-
-const MobileNav: React.FC<{
-  currentAs: string | undefined
-  links: LinkDefExtended[]
-  className?: string
-  commonItemClx?: string | ((def: LinkDef) => string),
-  setChatbotOpen: (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
-   */
-  onAction?: () => void
-  setMenuState: (arg: 'closed' | 'nav' | 'login' | 'bag') => void
-}> = ({
-  currentAs,
-  links,
-  onAction,
-  setMenuState,
-  className = '',
-  commonItemClx,
-  setChatbotOpen,
-}) => (
-    links.length > 0 ? (
-
-      <div className={cn('flex flex-col h-full', className)} >
-        <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'
-              if (currentAs && currentAs === el.href) {
-                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)) : ''
-
-            // return (
-            //   <LinkElement 
-            //     def={el}
-            //     key={`common-${index}`}
-            //     size='lg'
-            //     className={cn(internalClx, itemClx)}
-            //     onClick={onAction}  
-            //   />
-            // )
-            if (el.isAIMenu) {
-              return <MobileNavMenuAI link={el} setChatbotOpen={setChatbotOpen} />
-            } else {
-              return <MobileNavMenuItem link={el} />
-            }
-          })}
-        </div>
-        <MobileAuthWidget className=' text-2xl' handleLogin={() => { setMenuState('login') }} />
-      </div>
-    )
-      : null
-  )
-
-export default MobileNav
+'use client'
+import React from 'react'
+
+import type { LinkDef } from '@hanzo/ui/types'
+import { LinkElement } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+import type { LinkDefExtended } 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'
+
+const MobileNav: React.FC<{
+  currentAs: string | undefined
+  links: LinkDefExtended[]
+  className?: string
+  commonItemClx?: string | ((def: LinkDef) => string),
+  setChatbotOpen: (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
+   */
+  onAction?: () => void
+    // TODO :aa shouldn't be so aware of parent context! 
+  setMenuState: (arg: 'closed' | 'nav' | 'login' | 'bag') => void
+}> = ({
+  currentAs,
+  links,
+  onAction,
+  setMenuState,
+  className = '',
+  commonItemClx,
+  setChatbotOpen,
+}) => (
+  links.length > 0 ? (
+
+    <div className={cn('flex flex-col h-full', className)} >
+      <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'
+            if (currentAs && currentAs === el.href) {
+              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)) : ''
+
+          // return (
+          //   <LinkElement 
+          //     def={el}
+          //     key={`common-${index}`}
+          //     size='lg'
+          //     className={cn(internalClx, itemClx)}
+          //     onClick={onAction}  
+          //   />
+          // )
+          if (el.isAIMenu) {
+            return <MobileNavMenuAI link={el} setChatbotOpen={setChatbotOpen} />
+          } 
+          else {
+            return <MobileNavMenuItem link={el} />
+          }
+        })}
+      </div>
+      <MobileAuthWidget className=' text-2xl' handleLogin={() => { setMenuState('login') }} />
+    </div>
+  ) : null
+)
+
+export default MobileNav