@luxfi/ui 5.5.3 → 6.0.0

package/components/commerce/checkout-panel/desktop-cp.tsx

@@ -1,83 +0,0 @@
-'use client'
-import React, { type PropsWithChildren } from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { ScrollArea, StepIndicator } from '@hanzo/ui/primitives'
-import { AuthWidget } from '@hanzo/auth/components'
-import { CartPanel, useCommerce } from '@hanzo/commerce'
-import { cn } from '@hanzo/ui/util'
-
-import { BackButton, Logo, Tooltip } from '../..'
-import DesktopBagCarousel from './desktop-bag-carousel'
-import LinksRow from './policy-links'
-import type CheckoutPanelProps from './checkout-panel-props'
-
-const DesktopCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = observer(({
-  step,
-  stepNames,
-  onLeave,
-  clx='',
-  children
-}) => {
-
-  const cmmc = useCommerce()
-  return ( 
-    <div /* id='CHECKOUT_PANEL' */  className={cn('grid grid-cols-2',  clx)}>
-      <div key={1} className='w-full h-full bg-background flex flex-row items-start justify-end'>
-        <div className='w-full h-full max-w-[750px] relative flex flex-col items-stretch justify-start px-8 pb-8'>
-          <div key={1} className='h-[80px] grow-0 flex flex-row items-center z-10' >
-            <Logo size='md' href='/' onClick={onLeave} variant='text-only' outerClx='logo-outer-tooltip-class' />
-            <Tooltip select='.logo-outer-tooltip-class' text='home' position='right' offset={6}/>
-          </div>
-          <BackButton 
-            size='sm' 
-            clx={
-              'z-10 absolute top-14 left-6 !px-0 aspect-square ' + 
-              'rounded-full hover:!bg-level-3 ' + 
-              'back-button-tooltip-class '
-            }
-            onBack={onLeave}
-          />
-          <Tooltip  select='.back-button-tooltip-class' text='back' position='right' offset={5}/>
-          <div key={2} className={cn(
-            'w-full grow min-h-0 max-w-[550px] mx-auto flex flex-col gap-3',
-            (cmmc.cartItems.length > 4 ? 'justify-between' : 'justify-start gap-10 pt-10')
-          )}>
-            <DesktopBagCarousel className='grow-0 h-[260px] w-[360px] lg:w-[420px] mx-auto -mt-8' constrainTo={{w: 250, h: 250}}/>
-            <CartPanel 
-              className='w-full border-none p-0' 
-              itemClx='mb-2' 
-              totalClx='sticky bottom-0 bg-background'
-              listClx='pr-3'
-              scrollAfter={4}
-              scrollHeightClx='min-h-[50vh] grow'
-              showPromoCode
-              showShipping
-              selectItems
-            />
-          </div>
-        </div>
-      </div>
-      <div key={2} className='w-full h-full flex flex-col bg-level-1 min-h-screen justify-between'>
-        <ScrollArea className='w-full flex flex-row items-start justify-start overflow-y-auto'>
-          <div className='h-full w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0'>
-            <div key={1} className='bg-level-1 sticky h-[80px] bg-[#aaaaff] w-full top-0 flex justify-center items-end'>
-              <AuthWidget noLogin className='hidden md:flex absolute top-4 right-4 '/>
-              <StepIndicator dotSizeRem={1.35} steps={stepNames} currentStep={step} className='gap-2 text-base w-pr-70' />
-            </div>
-            <div key={2} className='w-full max-w-[550px] mx-auto py-8'>
-              {children}
-            </div>
-          </div>
-        </ScrollArea>
-        <div className='w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0'>
-          <div className='w-full max-w-[550px] mx-auto flex flex-col items-center'>
-            <LinksRow clx='w-full' />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-})
-
-export default DesktopCheckoutPanel

package/components/commerce/checkout-panel/index.tsx

@@ -1,126 +0,0 @@
-'use client'
-import React, { useLayoutEffect, useRef, useState }  from 'react'
-
-import { capitalize, cn } from '@hanzo/ui/util'
-
-import { useCommerce, ShippingStepForm, PaymentStepForm } from '@hanzo/commerce'
-import type { CheckoutStep } from '@hanzo/commerce/types'
-
-import ThankYou from './thank-you'
-
-const STEPS = [
-  {
-    name: 'payment',
-    Comp: PaymentStepForm
-  }, 
-  {
-    name: 'delivery',
-    Comp: ShippingStepForm
-  }, 
-  {
-    name: 'done',
-    label: 'Done!',
-    Comp: ThankYou
-  }
-] satisfies CheckoutStep[]
-
-const STEP_NAMES = STEPS.map((s) => (s.label ? s.label : capitalize(s.name)))
-
-import DesktopCP from './desktop-cp'
-import MobileCP from './mobile-cp'
-
-const CheckoutPanel: React.FC<{
-  clx?: string
-}> = ({
-  clx=''
-}) => {
-
-  const cmmc = useCommerce()
-    
-    // For sites that don't initialize cmmc
-  if (!cmmc) {
-    console.log("CHECKOUT PANEL: cmmc svc undefined!")
-    return <></>
-  }
-
-  const [stepIndex, setStepIndex] = useState<number>(0)
-  const [orderId, setOrderId] = useState<string | undefined>(undefined)
-
-    // Step.name or 'first' or 'next' or 'last' 
-  const setStep = (name: string): void => {
-
-    if (name === 'first') {
-      setStepIndex(0)
-    }
-    else if (name === 'last') {
-      setStepIndex(STEPS.length - 1)
-    } 
-    else if (name === 'next') {
-      if (stepIndex <= STEPS.length - 2) {
-        setStepIndex(stepIndex + 1)
-      }
-      else {
-        throw new Error('CheckoutPanel.setStep(): Attempting to advance past last step!')
-      }
-    } 
-    else {
-      const indexFound = STEPS.findIndex((el) => (el.name === name))
-      if (indexFound !== -1) {
-        setStepIndex(indexFound)
-      }
-      else {
-        throw new Error('CheckoutPanel.setStep(): Step named ' + name + ' not found!')
-      }
-    }
-  } 
-
-  const _close = () => {
-    setStep('first')
-  }
-  
-    // Determine if mobile or desktop layout based on visibility of desktopElement
-    // This prevents issues with multiple instances of 3rd party e-commerce widgets 
-    // from ever being in the DOM.
-    // https://stackoverflow.com/a/21696585/11378853
-  const desktopElement = useRef<HTMLDivElement | null>(null)
-  const [layout, setLayout] = useState<'mobile' | 'desktop' | undefined>(undefined)
-
-  useLayoutEffect(() => {
-    const checkLayout = () => {
-      setLayout(!!desktopElement.current?.offsetParent ? 'desktop' : 'mobile')
-    }
-
-    // initial layout check
-    checkLayout()
-    
-    window.addEventListener('resize', checkLayout)
-    return () => {
-      window.removeEventListener('resize', checkLayout)
-    }
-  }, [])
-
-  const StepToRender = STEPS[stepIndex].Comp  
-
-  return (<>
-    <DesktopCP 
-      clx={cn('h-full', clx, 'hidden md:flex')} 
-      onLeave={_close}
-      step={stepIndex}
-      stepNames={STEP_NAMES}
-    >
-      {/* Element required to determine if DesktopCP is visible. See above. */}
-      <div ref={desktopElement}/>
-      {layout === 'desktop' && <StepToRender onDone={() => {setStep('next')}} orderId={orderId} setOrderId={setOrderId}/>}
-    </DesktopCP>
-    <MobileCP 
-      clx={cn('w-full h-full overflow-y-auto', clx, 'md:hidden' )} 
-      onLeave={_close}
-      step={stepIndex}
-      stepNames={STEP_NAMES}
-    >
-      {layout === 'mobile' && <StepToRender onDone={() => {setStep('next')}} orderId={orderId} setOrderId={setOrderId}/>}
-    </MobileCP>
-  </>)
-}
-
-export default CheckoutPanel

package/components/commerce/checkout-panel/mobile-cp.tsx

@@ -1,67 +0,0 @@
-'use client'
-import React, { type PropsWithChildren } from 'react'
-
-import { StepIndicator } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-import { AuthWidget } from '@hanzo/auth/components'
-
-import { BackButton, Logo } from '../..'
-import BagButton from '../bag-button'
-import PolicyLinks from './policy-links'
-import CartAccordian from './cart-accordian'
-import type CheckoutPanelProps from './checkout-panel-props'
-
-
-const MobileCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = ({
-  step,
-  stepNames,
-  onLeave,
-  clx='',
-  children
-}) => (
-
-  <div /* id='MOBILE_GRID' */ className={cn('bg-background flex flex-col justify-start px-4 pt-[101px]', clx)}>
-    <div className='fixed z-11 top-0 h-[45px] w-full flex justify-between items-stretch bg-background'>
-      <div className='flex items-stretch gap-1 grow-0'>
-        <BackButton 
-          size='sm' 
-          clx={
-            '-ml-5 !px-0 aspect-square h-full ' + 
-            'rounded-full active:!bg-level-3 ' 
-          }
-          onBack={onLeave}
-        />
-        <Logo size='xs' variant='text-only' href='/' onClick={onLeave} outerClx='-ml-2'/>
-      </div>
-      <StepIndicator 
-        dotSizeRem={1} 
-        steps={stepNames} 
-        currentStep={step} 
-        className='relative grow mx-2 top-[14px] text-xs font-semibold w-full' 
-      />
-
-      {/* 72px by observation (for centering).  Need wrapper div since 'noLogin' returns null if no logged in user */}
-      <div className='w-[72px] grow-0 shrink-0 flex items-center justify-center'><AuthWidget noLogin className=''/></div>
-    </div>
-    <CartAccordian 
-      icon={
-        <BagButton 
-          animateOnHover={false} 
-          showIfEmpty 
-          size='sm'
-          className='mr-1 relative w-5 h-6 sm:w-6 sm:h-7'
-          iconClx='fill-foreground'
-        />
-      } 
-      clx='flex items-center justify-center w-full'
-      triggerClx='bg-background fixed z-11 top-[45px] left-0 right-0 !m-0 px-4'
-      panelClx='!py-0'
-      scrollAfter={3}
-      scrollHeightClx='h-[385px]' 
-    />
-    {children}
-    <PolicyLinks clx='mt-auto mb-3 pt-2' />
-  </div>
-)
-
-export default MobileCheckoutPanel

package/components/commerce/checkout-panel/policy-links.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-
-import { Separator, buttonVariants } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-
-const linkClx = buttonVariants({ 
-  variant: 'linkMuted', 
-  size: 'link',
-  rounded: 'none', 
-})
-
-const PolicyLinks: React.FC<{
-  clx?: string
-}> = ({
-  clx=''
-}) => (
-  <div className={cn('flex flex-col items-center', clx)}>
-    <Separator/>
-    <div className='flex gap-4 py-2 text-sm'>
-      {/* TODO: add Refund policy and Privacy policy links */}
-      <Link className={linkClx} href=''>refund policy</Link>
-      <Link className={linkClx} href=''>privacy policy</Link>
-    </div>
-  </div>   
-)
-
-export default PolicyLinks

package/components/commerce/checkout-panel/steps-indicator.tsx

@@ -1,39 +0,0 @@
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbSeparator
-} from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-const StepsIndicator: React.FC<{
-  currentStep: number
-  stepNames: string[]
-  className?: string
-}> = ({
-  currentStep,
-  stepNames,
-  className=''
-}) => (
-  <Breadcrumb className={className}>
-    <BreadcrumbList>
-      {stepNames.map((name, i) => (
-        <>
-          <BreadcrumbItem key={`item-${i}`}>
-            <BreadcrumbLink className={cn(
-                currentStep >= i ? '!text-foreground hover:text-foreground' : 'hover:text-muted-2',
-                'text-xxs sm:text-sm'  
-              )}
-            >
-              {name}
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          {i !== stepNames.length - 1 && <BreadcrumbSeparator  key={`sep-${i}`}/>}
-        </>
-      ))}
-    </BreadcrumbList>
-  </Breadcrumb>
-)
-
-export default StepsIndicator

package/components/commerce/checkout-panel/thank-you.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-
-import { ApplyTypography } from '@hanzo/ui/primitives'
-
-import type { CheckoutStepComponentProps } from '@hanzo/commerce/types'
-
-const ThankYou: React.FC<CheckoutStepComponentProps> = ({}) =>  (
-  <ApplyTypography className='flex flex-col gap-4 text-center mt-10'>
-    <h3>Thank you for your order!</h3>
-    <h6>Once your payment has been confirmed, you'll recieve an email with additional information.</h6>
-    <p>
-      While you wait, we cordially invite you to join the <Link href='https://warpcast.com/~/channel/lux'>Lux Channel</Link> on <Link href='https://warpcast.com/~/invite-page/227706?id=fbc9ca91'>Warpcast</Link>.
-    </p>
-  </ApplyTypography>
-)
-
-export default ThankYou

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

@@ -1,78 +0,0 @@
-'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 { Bag } 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 '>
-            <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/drawer/index.tsx

@@ -1,88 +0,0 @@
-'use client'
-import React from 'react'
-import { useRouter } from 'next/navigation'
-import { observer } from 'mobx-react-lite'
-
-import { CarouselBuyCard } from '@hanzo/commerce'
-
-import { 
-  useSelectAndBuy, 
-  useCommerceDrawer, 
-} from '../../../commerce/ui/context'
-
-import CommerceDrawer from './shell'
-import CheckoutButton from '../checkout-button'
-import Micro from './micro'
-
-const CommerceUIComponent: React.FC = observer(() => {
-
-  const buy = useSelectAndBuy()
-  const drawer = useCommerceDrawer()
-  const router = useRouter()
-
-  const handleCheckout = (): void => {
-    router.push('/checkout')
-  }
-
-  const handleHandleClicked = (): void => {
-
-    if (drawer.state === 'full') {
-      buy.hideVariants()
-    }
-    else if (drawer.state === 'micro') {
-      buy.showRecentVariants()
-    }
-  }
-
-  const handleItemClicked = () => {
-    buy.showRecentVariants()
-  }
-
-  const handleCloseGesture = (): boolean => {
-    if (drawer.state === 'full') {
-      buy.hideVariants()
-      return true // "handled!"
-    }
-    return false
-  }
-
-  return (
-    <CommerceDrawer 
-      handleHandleClicked={handleHandleClicked}
-      handleCloseGesture={handleCloseGesture}
-      drawerClx='flex flex-col'
-    >
-      {drawer.state === 'full' && (
-        /* The actual drawer is larger than the visible area (due to awkward
-        vaul impl.  So we have to ask the drawer for its currect snappoint 
-        and constrain layout to that.  
-        */
-        <div style={{height: drawer.snapPointPx - 24 /* fudge factor for handle area */}} >
-          <CarouselBuyCard 
-            skuPath={buy.currentSkuPath!} 
-            checkoutButton={
-              <CheckoutButton 
-                handleCheckout={handleCheckout} 
-                className='w-full min-w-[160px] sm:max-w-[320px]'
-              />
-            }
-            clx='justify-between h-full pb-3 gap-8'
-            addBtnClx='w-full min-w-[160px] sm:max-w-[320px]' 
-            buttonsAreaClx='grow-0 shrink-0 mt-0'
-            selectorClx='max-w-[475px] justify-between grow'
-            
-          />
-        </div>
-      )}
-      {drawer.state === 'micro' && (
-        <Micro 
-          handleCheckout={handleCheckout}
-          handleItemClicked={handleItemClicked}
-          clx='w-full px-2 sm:w-[460px] sm:mx-auto md:w-[550px]'
-        />
-      )}
-    </CommerceDrawer>
-  )
-})
-
-export default CommerceUIComponent

package/components/commerce/drawer/micro.tsx

@@ -1,145 +0,0 @@
-'use client'
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { Button, Image } from '@hanzo/ui/primitives'
-import { cn,  } from '@hanzo/ui/util'
-import type { LineItem } from '@hanzo/commerce/types'
-import { useCommerce, formatCurrencyValue } from '@hanzo/commerce'
-
-import CheckoutButton from '../checkout-button'
-import { useCommerceDrawer } from '../../../commerce/ui/context'
-
-const CN = {
-    // h: mind padding!
-  mobile: { w: 36, h: 32 },
-  sm:  { w: 60, h: 34 },
-  desktop: { w: 60, h: 32 },
-}
-
-const Info: React.FC<{
-  item: LineItem
-  clx?: string
-}> = ({
-  item,
-  clx=''
-}) => {
-
-  const cmmc = useCommerce()
-  const family = cmmc.getFamilyById(item.familyId)
-
-  let topLine = family!.title
-  if (item.sku.startsWith('LXM-AG') || item.sku.startsWith('LXM-AU')) {
-    topLine = family!.parentTitle + ', ' + family!.title   
-  }
-
-  const optionLabel = item.optionLabelShort ?? item.optionLabel
-  const priceStr = formatCurrencyValue(item.price)
-
-  return (<>
-    <div className={cn('sm:hidden flex flex-col !text-muted items-stretch whitespace-nowrap text-ellipsis ', clx)}>
-      <p className='text-left text-xs'>{topLine}</p>
-      <div className='flex justify-between text-xxs'>
-        <div>{optionLabel}</div>
-        <div className='pl-2.5'>{priceStr}</div>
-      </div>
-    </div>
-    <div className={cn('hidden sm:flex !text-muted  flex-col items-stretch whitespace-nowrap text-ellipsis text-xs', clx)}>
-      <p className='text-left'>{topLine}</p>
-      <div className='flex justify-between'>
-        <div>{optionLabel}</div>
-        <div className='pl-2.5'>{priceStr}</div>
-      </div>
-    </div>
-  </>)
-}
-
-const PROMPT_COMMON_CLX = 'block absolute top-0 left-0 bg-transparent duration-400 transition-opacity' 
-
-const Micro: React.FC<{
-  clx?: string
-  handleCheckout: () => void
-  handleItemClicked: () => void 
-}> = observer(({
-  clx='',
-  handleCheckout,
-  handleItemClicked 
-}) => {
-
-  const drawer = useCommerceDrawer()
-  const cmmc = useCommerce()
-
-  return (        
-    <div className={cn(
-      (drawer.showRecent ? 'grid grid-cols-2' : 'flex justify-center items-center '),
-      (drawer.showRecent ? ((drawer.isMobile) ? '-mt-3' : '-mt-3') : ''),
-      'gap-2 md:gap-3 relative',
-      clx
-    )}>
-    {drawer.showRecent && (
-      <div className={'flex flex-col items-stretch ' + (drawer.isMobile ? 'justify-start' : 'group')}>
-        <p className={'relative text-muted text-xxs md:text-xs leading-none pl-1 self-start ' + (drawer.isMobile ? 'top-[3px]' : 'top-[1px]')}>
-          <span className='invisible'>scrictly for layout</span>
-          {drawer.isMobile ? (
-            <span className={PROMPT_COMMON_CLX}>tap for options:</span>
-          ) : (<>
-            <span className={PROMPT_COMMON_CLX + ' group-hover:opacity-0'}>recent item:</span>
-            <span className={PROMPT_COMMON_CLX + ' opacity-0 group-hover:opacity-100'}>view options:</span>
-          </>)}
-        </p>
-        <Button 
-          variant='ghost'
-          rounded={drawer.isMobile ? 'md' : 'lg'}
-          size={drawer.isMobile ? 'sm' : 'default'}
-          onClick={handleItemClicked}
-          className={cn(
-            'box-content',
-            'flex flex-row justify-between items-center gap-1',
-            '-ml-1.5',
-            'overflow-hidden ', 
-            'px-1 md:px-2 py-[2px]',
-            'border border-transparent group-hover:border-muted-3',
-            'group-hover:!bg-transparent',
-            '!min-w-0'
-          )}
-        >
-          {cmmc.recentItem?.item.img && (<>
-            <Image def={cmmc.recentItem.item.img} constrainTo={CN.mobile} preload className='sm:hidden grow-0 shrink-0'/>
-            <Image def={cmmc.recentItem.item.img} constrainTo={CN.sm} preload className='hidden sm:block md:hidden grow-0 shrink-0'/>
-            <Image def={cmmc.recentItem.item.img} constrainTo={CN.desktop} preload className='hidden md:block grow-0 shrink-0'/>
-          </>)} 
-          {cmmc.recentItem && (
-            <div className='grow w-full'>
-              <Info item={cmmc.recentItem.item} clx='w-full'/>
-            </div>
-          )}
-        </Button>
-      </div>
-    )}
-    {drawer.showCheckout && (
-      <div className={cn(
-        'flex flex-col w-full', 
-        (drawer.showRecent ? 'items-stretch' : 'items-center' ),
-        (drawer.isMobile ? 'justify-start' : 'justify-center')
-      )}>
-        {drawer.showRecent && <p className='invisible text-muted text-xxs md:text-xs leading-none pl-1 self-start'>for layout</p>}
-        <CheckoutButton 
-          handleCheckout={handleCheckout} 
-          variant='primary' 
-          size={drawer.isMobile ? 'xs' : 'lg'}
-          rounded={drawer.isMobile ? 'md' : 'lg'}
-          centerText={drawer.isMobile ? !drawer.showRecent : true}
-          className={cn(drawer.isMobile ? 
-            (drawer.showRecent ? 'pl-3.5 pr-2.5' : 'min-w-[320px]')
-            :
-            (drawer.showRecent ? '' : 'w-[320px]'),
-            'text-sm font-semibold'
-          )} 
-        />
-      </div>
-    )}
-    </div>
-  )
-})
-
-export default Micro