@thorprovider/blocks 0.1.0

package/src/blocks/marketing/navbars/navbar-3.tsx

@@ -0,0 +1,303 @@
+'use client'
+
+import { useEffect, useRef, useState, type ComponentProps, type Ref } from 'react'
+import { Menu } from 'lucide-react'
+
+import { Button } from '../../../ui/button'
+import { Separator } from '../../../ui/separator'
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '../../../ui/sheet'
+import { cn } from '../../../lib/utils'
+import type { CTA } from '../../../lib/types'
+
+export interface NavLink {
+  label: string
+  href?: string
+}
+
+export interface Navbar3Props {
+  navLinks: NavLink[]
+  /** Brand text shown next to the logo mark. */
+  logoText: string
+  logoHref?: string
+  /** Current path used to highlight the active nav link. */
+  currentPath?: string
+  /** Sign-in action. Rendered as a link when `href` is set, otherwise as a button. */
+  signIn?: CTA
+  /** Primary call-to-action. Rendered as a link when `href` is set, otherwise as a button. */
+  cta?: CTA
+  /**
+   * When `true` (default), the header condenses into a floating rounded pill once scrolled.
+   * Set to `false` for a plain solid bar instead of the condensing pill.
+   */
+  floatingPill?: boolean
+  /** Fired when the sign-in button (no `href`) is clicked. */
+  onSignIn?: () => void
+  /** Fired when the CTA button (no `href`) is clicked. */
+  onCtaClick?: () => void
+}
+
+/**
+ * Composition contract
+ * --------------------
+ * The header is `fixed`, so the first section of the page must clear it with `pt-16`,
+ * and `html { scroll-padding-top: 4rem }` keeps in-page anchors from landing underneath it.
+ *
+ * Set `floatingPill` to false for a plain solid bar on scroll instead of the condensing pill.
+ */
+function Logo({ text, href }: { text: string; href?: string }) {
+  const className =
+    'focus-visible:ring-ring flex items-center gap-2 rounded-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none'
+
+  const content = (
+    <>
+      <svg viewBox='0 0 32 32' aria-hidden='true' className='text-primary size-7' fill='none' xmlns='http://www.w3.org/2000/svg'>
+        <path
+          d='M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z'
+          fill='currentColor'
+        />
+        <path
+          d='M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z'
+          fill='currentColor'
+        />
+        <path
+          d='M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z'
+          fill='currentColor'
+        />
+        <path
+          d='M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z'
+          fill='currentColor'
+        />
+        <path
+          d='M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z'
+          fill='currentColor'
+        />
+        <path d='M21.1694 10.5806L14.5651 17.1849' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
+        <path d='M22.1694 14.5806L18.5632 18.1868' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
+        <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' strokeWidth='1.2' />
+        <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' strokeWidth='1.2' />
+      </svg>
+      <span className='text-base font-semibold tracking-tight'>{text}</span>
+    </>
+  )
+
+  if (!href) {
+    return <span className={className}>{content}</span>
+  }
+
+  return (
+    <a href={href} className={className}>
+      {content}
+    </a>
+  )
+}
+
+function ActionButton({
+  cta,
+  onClick,
+  variant,
+  className,
+  rounded,
+  ref,
+}: {
+  cta: CTA
+  onClick?: () => void
+  variant?: ComponentProps<typeof Button>['variant']
+  className?: string
+  rounded?: boolean
+  ref?: Ref<HTMLButtonElement>
+}) {
+  const classes = cn(rounded && 'rounded-full', className)
+
+  if (cta.href && !onClick) {
+    return (
+      <Button variant={variant} size='sm' className={classes} asChild ref={ref}>
+        <a href={cta.href}>{cta.label}</a>
+      </Button>
+    )
+  }
+
+  return (
+    <Button variant={variant} size='sm' className={classes} onClick={onClick} ref={ref}>
+      {cta.label}
+    </Button>
+  )
+}
+
+export function Navbar3({
+  navLinks,
+  logoText,
+  logoHref,
+  currentPath,
+  signIn,
+  cta,
+  floatingPill = true,
+  onSignIn,
+  onCtaClick,
+}: Navbar3Props) {
+  const sentinelRef = useRef<HTMLDivElement>(null)
+  const [scrolled, setScrolled] = useState(false)
+  const [open, setOpen] = useState(false)
+
+  /**
+   * Scroll detection:
+   * - Inside the store preview the scroller is an overflow ancestor (not the viewport).
+   *   IntersectionObserver + an out-of-flow sentinel is unreliable there, so use scrollTop.
+   * - On a normal page, an IntersectionObserver on the 8px sentinel gives hysteresis without
+   *   flickering at a hard `scrollY > 8` threshold.
+   */
+  useEffect(() => {
+    const sentinel = sentinelRef.current
+    if (!sentinel) {
+      return
+    }
+
+    let scrollParent: HTMLElement | null = null
+    let ancestor: HTMLElement | null = sentinel.parentElement
+    while (ancestor) {
+      const { overflowY } = getComputedStyle(ancestor)
+      if (
+        (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') &&
+        ancestor.scrollHeight > ancestor.clientHeight + 1
+      ) {
+        scrollParent = ancestor
+        break
+      }
+      ancestor = ancestor.parentElement
+    }
+
+    if (scrollParent) {
+      const scroller = scrollParent
+      const update = () => setScrolled(scroller.scrollTop > 8)
+      update()
+      scroller.addEventListener('scroll', update, { passive: true })
+      return () => scroller.removeEventListener('scroll', update)
+    }
+
+    const observer = new IntersectionObserver(([entry]) => setScrolled(!entry.isIntersecting), {
+      threshold: 0,
+    })
+
+    observer.observe(sentinel)
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <>
+      {/*
+        Absolute + out of flow: keeps an 8px hysteresis target for the observer
+        without painting a blank strip under the transparent (unscrolled) header.
+      */}
+      <div
+        ref={sentinelRef}
+        aria-hidden='true'
+        className='pointer-events-none absolute inset-x-0 top-0 h-2'
+      />
+
+      <header className='fixed inset-x-0 top-0 z-50'>
+        <div
+          className={cn(
+            'mx-auto flex h-14 items-center justify-between gap-4 transition-all duration-300 ease-out motion-reduce:transition-none',
+            scrolled
+              ? floatingPill
+                ? 'border-border/60 bg-background/80 mt-3 max-w-5xl rounded-full border px-4 shadow-sm backdrop-blur-md sm:px-5'
+                : 'border-border/60 bg-background/90 max-w-full border-b px-4 backdrop-blur-md sm:px-6 lg:px-8'
+              : 'max-w-7xl border border-transparent px-4 sm:px-6 lg:px-8'
+          )}
+        >
+          <Logo text={logoText} href={logoHref} />
+
+          <nav aria-label='Main' className='hidden lg:block'>
+            <ul className='flex items-center gap-1'>
+              {navLinks.map(link => {
+                const isActive = link.href !== undefined && link.href === currentPath
+                const className = cn(
+                  'hover:text-foreground focus-visible:ring-ring rounded-full px-3 py-2 text-sm font-medium transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:outline-none',
+                  isActive ? 'text-foreground' : 'text-muted-foreground'
+                )
+
+                return (
+                  <li key={link.label}>
+                    {link.href ? (
+                      <a href={link.href} aria-current={isActive ? 'page' : undefined} className={className}>
+                        {link.label}
+                      </a>
+                    ) : (
+                      <span className={className}>{link.label}</span>
+                    )}
+                  </li>
+                )
+              })}
+            </ul>
+          </nav>
+
+          <div className='hidden items-center gap-2 lg:flex'>
+            {signIn && <ActionButton cta={signIn} onClick={onSignIn} variant='ghost' />}
+            {cta && <ActionButton cta={cta} onClick={onCtaClick} rounded={floatingPill} />}
+          </div>
+
+          <Sheet open={open} onOpenChange={setOpen}>
+            <SheetTrigger asChild>
+              <Button variant='ghost' size='icon' aria-label='Open menu' className='lg:hidden'>
+                <Menu />
+              </Button>
+            </SheetTrigger>
+            <SheetContent side='right' className='w-full max-w-xs p-0'>
+              <SheetHeader className='border-border border-b'>
+                <SheetTitle className='text-left text-base'>Menu</SheetTitle>
+              </SheetHeader>
+
+              <nav aria-label='Mobile' className='flex flex-col px-2 py-2'>
+                {navLinks.map(link => {
+                  const isActive = link.href !== undefined && link.href === currentPath
+                  const className = cn(
+                    'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring rounded-md px-3 py-3 text-base font-medium transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:outline-none',
+                    isActive ? 'text-foreground' : 'text-muted-foreground'
+                  )
+
+                  return (
+                    <SheetClose key={link.label} asChild>
+                      {link.href ? (
+                        <a href={link.href} aria-current={isActive ? 'page' : undefined} className={className}>
+                          {link.label}
+                        </a>
+                      ) : (
+                        <button type='button' className={className}>
+                          {link.label}
+                        </button>
+                      )}
+                    </SheetClose>
+                  )
+                })}
+              </nav>
+
+              <div className='mt-auto flex flex-col gap-4 p-4'>
+                <Separator />
+                <div className='flex flex-col gap-2'>
+                  {signIn && (
+                    <SheetClose asChild>
+                      <ActionButton cta={signIn} onClick={onSignIn} variant='outline' className='w-full' />
+                    </SheetClose>
+                  )}
+                  {cta && (
+                    <SheetClose asChild>
+                      <ActionButton cta={cta} onClick={onCtaClick} className='w-full' />
+                    </SheetClose>
+                  )}
+                </div>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </div>
+      </header>
+    </>
+  )
+}
+
+export default Navbar3

package/src/blocks/marketing/navbars/navbar-4-account-menu.tsx

@@ -0,0 +1,118 @@
+import { Heart, HelpCircle, LogOut, MapPin, Package, Settings } from 'lucide-react'
+
+import { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'
+import { Button } from '../../../ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../../ui/dropdown-menu'
+
+export interface StoreUser {
+  name: string
+  email: string
+  avatar: string
+  initials: string
+}
+
+export interface AccountMenuItem {
+  label: string
+  href: string
+  description?: string
+  icon?: 'orders' | 'wishlist' | 'addresses' | 'settings'
+}
+
+export interface Navbar4AccountMenuProps {
+  /** Signed-in user. When omitted, the menu is not rendered. */
+  user?: StoreUser
+  /** Account links shown below the user header. Defaults to `[]`. */
+  items?: AccountMenuItem[]
+  onHelp?: () => void
+  onSignOut?: () => void
+}
+
+const accountIcons = {
+  orders: Package,
+  wishlist: Heart,
+  addresses: MapPin,
+  settings: Settings,
+} as const
+
+export function Navbar4AccountMenu({
+  user,
+  items = [],
+  onHelp,
+  onSignOut,
+}: Navbar4AccountMenuProps) {
+  if (!user) {
+    return null
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant='ghost'
+          size='icon'
+          className='rounded-full'
+          aria-label={`Account menu for ${user.name}`}
+        >
+          <Avatar size='sm' className='pointer-events-none size-8'>
+            <AvatarImage src={user.avatar || undefined} alt='' />
+            <AvatarFallback>{user.initials}</AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align='end'
+        sideOffset={8}
+        className='w-64 origin-(--transform-origin) p-1.5 duration-[250ms] data-closed:duration-150'
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuLabel className='px-2 py-2 font-normal'>
+            <div className='flex items-center gap-3'>
+              <Avatar size='sm' className='pointer-events-none'>
+                <AvatarImage src={user.avatar || undefined} alt='' />
+                <AvatarFallback>{user.initials}</AvatarFallback>
+              </Avatar>
+              <div className='min-w-0'>
+                <p className='text-foreground truncate text-sm font-medium'>{user.name}</p>
+                <p className='text-muted-foreground truncate text-xs'>{user.email}</p>
+              </div>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {items.map(item => {
+            const Icon = item.icon ? accountIcons[item.icon] : Package
+            return (
+              <DropdownMenuItem key={item.href} asChild className='gap-2.5 px-2 py-2'>
+                <a href={item.href}>
+                  <Icon className='text-muted-foreground size-4' />
+                  <span className='flex min-w-0 flex-col'>
+                    <span className='text-sm'>{item.label}</span>
+                    {item.description ? (
+                      <span className='text-muted-foreground text-xs font-normal'>{item.description}</span>
+                    ) : null}
+                  </span>
+                </a>
+              </DropdownMenuItem>
+            )
+          })}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem className='gap-2.5 px-2 py-2' onSelect={onHelp}>
+            <HelpCircle className='text-muted-foreground size-4' />
+            Help & support
+          </DropdownMenuItem>
+          <DropdownMenuItem variant='destructive' className='gap-2.5 px-2 py-2' onSelect={onSignOut}>
+            <LogOut className='size-4' />
+            Sign out
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/blocks/marketing/navbars/navbar-4-cart-sheet.tsx

@@ -0,0 +1,248 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
+import { Minus, Plus, ShoppingBag } from 'lucide-react'
+
+import { Button } from '../../../ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '../../../ui/empty'
+import { Separator } from '../../../ui/separator'
+import { SheetClose } from '../../../ui/sheet'
+
+export interface CartItem {
+  id: string
+  name: string
+  variant: string
+  price: number
+  qty: number
+  image: string
+}
+
+export interface Navbar4CartSheetProps {
+  items: CartItem[]
+  onQtyChange: (id: string, delta: number) => void
+  onRemove: (id: string) => void
+  /** Override price formatting (locale, currency). Defaults to USD. */
+  formatPrice?: (value: number) => string
+  onCheckout?: () => void
+  onViewCart?: () => void
+}
+
+const usdFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
+
+/** Approximate Transitions.dev `delete-with-smoky-dissolve` for list rows (Pro effect). */
+const smokyExit = {
+  opacity: 0,
+  y: 10,
+  scale: 0.96,
+  filter: 'blur(8px)',
+  transition: { duration: 0.35, ease: [0.4, 0, 0.2, 1] as const },
+}
+
+/**
+ * Transitions.dev `texts-reveal`: lines rise from below with blur, staggered.
+ * Exit is a quiet in-place fade — no Y return, no reverse stagger.
+ */
+const revealEase = [0.22, 1, 0.36, 1] as const
+const revealHidden = { opacity: 0, y: 12, filter: 'blur(3px)' }
+const revealShown = { opacity: 1, y: 0, filter: 'blur(0px)' }
+const revealExit = { opacity: 0, y: 0, filter: 'blur(0px)', transition: { duration: 0.2, ease: 'easeOut' as const } }
+
+export function Navbar4CartSheet({
+  items,
+  onQtyChange,
+  onRemove,
+  formatPrice,
+  onCheckout,
+  onViewCart,
+}: Navbar4CartSheetProps) {
+  const reduceMotion = useReducedMotion()
+  const format = formatPrice ?? (value => usdFormatter.format(value))
+  const subtotal = items.reduce((total, item) => total + item.price * item.qty, 0)
+  const isEmpty = items.length === 0
+  /** Wait for the last cart row's exit before revealing empty copy. */
+  const [showEmpty, setShowEmpty] = useState(isEmpty)
+
+  useEffect(() => {
+    if (!isEmpty) {
+      setShowEmpty(false)
+    }
+  }, [isEmpty])
+
+  return (
+    <>
+      <div className='relative flex min-h-0 flex-1 flex-col overflow-hidden'>
+        <ul className='flex-1 overflow-y-auto px-4'>
+          <AnimatePresence
+            initial={false}
+            mode='popLayout'
+            onExitComplete={() => {
+              if (items.length === 0) {
+                setShowEmpty(true)
+              }
+            }}
+          >
+            {items.map(item => (
+              <motion.li
+                key={item.id}
+                layout={!reduceMotion}
+                initial={reduceMotion ? false : { opacity: 0, y: 8, filter: 'blur(4px)' }}
+                animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
+                exit={reduceMotion ? { opacity: 0 } : smokyExit}
+                transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
+                className='border-border flex gap-4 border-b py-4 last:border-b-0'
+                style={{ willChange: 'transform, opacity, filter' }}
+              >
+                <img
+                  src={item.image || undefined}
+                  alt=''
+                  width={80}
+                  height={96}
+                  className='bg-muted size-20 shrink-0 rounded-md object-cover'
+                />
+                <div className='flex min-w-0 flex-1 flex-col'>
+                  <div className='flex items-start justify-between gap-2'>
+                    <div className='min-w-0'>
+                      <p className='truncate text-sm font-medium'>{item.name}</p>
+                      <p className='text-muted-foreground text-sm'>{item.variant}</p>
+                    </div>
+                    <p className='text-sm font-medium'>{format(item.price * item.qty)}</p>
+                  </div>
+
+                  <div className='mt-auto flex items-center justify-between pt-2'>
+                    <div className='border-border flex items-center rounded-md border'>
+                      <Button
+                        variant='ghost'
+                        size='icon'
+                        className='size-8 rounded-r-none'
+                        aria-label={`Decrease quantity, ${item.name}`}
+                        onClick={() => onQtyChange(item.id, -1)}
+                      >
+                        <Minus />
+                      </Button>
+                      <span className='w-8 text-center text-sm tabular-nums'>{item.qty}</span>
+                      <Button
+                        variant='ghost'
+                        size='icon'
+                        className='size-8 rounded-l-none'
+                        aria-label={`Increase quantity, ${item.name}`}
+                        onClick={() => onQtyChange(item.id, 1)}
+                      >
+                        <Plus />
+                      </Button>
+                    </div>
+                    <Button
+                      variant='ghost'
+                      size='sm'
+                      className='text-muted-foreground hover:text-foreground'
+                      aria-label={`Remove ${item.name} from cart`}
+                      onClick={() => onRemove(item.id)}
+                    >
+                      Remove
+                    </Button>
+                  </div>
+                </div>
+              </motion.li>
+            ))}
+          </AnimatePresence>
+        </ul>
+
+        <AnimatePresence>
+          {showEmpty ? (
+            <motion.div
+              key='empty'
+              initial={false}
+              exit={reduceMotion ? { opacity: 0 } : revealExit}
+              className='absolute inset-0'
+            >
+              <Empty className='h-full border-0'>
+                <EmptyHeader>
+                  <motion.div
+                    initial={reduceMotion ? false : revealHidden}
+                    animate={revealShown}
+                    transition={
+                      reduceMotion
+                        ? { duration: 0 }
+                        : { duration: 0.5, ease: revealEase, delay: 0 }
+                    }
+                    style={{ willChange: 'transform, opacity, filter' }}
+                  >
+                    <EmptyMedia variant='icon'>
+                      <ShoppingBag aria-hidden='true' />
+                    </EmptyMedia>
+                  </motion.div>
+                  <motion.div
+                    initial={reduceMotion ? false : revealHidden}
+                    animate={revealShown}
+                    transition={
+                      reduceMotion
+                        ? { duration: 0 }
+                        : { duration: 0.5, ease: revealEase, delay: 0.04 }
+                    }
+                    style={{ willChange: 'transform, opacity, filter' }}
+                  >
+                    <EmptyTitle>Your cart is empty</EmptyTitle>
+                  </motion.div>
+                  <motion.div
+                    initial={reduceMotion ? false : revealHidden}
+                    animate={revealShown}
+                    transition={
+                      reduceMotion
+                        ? { duration: 0 }
+                        : { duration: 0.5, ease: revealEase, delay: 0.08 }
+                    }
+                    style={{ willChange: 'transform, opacity, filter' }}
+                  >
+                    <EmptyDescription>Once you add something it will show up here.</EmptyDescription>
+                  </motion.div>
+                </EmptyHeader>
+                <motion.div
+                  initial={reduceMotion ? false : revealHidden}
+                  animate={revealShown}
+                  transition={
+                    reduceMotion
+                      ? { duration: 0 }
+                      : { duration: 0.5, ease: revealEase, delay: 0.12 }
+                  }
+                  style={{ willChange: 'transform, opacity, filter' }}
+                >
+                  <EmptyContent>
+                    <SheetClose asChild>
+                      <Button>Continue shopping</Button>
+                    </SheetClose>
+                  </EmptyContent>
+                </motion.div>
+              </Empty>
+            </motion.div>
+          ) : null}
+        </AnimatePresence>
+      </div>
+
+      {!isEmpty ? (
+        <div className='flex flex-col gap-4 p-4'>
+          <Separator />
+          <div className='flex items-center justify-between text-sm'>
+            <span className='text-muted-foreground'>Subtotal</span>
+            <span className='font-medium tabular-nums'>{format(subtotal)}</span>
+          </div>
+          <p className='text-muted-foreground text-xs'>Shipping and taxes are calculated at checkout.</p>
+          <div className='flex flex-col gap-2'>
+            <Button className='w-full' onClick={onCheckout}>
+              Checkout
+            </Button>
+            <Button variant='ghost' className='w-full' onClick={onViewCart}>
+              View cart
+            </Button>
+          </div>
+        </div>
+      ) : null}
+    </>
+  )
+}