@luxfi/core 4.4.10 → 4.4.12

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

@@ -1,78 +1,78 @@
-'use client'
-import React, { useState, useEffect } from 'react'
-import { useRouter } from 'next/navigation'
-
-import { X } from 'lucide-react'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  PopoverClose,
-} from "@hanzo/ui/primitives"
-
-import { cn } from '@hanzo/ui/util'
-import { CartPanel, useCommerce } from '@hanzo/commerce'
-
-import * as Icons from '../icons'
-import sendGAEvent from '../../next/analytics/google-analytics'
-
-const DesktopBagPopup: React.FC<{
-  triggerClx?: string  
-  popupClx?: string
-  trigger: React.ReactNode
-}> = ({
-  triggerClx='',
-  popupClx='',
-  trigger
-}) => {
-  const cmmc = useCommerce()
-
-  const [bagOpen, setBagOpen] = useState<boolean>(false)
-  const router = useRouter()
-
-  useEffect(() => {
-    if (bagOpen) {
-      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',
-      })
-    }
-  }, [bagOpen])
-
-  return (
-    <Popover open={bagOpen} onOpenChange={setBagOpen}>
-      <PopoverTrigger className={triggerClx}>
-        {trigger}
-      </PopoverTrigger>
-      <PopoverContent sideOffset={28} className={cn('relative  flex flex-col p-0 px-4 pb-4 pt-2', popupClx)}>
-        <PopoverClose className='absolute z-above-content right-2 top-2 self-end hover:bg-level-3 text-muted hover:text-accent p-1 rounded-full'><X className='w-5 h-5'/></PopoverClose>
-        <CartPanel 
-          handleCheckout={() => {router.push('/checkout')}} 
-          className='mt-4 mb-4 border-none py-0 px-4'
-          listClx='rounded-sm pr-3'
-          scrollAfter={5}
-          scrollHeightClx='h-[70vh]'
-          itemClx='mt-3'
-          totalClx='sticky px-1 pr-2 -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-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'/>
-        </CartPanel>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-export default DesktopBagPopup
+'use client'
+import React, { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+
+import { X } from 'lucide-react'
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  PopoverClose,
+} from "@hanzo/ui/primitives"
+
+import { cn } from '@hanzo/ui/util'
+import { CartPanel, useCommerce } from '@hanzo/commerce'
+
+import * as Icons from '../icons'
+import sendGAEvent from '../../next/analytics/google-analytics'
+
+const DesktopBagPopup: React.FC<{
+  triggerClx?: string  
+  popupClx?: string
+  trigger: React.ReactNode
+}> = ({
+  triggerClx='',
+  popupClx='',
+  trigger
+}) => {
+  const cmmc = useCommerce()
+
+  const [bagOpen, setBagOpen] = useState<boolean>(false)
+  const router = useRouter()
+
+  useEffect(() => {
+    if (bagOpen) {
+      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',
+      })
+    }
+  }, [bagOpen])
+
+  return (
+    <Popover open={bagOpen} onOpenChange={setBagOpen}>
+      <PopoverTrigger className={triggerClx}>
+        {trigger}
+      </PopoverTrigger>
+      <PopoverContent sideOffset={28} className={cn('relative  flex flex-col p-0 px-4 pb-4 pt-2', popupClx)}>
+        <PopoverClose className='absolute z-above-content right-2 top-2 self-end hover:bg-level-3 text-muted hover:text-accent p-1 rounded-full'><X className='w-5 h-5'/></PopoverClose>
+        <CartPanel 
+          handleCheckout={() => {router.push('/checkout')}} 
+          className='mt-4 mb-4 border-none py-0 px-4'
+          listClx='rounded-sm pr-3'
+          scrollAfter={5}
+          scrollHeightClx='h-[70vh]'
+          itemClx='mt-3'
+          totalClx='sticky px-1 pr-2 -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-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'/>
+        </CartPanel>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default DesktopBagPopup

package/components/commerce/mobile-bag-drawer.tsx

@@ -1,51 +1,51 @@
-'use client'
-import React from 'react'
-
-import { Drawer, DrawerContent} from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-import { CartPanel } from '@hanzo/commerce'
-
-import BagButton from './bag-button'
-
-const MobileBagDrawer: React.FC<{
-  open: boolean,
-  setOpen: (b: boolean) => void
-  handleCheckout: () => void
-  className?: string
-}> = ({
-  open,
-  setOpen,
-  handleCheckout,
-  className='',
-}) => {
-  
-  return (
-    <Drawer open={open} onOpenChange={setOpen}>
-      <DrawerContent className={cn('rounded-t-xl mt-6 pb-12 h-auto', className)} >
-        <CartPanel 
-          handleCheckout={handleCheckout} 
-          className='mt-4 mb-4 border-none py-0 px-4 w-full '
-          listClx='rounded-sm pr-3'
-          scrollAfter={5}
-          itemClx='mt-2'
-          totalClx='sticky px-1 pr-2 border rounded-sm -bottom-[1px] bg-background'
-          buttonClx='max-w-[220px] flex-none'
-        >
-          <div className='flex flex-row items-center flex-none justify-center '>
-            <BagButton 
-              noHoverEffects 
-              showIfEmpty 
-              className=
-              'mr-2 relative w-6 h-7'
-              iconClx='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>
-      </DrawerContent>
-    </Drawer>
-  )
-}
-
-export default MobileBagDrawer
+'use client'
+import React from 'react'
+
+import { Drawer, DrawerContent} from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+import { CartPanel } from '@hanzo/commerce'
+
+import BagButton from './bag-button'
+
+const MobileBagDrawer: React.FC<{
+  open: boolean,
+  setOpen: (b: boolean) => void
+  handleCheckout: () => void
+  className?: string
+}> = ({
+  open,
+  setOpen,
+  handleCheckout,
+  className='',
+}) => {
+  
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerContent className={cn('rounded-t-xl mt-6 pb-12 h-auto', className)} >
+        <CartPanel 
+          handleCheckout={handleCheckout} 
+          className='mt-4 mb-4 border-none py-0 px-4 w-full '
+          listClx='rounded-sm pr-3'
+          scrollAfter={5}
+          itemClx='mt-2'
+          totalClx='sticky px-1 pr-2 border rounded-sm -bottom-[1px] bg-background'
+          buttonClx='max-w-[220px] flex-none'
+        >
+          <div className='flex flex-row items-center flex-none justify-center '>
+            <BagButton 
+              noHoverEffects 
+              showIfEmpty 
+              className=
+              'mr-2 relative w-6 h-7'
+              iconClx='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>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+export default MobileBagDrawer

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.tsx

@@ -1,64 +1,64 @@
-'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'
-
-const MobileNav: React.FC<{
-  currentAs: string | undefined
-  links: LinkDef[]
-  className?: string
-  commonItemClx?: string | ((def: LinkDef) => string),
-  /**
-   * 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 
-}> = ({
-  currentAs,
-  links,
-  onAction,
-  className='',
-  commonItemClx,
-}) => ( 
-  
-  links.length > 0 ? (
-
-    <nav className={className} >
-    {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}  
-        />
-      )
-    })}
-    </nav>
-  ) 
-  : 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'
+
+const MobileNav: React.FC<{
+  currentAs: string | undefined
+  links: LinkDef[]
+  className?: string
+  commonItemClx?: string | ((def: LinkDef) => string),
+  /**
+   * 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 
+}> = ({
+  currentAs,
+  links,
+  onAction,
+  className='',
+  commonItemClx,
+}) => ( 
+  
+  links.length > 0 ? (
+
+    <nav className={className} >
+    {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}  
+        />
+      )
+    })}
+    </nav>
+  ) 
+  : null
+)
+
+export default MobileNav