supabase/apps/docs/components/Breadcrumbs.tsx

'use client'

import { resolveBreadcrumbs } from '~/lib/breadcrumbs'
import { useBreakpoint } from 'common'
import Link from 'next/link'
import { usePathname, useSearchParams } from 'next/navigation'
import React, { Fragment, Suspense } from 'react'
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
  Button,
  cn,
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerFooter,
  DrawerTrigger,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from 'ui'

interface BreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
  minLength?: number
  forceDisplayOnMobile?: boolean
}

export default function Breadcrumbs(props: BreadcrumbsProps) {
  return (
    <Suspense>
      <BreadcrumbsInternal {...props} />
    </Suspense>
  )
}

const BreadcrumbsInternal = ({
  className,
  minLength = 2,
  forceDisplayOnMobile = false,
}: BreadcrumbsProps) => {
  const breadcrumbs = useBreadcrumbs()
  const [open, setOpen] = React.useState(false)
  const isMobile = useBreakpoint('md')

  const ITEMS_TO_DISPLAY = isMobile ? 4 : 3

  if (!breadcrumbs?.length || breadcrumbs?.length < minLength) return null

  const appendedBreadcrumbs = breadcrumbs?.slice(
    -ITEMS_TO_DISPLAY + 1,
    isMobile && !forceDisplayOnMobile ? -1 : undefined
  )

  return (
    <Breadcrumb className={cn(className)}>
      <BreadcrumbList className="text-foreground-lighter p-0">
        {breadcrumbs.length >= ITEMS_TO_DISPLAY && (
          <>
            <BreadcrumbItem>
              {breadcrumbs[0].url ? (
                <BreadcrumbLink asChild>
                  <Link href={breadcrumbs[0].url}>
                    {breadcrumbs[0].title || breadcrumbs[0].name}
                  </Link>
                </BreadcrumbLink>
              ) : (
                <BreadcrumbPage>{breadcrumbs[0].title || breadcrumbs[0].name}</BreadcrumbPage>
              )}
            </BreadcrumbItem>
            <BreadcrumbSeparator />
          </>
        )}
        {breadcrumbs.length > ITEMS_TO_DISPLAY && (
          <>
            <BreadcrumbItem>
              {!isMobile ? (
                <DropdownMenu open={open} onOpenChange={setOpen}>
                  <DropdownMenuTrigger className="flex items-center gap-1" aria-label="Toggle menu">
                    <BreadcrumbEllipsis className="h-4 w-4" />
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="start">
                    {breadcrumbs.slice(1, -2).map((crumb, index) => (
                      <DropdownMenuItem
                        key={index}
                        className={cn(!crumb.url && 'pointer-events-none')}
                      >
                        {crumb.url ? (
                          <Link href={crumb.url}>{crumb.title || crumb.name}</Link>
                        ) : (
                          crumb.title || crumb.name
                        )}
                      </DropdownMenuItem>
                    ))}
                  </DropdownMenuContent>
                </DropdownMenu>
              ) : (
                <Drawer open={open} onOpenChange={setOpen}>
                  <DrawerTrigger aria-label="Toggle Menu">
                    <BreadcrumbEllipsis className="h-4 w-4" />
                  </DrawerTrigger>
                  <DrawerContent>
                    <div className="grid gap-1 px-4">
                      {breadcrumbs.slice(1, -2).map((crumb, index) =>
                        crumb.url ? (
                          <Link key={index} href={crumb.url}>
                            {crumb.title || crumb.name}
                          </Link>
                        ) : (
                          crumb.title || crumb.name
                        )
                      )}
                    </div>
                    <DrawerFooter className="pt-4">
                      <DrawerClose asChild>
                        <Button variant="outline">Close</Button>
                      </DrawerClose>
                    </DrawerFooter>
                  </DrawerContent>
                </Drawer>
              )}
            </BreadcrumbItem>
            <BreadcrumbSeparator />
          </>
        )}
        {appendedBreadcrumbs?.map((crumb, index) => (
          <Fragment key={index}>
            <BreadcrumbItem
              className={cn(
                'flex items-center overflow-hidden',
                index === appendedBreadcrumbs.length - 1 && 'md:text-foreground-light'
              )}
            >
              {crumb.url ? (
                <BreadcrumbLink asChild>
                  <Link href={crumb.url}>{crumb.title || crumb.name}</Link>
                </BreadcrumbLink>
              ) : (
                <BreadcrumbPage>{crumb.title || crumb.name}</BreadcrumbPage>
              )}
            </BreadcrumbItem>
            <BreadcrumbSeparator
              className={cn(index === appendedBreadcrumbs.length - 1 && 'md:hidden')}
            />
          </Fragment>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  )
}

function useBreadcrumbs() {
  const pathname = usePathname()
  return resolveBreadcrumbs(pathname)
}