@luxfi/core 5.2.4 → 5.2.6

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

@@ -0,0 +1,235 @@
+"use client"
+
+import * as React from "react"
+
+import Link from "next/link"
+import { cn } from '@hanzo/ui/util'
+import type { LinkDef } from '@hanzo/ui/types'
+import type { LinkDefExtended } from "../../site-def/main-nav"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle
+} from '@hanzo/ui/primitives'
+import Warpcast from "../icons/warpcast"
+
+// const components: { title: string; href: string; description: string }[] = [
+//   {
+//     title: "Alert Dialog",
+//     href: "/docs/primitives/alert-dialog",
+//     description:
+//       "A modal dialog that interrupts the user with important content and expects a response.",
+//   },
+//   {
+//     title: "Hover Card",
+//     href: "/docs/primitives/hover-card",
+//     description:
+//       "For sighted users to preview content available behind a link.",
+//   },
+//   {
+//     title: "Progress",
+//     href: "/docs/primitives/progress",
+//     description:
+//       "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+//   },
+//   {
+//     title: "Scroll-area",
+//     href: "/docs/primitives/scroll-area",
+//     description: "Visually or semantically separates content.",
+//   },
+//   {
+//     title: "Tabs",
+//     href: "/docs/primitives/tabs",
+//     description:
+//       "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+//   },
+//   {
+//     title: "Tooltip",
+//     href: "/docs/primitives/tooltip",
+//     description:
+//       "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+//   },
+// ]
+
+// export function NavigationMenuDemo() {
+//   return (
+//     <NavigationMenu>
+//       <NavigationMenuList>
+//         <NavigationMenuItem>
+//           <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+//           <NavigationMenuContent>
+//             <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+//               <li className="row-span-3">
+//                 <NavigationMenuLink asChild>
+//                   <a
+//                     className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+//                     href="/"
+//                   >
+//                     {/* <Icons.logo className="h-6 w-6" /> */}
+//                     <div className="mb-2 mt-4 text-lg font-medium">
+//                       shadcn/ui
+//                     </div>
+//                     <p className="text-sm leading-tight text-muted-foreground">
+//                       Beautifully designed components that you can copy and
+//                       paste into your apps. Accessible. Customizable. Open
+//                       Source.
+//                     </p>
+//                   </a>
+//                 </NavigationMenuLink>
+//               </li>
+//               <ListItem href="/docs" title="Introduction">
+//                 Re-usable components built using Radix UI and Tailwind CSS.
+//               </ListItem>
+//               <ListItem href="/docs/installation" title="Installation">
+//                 How to install dependencies and structure your app.
+//               </ListItem>
+//               <ListItem href="/docs/primitives/typography" title="Typography">
+//                 Styles for headings, paragraphs, lists...etc
+//               </ListItem>
+//             </ul>
+//           </NavigationMenuContent>
+//         </NavigationMenuItem>
+//         <NavigationMenuItem>
+//           <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+//           <NavigationMenuContent>
+//             <ul className="w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-1 lg:w-[600px] ">
+//               {components.map((component) => (
+//                 <ListItem
+//                   key={component.title}
+//                   title={component.title}
+//                   href={component.href}
+//                 >
+//                   {component.description}
+//                 </ListItem>
+//               ))}
+//             </ul>
+//           </NavigationMenuContent>
+//         </NavigationMenuItem>
+//         <NavigationMenuItem>
+//           <Link href="/docs" legacyBehavior passHref>
+//             <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+//               Documentation
+//             </NavigationMenuLink>
+//           </Link>
+//         </NavigationMenuItem>
+//       </NavigationMenuList>
+//     </NavigationMenu>
+//   )
+// }
+
+
+const DesktopNav: React.FC<{
+  links: LinkDefExtended[],
+}> = ({
+  links
+
+}) => (
+    links.length > 0 ? (
+      <NavigationMenu>
+        <NavigationMenuList>
+          {links.map((el, index) => {
+
+            if (el.isAIMenu) {
+              return (
+                <NavigationMenuItem>
+                  <Link href={el.href} legacyBehavior passHref>
+                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                      {el.title}
+                    </NavigationMenuLink>
+                  </Link>
+                </NavigationMenuItem>
+              )
+            } else if (el.title == 'Community') {
+              return (
+                <NavigationMenuItem>
+                  <NavigationMenuTrigger>{el.title}</NavigationMenuTrigger>
+                  <NavigationMenuContent>
+                    <ul className="grid md:grid-cols-2 gap-3 p-6 md:w-[400px] lg:w-[500px]">
+                      <li className="row-span-3">
+                        <NavigationMenuLink asChild>
+                          <a
+                            className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                            href={el.href}
+                          >
+                            <Warpcast />
+                            <div className="mb-2 mt-4 text-lg font-medium">
+                              {el.title}
+                            </div>
+                            <p className="text-sm leading-tight text-muted-foreground">
+                              {el.details}
+                            </p>
+                          </a>
+                        </NavigationMenuLink>
+                      </li>
+                      {el.childMenu?.map((component) => (
+                        <div className="relative flex items-center my-2">
+                          <div className="mr-2 mt-0">
+                          {component.icon}
+                          </div>
+                          <ListItem href={component.href} title={component.title}>
+                            {component.contents}
+                          </ListItem>
+                        </div>
+                      ))}
+
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+              )
+            } else {
+              return (
+                <NavigationMenuItem>
+                  <NavigationMenuTrigger>{el.title}</NavigationMenuTrigger>
+                  <NavigationMenuContent>
+                    <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[500px] ">
+                      {el.childMenu?.map((component) => (
+                        <ListItem
+                          key={component.title}
+                          title={component.title}
+                          href={component.href}
+                        >
+                          {component.contents}
+                        </ListItem>
+                      ))}
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+              )
+            }
+
+          })}
+        </NavigationMenuList>
+      </NavigationMenu>
+    ) : null
+  )
+export default DesktopNav
+
+const ListItem = React.forwardRef<
+  React.ElementRef<"a">,
+  React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+  return (
+    <li>
+      <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:bg-level-1 hover:text-accent-foreground focus:bg-level-1 focus:text-accent-foreground",
+            className
+          )}
+          {...props}
+        >
+          <div className="text-sm font-medium leading-none">{title}</div>
+          <p className="line-clamp-3 text-sm leading-snug text-muted-foreground">
+            {children}
+          </p>
+        </a>
+      </NavigationMenuLink>
+    </li>
+  )
+})
+ListItem.displayName = "ListItem"

package/components/commerce/mobile-login-button.tsx

@@ -16,7 +16,6 @@ import { cn } from '@hanzo/ui/util'
 
 import { useAuth } from "@hanzo/auth/service"
 
-import { Avatar } from "../icons"
 import { Ethereum } from "@hanzo/auth/icons"
 import { Icons } from ".."
 
@@ -26,10 +25,12 @@ const MobileAuthWidget: React.FC<{
     handleLogin?: () => void
 }> = observer(({
     noLogin = false,
-    handleLogin,
     className
 }) => {
     const auth = useAuth()
+    const handleLogin = () => {
+        window.location.href = "https://lux.id";
+      };
 
     if (!auth) {
         return null

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

@@ -1,98 +1,45 @@
 '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'
+import { 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'
 
 interface MobileNavMenuAIProps {
-    link: LinkDefExtended,
-    setChatbotOpen: (open: boolean) => void
+    setMenuOpen: (open: boolean) => void
 }
 
-const MobileNavMenuAI: React.FC<MobileNavMenuAIProps> = ({
-    link,
-    setChatbotOpen
-}) => {
+const MobileNavMenuAI: React.FC<MobileNavMenuAIProps> = ({ setMenuOpen }) => {
     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 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>
             </div>
+            <div className={
+                'fixed bottom-0 sm:bottom-16 right-0 w-full h-full ' +
+                'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating ' +
+                (isOpen ? 'flex' : 'hidden')
+            }>
+                <Card className='flex flex-col h-full w-full'>
+                    <div className='flex px-4 py-2 h-16 bg-level-0 items-center justify-between'>
+                        <h3 className='font-semibold font-heading'>LUX<span className='opacity-60'>AI</span></h3>
+                        <Button onClick={() => setIsOpen(false)} variant='link' size='icon' className='w-fit sm:hidden'>
+                        <Plus className='w-6 h-6 flex-none mr-1 rotate-45 transition-transform'/>
+                        </Button>
+                    </div>
+                    <iframe src="https://lux.chat/iframe" className='h-full' />
+                </Card>
+            </div>
+
         </>
     )
-}
+};
 
-export default MobileNavMenuAI
+export default MobileNavMenuAI;

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

@@ -3,13 +3,17 @@ import type { LinkDefExtended } from '../../site-def/main-nav'
 import { RightArrow } from '../icons'
 import LeftArrow from '../icons/left-arrow'
 import Link from 'next/link'
+import MobileNavMenuAI from './mobile-nav-menu-ai'
 
 interface MobileNavMenuItemProps {
-    link: LinkDefExtended
+    link: LinkDefExtended,
+    setMenuOpen: (open: boolean) => void
+
 }
 
 const MobileNavMenuItem: React.FC<MobileNavMenuItemProps> = ({
-    link
+    link,
+    setMenuOpen
 }) => {
     const [isOpen, setIsOpen] = useState<boolean>(false);
 
@@ -21,6 +25,7 @@ const MobileNavMenuItem: React.FC<MobileNavMenuItemProps> = ({
                 <RightArrow className='' />
             </div>
             <div className={`fixed left-0 top-0 w-screen h-screen ${isOpen ? 'block' : 'hidden'}`} style={{ backgroundColor: 'black' }}>
+                <MobileNavMenuAI setMenuOpen={setMenuOpen} />
                 <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>
@@ -28,13 +33,12 @@ const MobileNavMenuItem: React.FC<MobileNavMenuItemProps> = ({
                 <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>
+                            <Link href={menu.href}>
+                                <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl" key={index}>
+                                    <span className='w-[18px] h-[22px] self-center flex items-center justify-center'>{menu.icon}</span>
+                                    <span className='flex-1'>{menu.title}</span>
+                                </div>
+                            </Link>
                         )
                     })}
                 </div>

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

@@ -2,7 +2,6 @@
 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'
@@ -13,68 +12,57 @@ const MobileNav: React.FC<{
   currentAs: string | undefined
   links: LinkDefExtended[]
   className?: string
-  commonItemClx?: string | ((def: LinkDef) => string),
-  setChatbotOpen: (open: boolean) => void,
+  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
    */
-  onAction?: () => void
-    // TODO :aa shouldn't be so aware of parent context! 
+  // TODO :aa shouldn't be so aware of parent context! 
   setMenuState: (arg: 'closed' | 'nav' | 'login' | 'bag') => void
 }> = ({
   currentAs,
   links,
-  onAction,
   setMenuState,
   className = '',
   commonItemClx,
   setChatbotOpen,
+  setMenuOpen
 }) => (
-  links.length > 0 ? (
+    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'
+      <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'
+              if (currentAs && currentAs === el.href) {
+                internalClx += ' text-accent '
+              }
+            }
+            else {
+              internalClx += ' min-w-0'
+            }
             if (currentAs && currentAs === el.href) {
-              internalClx += ' text-accent '
+              internalClx += ' pointer-events-none'
             }
-          }
-          else {
-            internalClx += ' min-w-0'
-          }
-          if (currentAs && currentAs === el.href) {
-            internalClx += ' pointer-events-none'
-          }
-          const itemClx = (commonItemClx) ? (typeof commonItemClx === 'string' ? commonItemClx : commonItemClx(el)) : ''
+            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} />
-          }
-        })}
+            if (!el.isAIMenu) {
+              return <MobileNavMenuItem link={el} setMenuOpen={setMenuOpen}/>
+            }
+          })}
+        </div>
+        <MobileAuthWidget className=' text-2xl' handleLogin={() => { setMenuState('login') }} />
       </div>
-      <MobileAuthWidget className=' text-2xl' handleLogin={() => { setMenuState('login') }} />
-    </div>
-  ) : null
-)
+    ) : null
+  )
 
 export default MobileNav

package/components/header/desktop.tsx

@@ -8,6 +8,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 type { LinkDef } from '@hanzo/ui/types'
@@ -35,13 +36,15 @@ const DesktopHeader: React.FC<{
         <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 
+          {/* <NavItems 
             currentAs={currentAs}
             items={links} 
             className='flex md:gap-4 lg:justify-between lg:gap-7' 
             itemClx='font-nav h-8'
             key='three'
-          />
+          /> */}
+
+          <DesktopNav links = {links}/>
           <DesktopBagPopup popupClx='w-[340px]' trigger={<BagButton className='text-primary -mr-[3px] lg:min-w-0' />} />
           <AuthWidget/>
         </div>

package/components/header/index.tsx

@@ -17,24 +17,36 @@ const Header: React.FC<{
 }) => {
 
     // TODO
-  const [open, setOpen] = React.useState<boolean>(false);
+    const [open, setOpen] = React.useState<boolean>(false);
 
-  const { nav: { common, featured }, currentAs } = siteDef
-  const links = (featured) ? [...common, ...featured] : common
+    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}
-    />
-  </>)
-}
+    return (<>
+      <DesktopHeader
+        className={cn(className, 'hidden md:flex')}
+        links={links}
+        currentAs={currentAs}
+      />
+      <MobileHeader
+        className={cn(className, 'md:hidden')}
+        links={links}
+        currentAs={currentAs}
+        setChatbotOpen={setOpen}
+      />
+      {isDesktopView() && (
+        <ChatWidget
+          title='LUX'
+          subtitle='AI'
+          chatbotUrl='https://lux.chat/iframe'
+          suggestedQuestions={siteDef.chatbot?.suggestedQuestions ?? []}
+        />
+      )}
+    </>)
+  }
 
 export default Header

package/components/header/mobile.tsx

@@ -154,6 +154,7 @@ const MobileHeader: React.FC<{
                 commonItemClx='px-0 text-xl h-16 justify-start '
                 setMenuState={setMenuState}
                 setChatbotOpen={setChatbotOpen}
+                setMenuOpen={setMenuOpen}
               />
             )
           )}

package/components/icons/social-icon.tsx

@@ -25,7 +25,7 @@ const SocialIcon: React.FC<SocialIconProps> = ({
     className={cn('color-inherit', className)}
     bgColor='transparent' 
     fgColor='currentColor'
-    style={{height: size, width: size}} 
+    style={{height: size, width: size, flex: 'none' }} 
   />
 )