DocsCopyPage() — ui Function Reference

Architecture documentation for the DocsCopyPage() function in docs-copy-page.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ DocsCopyPage() — ui Function Reference

Dependency Diagram

graph TD
  338bba32_1657_72b6_62c7_351de9808a30["DocsCopyPage()"]
  ffe50b19_b93e_6f57_8731_ec5ee957e005["docs-copy-page.tsx"]
  338bba32_1657_72b6_62c7_351de9808a30 -->|defined in| ffe50b19_b93e_6f57_8731_ec5ee957e005
  style 338bba32_1657_72b6_62c7_351de9808a30 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/docs-copy-page.tsx lines 156–223

export function DocsCopyPage({ page, url }: { page: string; url: string }) {
  const { copyToClipboard, isCopied } = useCopyToClipboard()

  const trigger = (
    <Button
      variant="secondary"
      size="sm"
      className="peer -ml-0.5 size-8 shadow-none md:size-7 md:text-[0.8rem]"
    >
      <IconChevronDown className="rotate-180 sm:rotate-0" />
    </Button>
  )

  return (
    <Popover>
      <div className="bg-secondary group/buttons relative flex rounded-lg *:[[data-slot=button]]:focus-visible:relative *:[[data-slot=button]]:focus-visible:z-10">
        <PopoverAnchor />
        <Button
          variant="secondary"
          size="sm"
          className="h-8 shadow-none md:h-7 md:text-[0.8rem]"
          onClick={() => copyToClipboard(page)}
        >
          {isCopied ? <IconCheck /> : <IconCopy />}
          Copy Page
        </Button>
        <DropdownMenu>
          <DropdownMenuTrigger asChild className="hidden sm:flex">
            {trigger}
          </DropdownMenuTrigger>
          <DropdownMenuContent
            align="end"
            className="animate-none! rounded-lg shadow-none"
          >
            {Object.entries(menuItems).map(([key, value]) => (
              <DropdownMenuItem key={key} asChild>
                {value(url)}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
        <Separator
          orientation="vertical"
          className="!bg-foreground/5 absolute top-1 right-8 z-0 !h-6 peer-focus-visible:opacity-0 sm:right-7 sm:!h-5"
        />
        <PopoverTrigger asChild className="flex sm:hidden">
          {trigger}
        </PopoverTrigger>
        <PopoverContent
          className="bg-background/70 dark:bg-background/60 w-52 !origin-center rounded-lg p-1 shadow-none backdrop-blur-sm"
          align="start"
        >
          {Object.entries(menuItems).map(([key, value]) => (
            <Button
              variant="ghost"
              size="lg"
              asChild
              key={key}
              className="*:[svg]:text-muted-foreground w-full justify-start text-base font-normal"
            >
              {value(url)}
            </Button>
          ))}
        </PopoverContent>
      </div>
    </Popover>
  )
}