CopyCodeButton() — ui Function Reference

Architecture documentation for the CopyCodeButton() function in theme-customizer.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ CopyCodeButton() — ui Function Reference

Dependency Diagram

graph TD
  50663817_a4b6_a826_0390_b36b4bcaa110["CopyCodeButton()"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c["theme-customizer.tsx"]
  50663817_a4b6_a826_0390_b36b4bcaa110 -->|defined in| 99c48ee8_09f0_5ee4_48c9_597d941f294c
  style 50663817_a4b6_a826_0390_b36b4bcaa110 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/theme-customizer.tsx lines 114–164

export function CopyCodeButton({
  className,
  ...props
}: React.ComponentProps<typeof Button>) {
  let { activeTheme: activeThemeName = "neutral" } = useThemeConfig()
  activeThemeName = activeThemeName === "default" ? "neutral" : activeThemeName

  return (
    <>
      <Drawer>
        <DrawerTrigger asChild>
          <Button className={cn("sm:hidden", className)} {...props}>
            Copy Code
          </Button>
        </DrawerTrigger>
        <DrawerContent className="h-auto">
          <DrawerHeader>
            <DrawerTitle className="capitalize">{activeThemeName}</DrawerTitle>
            <DrawerDescription>
              Copy and paste the following code into your CSS file.
            </DrawerDescription>
          </DrawerHeader>
          <CustomizerCode themeName={activeThemeName} />
        </DrawerContent>
      </Drawer>
      <Dialog>
        <DialogTrigger asChild>
          <Button
            data-size={props.size}
            className={cn("group/button hidden sm:flex", className)}
            {...props}
          >
            <IconCopy />
            <span className="group-data-[size=icon-sm]/button:sr-only">
              Copy Code
            </span>
          </Button>
        </DialogTrigger>
        <DialogContent className="rounded-xl border-none bg-clip-padding shadow-2xl ring-4 ring-neutral-200/80 outline-none md:max-w-2xl dark:bg-neutral-800 dark:ring-neutral-900">
          <DialogHeader>
            <DialogTitle className="capitalize">{activeThemeName}</DialogTitle>
            <DialogDescription>
              Copy and paste the following code into your CSS file.
            </DialogDescription>
          </DialogHeader>
          <CustomizerCode themeName={activeThemeName} />
        </DialogContent>
      </Dialog>
    </>
  )
}