@luxfi/core 5.2.6 → 5.2.7

package/components/header/mobile.tsx

@@ -1,166 +1,166 @@
-'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,
-  setChatbotOpen: (open: boolean) => void,
-}> = ({
-  currentAs,
-  links,
-  className = '',
-  setChatbotOpen,
-}) => {
-    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 h-19 ${menuOpen() ? 'hidden' : 'block'}`,
-        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='h-[74px] w-pr-100 flex flex-row justify-between items-center font-bold'>
-            <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 pl-8 ' +
-              'flex flex-row ' +
-              'bg-background animate-mobile-menu-open'
-            }>
-                <Icons.Avatar className='self-center ' />
-              </div>
-            )}
-            <div className='flex gap-0 flex-row'>
-              <BagButton className='text-primary -mr-[3px]' onClick={openBag} />
-              <MenuToggleButton className='text-foreground' open={menuOpen()} setOpen={setMenuOpen} />
-            </div>
-
-          </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 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 w-full'
-                commonItemClx='px-0 text-xl h-16 justify-start '
-                setMenuState={setMenuState}
-                setChatbotOpen={setChatbotOpen}
-                setMenuOpen={setMenuOpen}
-              />
-            )
-          )}
-        </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,
+  setChatbotOpen: (open: boolean) => void,
+}> = ({
+  currentAs,
+  links,
+  className = '',
+  setChatbotOpen,
+}) => {
+    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 h-19 ${menuOpen() ? 'hidden' : 'block'}`,
+        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='h-[74px] w-pr-100 flex flex-row justify-between items-center font-bold'>
+            <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 pl-8 ' +
+              'flex flex-row ' +
+              'bg-background animate-mobile-menu-open'
+            }>
+                <Icons.Avatar className='self-center ' />
+              </div>
+            )}
+            <div className='flex gap-0 flex-row'>
+              <BagButton className='text-primary -mr-[3px]' onClick={openBag} />
+              <MenuToggleButton className='text-foreground' open={menuOpen()} setOpen={setMenuOpen} />
+            </div>
+
+          </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 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 w-full'
+                commonItemClx='px-0 text-xl h-16 justify-start '
+                setMenuState={setMenuState}
+                setChatbotOpen={setChatbotOpen}
+                setMenuOpen={setMenuOpen}
+              />
+            )
+          )}
+        </div>
+      ) /* menuOpen */}
+    </>)
+  }
+
+export default MobileHeader

package/components/header/theme-toggle.tsx

@@ -1,26 +1,26 @@
-'use client'
-
-import React from 'react'
-import { Moon, Sun } from 'lucide-react'
-import { useTheme } from 'next-themes'
-
-import { Button } from '@hanzo/ui/primitives'
-
-const ThemeToggle: React.FC = () => {
-
-  const { setTheme, theme } = useTheme()
-
-  return (
-    <Button
-      variant='ghost'
-      size='icon'
-      onClick={() => {setTheme(theme === 'light' ? 'dark' : 'light')}}
-    >
-      <Sun className='h-[1.5rem] w-[1.3rem] dark:hidden' />
-      <Moon className='hidden h-5 w-5 dark:block' />
-      <span className='sr-only'>Toggle theme</span>
-    </Button>
-  )
-}
-
-export default ThemeToggle
+'use client'
+
+import React from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+import { Button } from '@hanzo/ui/primitives'
+
+const ThemeToggle: React.FC = () => {
+
+  const { setTheme, theme } = useTheme()
+
+  return (
+    <Button
+      variant='ghost'
+      size='icon'
+      onClick={() => {setTheme(theme === 'light' ? 'dark' : 'light')}}
+    >
+      <Sun className='h-[1.5rem] w-[1.3rem] dark:hidden' />
+      <Moon className='hidden h-5 w-5 dark:block' />
+      <span className='sr-only'>Toggle theme</span>
+    </Button>
+  )
+}
+
+export default ThemeToggle

package/components/icons/avatar.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const Avatar: React.FC<LucideProps> = (props: LucideProps) => (
-    <svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-        <path d="M8.66112 10.3544C6.14668 10.3544 4.32664 6.91073 4.32664 4.59206C4.32664 2.12213 6.27238 0.115723 8.66112 0.115723C11.0499 0.115723 12.9956 2.12514 12.9956 4.59206C12.9956 6.91398 11.1756 10.3544 8.66112 10.3544ZM8.66112 1.1542C6.82539 1.1542 5.33242 2.69703 5.33242 4.59185C5.33242 6.65402 6.94715 9.31553 8.66112 9.31553C10.3761 9.31553 11.9898 6.65387 11.9898 4.5925C11.9898 2.69668 10.4969 1.15398 8.66112 1.15398V1.1542Z" fill="white" />
-        <path d="M6.79776 11.3345H10.5242C13.7802 11.3345 16.4302 14.0712 16.4302 17.4338C16.4302 19.0831 15.1297 20.423 13.5356 20.423H3.78923C2.19216 20.423 0.894689 19.0831 0.894689 17.4338C0.893706 14.0712 3.54156 11.3345 6.79776 11.3345ZM3.78819 19.3844H13.5337C14.5749 19.3844 15.4225 18.509 15.4225 17.4338C15.4225 14.6453 13.2253 12.3731 10.5223 12.3731H6.79862C4.0956 12.3731 1.89839 14.6423 1.89839 17.4338C1.89937 18.509 2.74701 19.3844 3.78816 19.3844H3.78819Z" fill="white" />
-    </svg>
-)
-
-export default Avatar
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Avatar: React.FC<LucideProps> = (props: LucideProps) => (
+    <svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8.66112 10.3544C6.14668 10.3544 4.32664 6.91073 4.32664 4.59206C4.32664 2.12213 6.27238 0.115723 8.66112 0.115723C11.0499 0.115723 12.9956 2.12514 12.9956 4.59206C12.9956 6.91398 11.1756 10.3544 8.66112 10.3544ZM8.66112 1.1542C6.82539 1.1542 5.33242 2.69703 5.33242 4.59185C5.33242 6.65402 6.94715 9.31553 8.66112 9.31553C10.3761 9.31553 11.9898 6.65387 11.9898 4.5925C11.9898 2.69668 10.4969 1.15398 8.66112 1.15398V1.1542Z" fill="white" />
+        <path d="M6.79776 11.3345H10.5242C13.7802 11.3345 16.4302 14.0712 16.4302 17.4338C16.4302 19.0831 15.1297 20.423 13.5356 20.423H3.78923C2.19216 20.423 0.894689 19.0831 0.894689 17.4338C0.893706 14.0712 3.54156 11.3345 6.79776 11.3345ZM3.78819 19.3844H13.5337C14.5749 19.3844 15.4225 18.509 15.4225 17.4338C15.4225 14.6453 13.2253 12.3731 10.5223 12.3731H6.79862C4.0956 12.3731 1.89839 14.6423 1.89839 17.4338C1.89937 18.509 2.74701 19.3844 3.78816 19.3844H3.78819Z" fill="white" />
+    </svg>
+)
+
+export default Avatar

package/components/icons/bag-icon.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const BagIcon: React.FC<LucideProps> = (props: LucideProps) => (
-  <svg fill="none" viewBox="0 0 1019 1281" {...props}>
-    <path d="m977.243 365.553h-175.407v-90.629c0-151.923-131.968-274.924-292.334-274.924-160.367 0-292.337 123.002-292.337 274.924v90.629h-175.4023c-23.3886 0-41.7627 17.051-41.7627 38.756v775.121c0 55.8 48.4456 100.76 108.582 100.76h801.84c60.138 0 108.578-44.96 108.578-100.76v-775.121c0-21.705-18.37-38.756-41.757-38.756zm-676.553-90.629c0-108.517 93.546-196.9408 208.812-196.9408 115.265 0 208.813 88.4218 208.813 196.9408v89.08h-417.625z" fill="currentColor"/>
-  </svg>
-)
-
-export default BagIcon
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const BagIcon: React.FC<LucideProps> = (props: LucideProps) => (
+  <svg fill="none" viewBox="0 0 1019 1281" {...props}>
+    <path d="m977.243 365.553h-175.407v-90.629c0-151.923-131.968-274.924-292.334-274.924-160.367 0-292.337 123.002-292.337 274.924v90.629h-175.4023c-23.3886 0-41.7627 17.051-41.7627 38.756v775.121c0 55.8 48.4456 100.76 108.582 100.76h801.84c60.138 0 108.578-44.96 108.578-100.76v-775.121c0-21.705-18.37-38.756-41.757-38.756zm-676.553-90.629c0-108.517 93.546-196.9408 208.812-196.9408 115.265 0 208.813 88.4218 208.813 196.9408v89.08h-417.625z" fill="currentColor"/>
+  </svg>
+)
+
+export default BagIcon

package/components/icons/github.tsx

@@ -1,14 +1,14 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-
-const GitHub: React.FC<LucideProps> = (props: LucideProps) => (
-  <svg viewBox="0 0 438.549 438.549" {...props}>
-    <path
-      fill="currentColor"
-      d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-    ></path>
-  </svg>
-)
-
-export default GitHub
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+
+const GitHub: React.FC<LucideProps> = (props: LucideProps) => (
+  <svg viewBox="0 0 438.549 438.549" {...props}>
+    <path
+      fill="currentColor"
+      d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+    ></path>
+  </svg>
+)
+
+export default GitHub

package/components/icons/index.tsx

@@ -1,43 +1,43 @@
-import {
-  Moon as moon,
-  SunMedium as sun,
-  Menu as burger,
-  ArrowUpRight as linkOut,
-  type XIcon as LucideIcon,
-} from 'lucide-react'
-
-import gitHub from './github'
-import bag from './bag-icon'
-import logo from './lux-logo'
-import youtube from './youtube-logo'
-import secureDelivery from './secure-delivery'
-import RightArrow from './right-arrow'
-import LeftArrow from './left-arrow'
-import Avatar from './avatar'
-import Search from './search'
-
-import  {
-  type SocialIconProps,
-  default as SocialIcon 
-} from './social-icon'
-
-export { type LucideIcon as Icon, type SocialIconProps } 
-
-export {
-  bag,
-  sun,
-  moon,
-  logo,
-  burger,
-  gitHub,
-  linkOut,
-  youtube,
-  secureDelivery,
-  SocialIcon,
-  RightArrow,
-  LeftArrow,
-  Avatar,
-  Search
-}
-
-
+import {
+  Moon as moon,
+  SunMedium as sun,
+  Menu as burger,
+  ArrowUpRight as linkOut,
+  type XIcon as LucideIcon,
+} from 'lucide-react'
+
+import gitHub from './github'
+import bag from './bag-icon'
+import logo from './lux-logo'
+import youtube from './youtube-logo'
+import secureDelivery from './secure-delivery'
+import RightArrow from './right-arrow'
+import LeftArrow from './left-arrow'
+import Avatar from './avatar'
+import Search from './search'
+
+import  {
+  type SocialIconProps,
+  default as SocialIcon 
+} from './social-icon'
+
+export { type LucideIcon as Icon, type SocialIconProps } 
+
+export {
+  bag,
+  sun,
+  moon,
+  logo,
+  burger,
+  gitHub,
+  linkOut,
+  youtube,
+  secureDelivery,
+  SocialIcon,
+  RightArrow,
+  LeftArrow,
+  Avatar,
+  Search
+}
+
+

package/components/icons/left-arrow.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const LeftArrow: React.FC<LucideProps> = (props: LucideProps) => (   
-<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-<path d="M1.06975 7.44328C0.679224 7.83381 0.679224 8.46697 1.06975 8.8575L7.43371 15.2215C7.82423 15.612 8.4574 15.612 8.84792 15.2215C9.23845 14.8309 9.23845 14.1978 8.84792 13.8072L3.19107 8.15039L8.84792 2.49354C9.23845 2.10301 9.23845 1.46985 8.84792 1.07932C8.4574 0.688798 7.82423 0.688798 7.43371 1.07932L1.06975 7.44328ZM1.77686 9.15039H2.49037V7.15039H1.77686V9.15039Z" fill="white"/>
-</svg>
-)
-
-export default LeftArrow
-
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const LeftArrow: React.FC<LucideProps> = (props: LucideProps) => (   
+<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+<path d="M1.06975 7.44328C0.679224 7.83381 0.679224 8.46697 1.06975 8.8575L7.43371 15.2215C7.82423 15.612 8.4574 15.612 8.84792 15.2215C9.23845 14.8309 9.23845 14.1978 8.84792 13.8072L3.19107 8.15039L8.84792 2.49354C9.23845 2.10301 9.23845 1.46985 8.84792 1.07932C8.4574 0.688798 7.82423 0.688798 7.43371 1.07932L1.06975 7.44328ZM1.77686 9.15039H2.49037V7.15039H1.77686V9.15039Z" fill="white"/>
+</svg>
+)
+
+export default LeftArrow
+

package/components/icons/lux-logo.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const LuxLogo: React.FC<LucideProps> = (props: LucideProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"  {...props}>
-    <polygon points="25,46.65 50,3.35 0,3.35" fill="white" stroke='black' strokeWidth={props.strokeWidth}/>
-  </svg>
-)
-
-export default LuxLogo
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const LuxLogo: React.FC<LucideProps> = (props: LucideProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"  {...props}>
+    <polygon points="25,46.65 50,3.35 0,3.35" fill="white" stroke='black' strokeWidth={props.strokeWidth}/>
+  </svg>
+)
+
+export default LuxLogo

package/components/icons/right-arrow.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const RightArrow: React.FC<LucideProps> = (props: LucideProps) => (
-    <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M8.33797 7.58293C8.72849 7.97346 8.72849 8.60662 8.33797 8.99715L1.97401 15.3611C1.58348 15.7516 0.950316 15.7516 0.559792 15.3611C0.169267 14.9706 0.169267 14.3374 0.559792 13.9469L6.21665 8.29004L0.559792 2.63318C0.169267 2.24266 0.169267 1.6095 0.559792 1.21897C0.950316 0.828447 1.58348 0.828447 1.97401 1.21897L8.33797 7.58293ZM7.63086 9.29004H6.91734V7.29004H7.63086V9.29004Z" fill="white"/>
-    </svg>
-)
-
-export default RightArrow
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const RightArrow: React.FC<LucideProps> = (props: LucideProps) => (
+    <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8.33797 7.58293C8.72849 7.97346 8.72849 8.60662 8.33797 8.99715L1.97401 15.3611C1.58348 15.7516 0.950316 15.7516 0.559792 15.3611C0.169267 14.9706 0.169267 14.3374 0.559792 13.9469L6.21665 8.29004L0.559792 2.63318C0.169267 2.24266 0.169267 1.6095 0.559792 1.21897C0.950316 0.828447 1.58348 0.828447 1.97401 1.21897L8.33797 7.58293ZM7.63086 9.29004H6.91734V7.29004H7.63086V9.29004Z" fill="white"/>
+    </svg>
+)
+
+export default RightArrow