@luxfi/ui 5.4.1 → 5.5.0

package/components/auth/login-panel.tsx

@@ -8,9 +8,9 @@ import { cn } from '@hanzo/ui/util'
 import { Button, Carousel, CarouselContent, CarouselItem } from '@hanzo/ui/primitives'
 import { LoginPanel as Login } from '@hanzo/auth/components'
 
+import { LuxLogo } from '../icons'
 import Logo from '../logo'
 import { EmblaAutoplay } from '..'
-import LuxLogo from '../icons/lux-logo'
 import { legal } from '../../site-def/footer'
 
 const LoginPanel: React.FC<{

package/components/{commerce → auth}/mobile-login-button.tsx

@@ -17,7 +17,6 @@ import { cn } from '@hanzo/ui/util'
 import { useAuth } from "@hanzo/auth/service"
 
 import { Ethereum } from "@hanzo/auth/icons"
-import { Icons } from ".."
 
 const MobileAuthWidget: React.FC<{
     noLogin?: boolean

package/components/auth/signup-panel.tsx

@@ -9,9 +9,9 @@ import { cn } from '@hanzo/ui/util'
 import { Button, Carousel, CarouselContent, CarouselItem } from '@hanzo/ui/primitives'
 import { LoginPanel as Login, SignupPanel as Signup } from '@hanzo/auth/components'
 
+import { LuxLogo } from '../icons'
 import Logo from '../logo'
 import { EmblaAutoplay } from '..'
-import LuxLogo from '../icons/lux-logo'
 import { legal } from '../../site-def/footer'
 
 const SignupPanel: React.FC<{

package/components/chat-widget.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { Button, Card } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
-import LuxLogo from './icons/lux-logo'
+import { LuxLogo } from './icons'
 import type { ChatbotSuggestedQuestion } from '../types'
 
 const ChatWidget: React.FC<{

package/components/commerce/bag-button.tsx

@@ -7,7 +7,7 @@ import { buttonVariants } from '@hanzo/ui/primitives'
 import { cn, type VariantProps } from '@hanzo/ui/util'
 import { useCommerce } from '@hanzo/commerce'
 
-import * as Icons from '../icons'
+import { Bag } from '../icons'
 
 const BagButton: React.FC<{
   showIfEmpty?: boolean  
@@ -82,7 +82,7 @@ const BagButton: React.FC<{
         <div>{c.cartQuantity}</div>
       </div>
     )}
-      <Icons.bag width='24' height='28' className={cn(
+      <Bag width='24' height='28' className={cn(
         'relative -top-[3px] fill-primary',
         iconClx,
         (animateOnHover ? 

package/components/commerce/checkout-button.tsx

@@ -7,7 +7,7 @@ import { Button, type ButtonProps } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 import { useCommerce } from '@hanzo/commerce'
 
-import * as Icons from '../icons'
+import { Bag } from '../icons'
 
 const IconAndQuantity: React.FC<{
   animateOnQuantityChange?: boolean
@@ -67,7 +67,7 @@ const IconAndQuantity: React.FC<{
           <div style={{/* color: 'white'  tailwind bug? ,*/ fontSize: '11px', position: 'relative', top: '1px' }}>{cmmc.cartQuantity}</div>
         </div>
         )}
-        <Icons.bag width='19' height='24' className={cn('relative -top-[3px] opacity-70' , iconClx)} aria-hidden="true" />
+        <Bag width='19' height='24' className={cn('relative -top-[3px] opacity-70' , iconClx)} aria-hidden="true" />
       </div>            
     )}
       {showArrow && (<span style={{fontSize: '17px',}}>&rsaquo;</span>)}

package/components/commerce/desktop-bag-popup.tsx

@@ -14,7 +14,7 @@ import {
 import { cn } from '@hanzo/ui/util'
 import { CartPanel, useCommerce } from '@hanzo/commerce'
 
-import * as Icons from '../icons'
+import { Bag } from '../icons'
 import sendGAEvent from '../../next/analytics/google-analytics'
 
 const DesktopBagPopup: React.FC<{
@@ -65,7 +65,7 @@ const DesktopBagPopup: React.FC<{
           buttonClx='max-w-[220px] flex-none'
         >
           <div className='flex flex-row items-center flex-none justify-center '>
-            <Icons.bag  className='mr-2 relative w-6 h-7 fill-foreground ' />
+            <Bag  className='mr-2 relative w-6 h-7 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'/>

package/components/{commerce → header}/desktop-nav-menu.tsx

@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import Link from "next/link"
+import * as React from 'react'
+import Link from 'next/link'
 import { cn } from '@hanzo/ui/util'
-import type { ChildMenu, LinkDefExtended } from "../../site-def/main-nav"
+import type { ChildMenu, LinkDefExtended } from '../../site-def/main-nav'
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -22,61 +22,61 @@ const DesktopNav: React.FC<{
 
   React.useEffect(() => {
     const preventScroll = (e: WheelEvent | TouchEvent) => {
-      e.preventDefault();
-    };
+      e.preventDefault()
+    }
 
     if (isMenuOpened) {
-      window.addEventListener('wheel', preventScroll, { passive: false });
-      window.addEventListener('touchmove', preventScroll, { passive: false });
-      window.addEventListener('keydown', preventScrollKeys, { passive: false });
+      window.addEventListener('wheel', preventScroll, { passive: false })
+      window.addEventListener('touchmove', preventScroll, { passive: false })
+      window.addEventListener('keydown', preventScrollKeys, { passive: false })
     } else {
-      window.removeEventListener('wheel', preventScroll);
-      window.removeEventListener('touchmove', preventScroll);
-      window.removeEventListener('keydown', preventScrollKeys);
+      window.removeEventListener('wheel', preventScroll)
+      window.removeEventListener('touchmove', preventScroll)
+      window.removeEventListener('keydown', preventScrollKeys)
     }
 
     return () => {
-      window.removeEventListener('wheel', preventScroll);
-      window.removeEventListener('touchmove', preventScroll);
-      window.removeEventListener('keydown', preventScrollKeys);
-    };
-  }, [isMenuOpened]);
+      window.removeEventListener('wheel', preventScroll)
+      window.removeEventListener('touchmove', preventScroll)
+      window.removeEventListener('keydown', preventScrollKeys)
+    }
+  }, [isMenuOpened])
 
   const preventScrollKeys = (e: KeyboardEvent) => {
     if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(e.key)) {
-      e.preventDefault();
+      e.preventDefault()
     }
-  };
+  }
 
   const handleMouseEnter = React.useCallback(() => {
-    setIsMenuOpen(true);
-  }, [setIsMenuOpen]);
+    setIsMenuOpen(true)
+  }, [setIsMenuOpen])
 
   const handleMouseLeave = React.useCallback(() => {
-    setIsMenuOpen(false);
-  }, [setIsMenuOpen]);
+    setIsMenuOpen(false)
+  }, [setIsMenuOpen])
 
   const handleContentMouseMove = () => {
     setIsMenuOpen(false)
   }
 
-  const menuHiddenClass = !isMenuOpened ? "invisible" : "";
+  const menuHiddenClass = !isMenuOpened ? 'invisible' : ''
 
   return links.length > 0 ? (
     <NavigationMenu>
       <NavigationMenuList>
         {links.map((el, index) => (
-          <NavigationMenuItem key={index} className="!m-0">
+          <NavigationMenuItem key={index} className='!m-0'>
             {el.isAIMenu ? (
               <Link href={el.href} legacyBehavior passHref>
                 <NavigationMenuLink className={cn(navigationMenuTriggerStyle(), ' text-muted-1 bg-transparent')}>
                   {el.title}
                 </NavigationMenuLink>
               </Link>
-            ) : el.title === "Cards" ? (
+            ) : el.title === 'Cards' ? (
               <>
                 <NavigationMenuTrigger
-                  className="text-muted-1 bg-transparent"
+                  className='text-muted-1 bg-transparent'
                   onMouseEnter={handleMouseEnter}
                   onFocus={handleMouseEnter}
                   onMouseLeave={handleMouseLeave}
@@ -87,13 +87,13 @@ const DesktopNav: React.FC<{
                   </Link>
                 </NavigationMenuTrigger>
                 <NavigationMenuContent
-                  className={cn("fixed left-0 top-14 pt-6 w-screen h-full border-0 !backdrop-blur-3xl bg-transparent mt-0", menuHiddenClass)}
+                  className={cn('fixed left-0 top-14 pt-6 w-screen h-full border-0 !backdrop-blur-3xl bg-transparent mt-0', menuHiddenClass)}
                   onMouseEnter={handleMouseEnter}
                   onMouseLeave={handleMouseLeave}
                 >
-                  <div className="flex justify-center items-start">
+                  <div className='flex justify-center items-start'>
                     <div
-                      className="grid xl:grid-cols-3 w-full justify-center max-w-[750px]"
+                      className='grid xl:grid-cols-3 w-full justify-center max-w-[750px]'
                       onMouseLeave={handleContentMouseMove}
                     >
                       {GroupChildMenu({ childs: el.childMenu, isCards: true })}
@@ -104,26 +104,26 @@ const DesktopNav: React.FC<{
             ) : (
               <>
                 <NavigationMenuTrigger
-                  className="text-muted-1 bg-transparent"
+                  className='text-muted-1 bg-transparent'
                   onMouseEnter={handleMouseEnter}
                   onFocus={handleMouseEnter}
                   onMouseLeave={handleMouseLeave}
                   onBlur={handleMouseLeave}
                 >
                   {
-                    el.href && el.href !== "" ?
+                    el.href && el.href !== '' ?
                       <Link href={el.href} legacyBehavior passHref>
                         {el.title}
                       </Link> : <>{el.title}</>
                   }
                 </NavigationMenuTrigger>
                 <NavigationMenuContent
-                  className={cn("fixed left-0 top-14 pt-6 w-screen h-full border-0 !backdrop-blur-3xl bg-transparent mt-0", menuHiddenClass)}
+                  className={cn('fixed left-0 top-14 pt-6 w-screen h-full border-0 !backdrop-blur-3xl bg-transparent mt-0', menuHiddenClass)}
                   onMouseEnter={handleMouseEnter}
                   onMouseLeave={handleMouseLeave}
                 >
                   <div
-                    className="flex flex-row w-full justify-center"
+                    className='flex flex-row w-full justify-center'
                     onMouseLeave={handleContentMouseMove}
                   >
                     {GroupChildMenu({ childs: el.childMenu })}
@@ -135,70 +135,70 @@ const DesktopNav: React.FC<{
         ))}
       </NavigationMenuList>
     </NavigationMenu>
-  ) : null;
-};
+  ) : null
+}
 
 export default DesktopNav
 
 const ListItem = React.forwardRef<
-  React.ElementRef<"a">,
-  React.ComponentPropsWithoutRef<"a">
+  React.ElementRef<'a'>,
+  React.ComponentPropsWithoutRef<'a'>
 >(({ className, title, children, ...props }, ref) => (
   <li key={title}>
     <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:text-accent-foreground focus:bg-level-1 focus:text-accent-foreground text-muted-1 hover:text-primary hover:bg-transparent duration-1000 ease-in-out",
+          'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:text-accent-foreground focus:bg-level-1 focus:text-accent-foreground text-muted-1 hover:text-primary hover:bg-transparent duration-1000 ease-in-out',
           className
         )}
         {...props}
       >
-        <div className="text-sm font-medium leading-none">{title}</div>
-        <p className="line-clamp-3 text-sm leading-snug text-muted-1">
+        <div className='text-sm font-medium leading-none'>{title}</div>
+        <p className='line-clamp-3 text-sm leading-snug text-muted-1'>
           {children}
         </p>
       </a>
     </NavigationMenuLink>
   </li>
-));
-ListItem.displayName = "ListItem"
+))
+ListItem.displayName = 'ListItem'
 
 const GroupChildMenu = (params: { childs: ChildMenu[] | undefined, isCards?: boolean }) => {
-  const { childs, isCards = false } = params;
+  const { childs, isCards = false } = params
 
   if (!childs) {
-    return null;
+    return null
   }
 
   const groupedChildMenus = childs.reduce((grouped: Record<string, ChildMenu[]>, childLink) => {
     if (childLink.groupName) {
-      grouped[childLink.groupName] = grouped[childLink.groupName] || [];
-      grouped[childLink.groupName].push(childLink);
+      grouped[childLink.groupName] = grouped[childLink.groupName] || []
+      grouped[childLink.groupName].push(childLink)
     }
-    return grouped;
-  }, {});
+    return grouped
+  }, {})
 
   const getChildExtraClass = (index: number) => {
     if (isCards && (index === 3 || index === 4)) {
-      return "xl:-mt-32"
+      return 'xl:-mt-32'
     }
-    return ""
-  };
+    return ''
+  }
 
   return Object.entries(groupedChildMenus).map(([groupName, childLinks], index) => (
-    <div key={groupName} className={cn("py-4 px-4 ", getChildExtraClass(index))}>
-      <h2 className="text-muted-1">{groupName}</h2>
-      <ul className="w-[200px] gap-3 md:w-[250px] lg:w-[250px]">
+    <div key={groupName} className={cn('py-4 px-4 ', getChildExtraClass(index))}>
+      <h2 className='text-muted-1'>{groupName}</h2>
+      <ul className='w-[200px] gap-3 md:w-[250px] lg:w-[250px]'>
         {childLinks.map((link) => (
-          <div className="flex justify-start items-center" key={link.title}>
+          <div className='flex justify-start items-center' key={link.title}>
             {link.icon}
-            <ListItem key={link.title} title={link.title} href={link.href} className="ml-[14px]">
+            <ListItem key={link.title} title={link.title} href={link.href} className='ml-[14px]'>
               {link.contents}
             </ListItem>
           </div>
         ))}
       </ul>
     </div>
-  ));
-};
+  ))
+}

package/components/header/desktop.tsx

@@ -7,7 +7,7 @@ import Logo, { type LogoVariant } from '../logo'
 
 import DesktopBagPopup from '../commerce/desktop-bag-popup'
 import BagButton from '../commerce/bag-button'
-import DesktopNav from '../commerce/desktop-nav-menu'
+import DesktopNav from './desktop-nav-menu'
 
 
 import type { LinkDef } from '@hanzo/ui/types'
@@ -17,11 +17,13 @@ const DesktopHeader: React.FC<{
   links: LinkDef[]
   className?: string
   noAuth?: boolean
+  noCommerce?: boolean
   logoVariant?: LogoVariant
 } & PropsWithChildren> = ({
   links,
   className = '',
   noAuth=false,
+  noCommerce=false,
   children,
   logoVariant='text-only'
 }) => {
@@ -47,7 +49,9 @@ const DesktopHeader: React.FC<{
             <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' />} />
+            {!noCommerce && (
+              <DesktopBagPopup popupClx='w-[340px]' trigger={<BagButton className='text-primary -mr-[3px] lg:min-w-0' />} />
+            )}
             <AuthWidget noLogin={noAuth}/>
             {children}
           </div>

package/components/header/index.tsx

@@ -24,7 +24,7 @@ const Header: React.FC<{
     // TODO
     const [open, setOpen] = React.useState<boolean>(false);
 
-    const { nav: { common, featured }, currentAs, noAuth } = siteDef
+    const { nav: { common, featured }, currentAs, noAuth, commerce } = siteDef
     const links = (featured) ? [...common, ...featured] : common
 
     return (<>
@@ -33,6 +33,7 @@ const Header: React.FC<{
         links={links}
         currentAs={currentAs}
         noAuth={noAuth}
+        noCommerce={!!!commerce}
         logoVariant={logoVariant}
       >{children}</DesktopHeader>
       <MobileHeader
@@ -41,7 +42,7 @@ const Header: React.FC<{
         currentAs={currentAs}
         setChatbotOpen={setOpen}
         noAuth={noAuth}
-        
+        noCommerce={!!!commerce}
       />
     </>)
   }

package/components/{commerce → header}/mobile-bag-drawer.tsx

@@ -5,7 +5,7 @@ import { Drawer, DrawerContent} from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 import { CartPanel } from '@hanzo/commerce'
 
-import BagButton from './bag-button'
+import BagButton from '../commerce/bag-button'
 
 const MobileBagDrawer: React.FC<{
   open: boolean,

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

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import Link from 'next/link'
+
+import type { LinkDefExtended } from '../../site-def/main-nav'
+import { LeftArrow, RightArrow } from '../icons'
+import MobileNavMenuAI from './mobile-nav-menu-ai'
+
+const MobileNavMenuItem: React.FC<{
+  link: LinkDefExtended,
+  setMenuOpen: (open: boolean) => void
+}> = ({
+  link,
+  setMenuOpen
+}) => {
+  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' }}>
+              <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>
+              </div>
+              <div className="flex flex-col">
+                  {link.childMenu?.map((menu, index) => {
+                      return (
+                          <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>
+          </div>
+      </>
+  )
+}
+
+export default MobileNavMenuItem

package/components/{commerce → header}/mobile-nav-menu.tsx

@@ -5,7 +5,7 @@ import { cn } from '@hanzo/ui/util'
 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 MobileAuthWidget from '../auth/mobile-login-button'
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@hanzo/ui/primitives'
 import { ChevronDown } from 'lucide-react'
 import Link from 'next/link'

package/components/header/mobile.tsx

@@ -6,16 +6,16 @@ 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 { LoginPanel } from '@hanzo/auth/components'
 import sendGAEvent from '../../next/analytics/google-analytics'
-import * as Icons from '../icons'
 
+import { Avatar, Bag } from '../icons'
 import { Logo } from '..'
 
-import MenuToggleButton from '../commerce/mobile-menu-toggle-button'
+import MenuToggleButton from './mobile-menu-toggle-button'
 import BagButton from '../commerce/bag-button'
-import MobileBagDrawer from '../commerce/mobile-bag-drawer'
-import NavMenu from '../commerce/mobile-nav-menu'
+import MobileBagDrawer from './mobile-bag-drawer'
+import NavMenu from './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] ' +
@@ -24,15 +24,17 @@ const bagClx = 'mt-4 mb-8 border-none py-0 px-4 w-full ' +
 const MobileHeader: React.FC<{
   currentAs: string | undefined
   links: LinkDef[]
-  className?: string,
-  setChatbotOpen: (open: boolean) => void,
+  className?: string
+  setChatbotOpen: (open: boolean) => void
   noAuth?: boolean
+  noCommerce?: boolean
 }> = ({
   currentAs,
   links,
   className = '',
   setChatbotOpen,
-  noAuth=false // :aa TODO
+  noAuth=false,   // :aa TODO
+  noCommerce=false // :aa TODO
 }) => {
     const cmmc = useCommerce()
     const [menuState, setMenuState] = useState<'closed' | 'nav' | 'login' | 'bag'>('closed')
@@ -101,7 +103,7 @@ const MobileHeader: React.FC<{
             'flex flex-row ' +
             'bg-background animate-mobile-menu-open'
           }>
-              <Icons.Avatar className='self-center ' />
+              <Avatar className='self-center ' />
             </div>
           )}
           <div className='flex gap-0 flex-row'>
@@ -111,22 +113,25 @@ const MobileHeader: React.FC<{
 
         </div>
       </header>
-      <MobileBagDrawer
-        className=''
-        open={bagDrawerOpen}
-        setOpen={setBagDrawerOpen}
-        handleCheckout={handleCheckout}
-      />
+      {!noCommerce && (
+        <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 bg-background z-below-header animate-mobile-menu-open'
         }>
-          {menuState === 'login' ? (
+          {(!!!noAuth && menuState === 'login') ? (
             <LoginPanel noHeading onLoginChanged={onLoginChanged} className='sm:animate-in sm:zoom-in-90' />
           ) : (
-            menuState === 'bag' ? (
+            (!!!noCommerce && menuState === 'bag') ? (
 
               <CartPanel
                 handleCheckout={() => { router.push('/checkout') }}
@@ -139,7 +144,7 @@ const MobileHeader: React.FC<{
                 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 ' />
+                  <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' />

package/components/icons/index.ts

@@ -0,0 +1,6 @@
+export { default as Avatar } from './avatar'
+export { default as Bag } from './bag-icon'
+export { default as LeftArrow } from './left-arrow'
+export { default as LuxLogo } from './lux-logo'
+export { default as RightArrow } from './right-arrow'
+export { default as SocialIcon, type SocialIconProps } from './social-icon'

package/components/logo.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 
 import { type TShirtSize  } from '@hanzo/ui/types'
 
-import * as Icons from './icons'
+import { LuxLogo } from './icons'
 
 const TEXT = 'LUX'
 type LogoVariant = 'text-only' | 'logo-only' | 'full'
@@ -74,12 +74,12 @@ const Logo: React.FC<{
   return (
     href ? (
       <Link href={href} className={outerClasses} onClick={onClick} >
-        <Icons.logo className={classes.icon} />
+        <LuxLogo className={classes.icon} />
         <span className={spanClasses}>{TEXT}</span>
       </Link>
     ) : (
       <span className={outerClasses} onClick={onClick}>
-        <Icons.logo className={classes.icon} />
+        <LuxLogo className={classes.icon} />
         <span className={spanClasses}>{TEXT}</span>
       </span>
     )