CopyCodeButton() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ CopyCodeButton() — ui Function Reference

Dependency Diagram

graph TD
  9f2cb53a_5c95_e9d5_a6c0_39c7317ab19b["CopyCodeButton()"]
  140c7d1e_fab6_452b_6086_5ea5d9731e35["theme-customizer.tsx"]
  9f2cb53a_5c95_e9d5_a6c0_39c7317ab19b -->|defined in| 140c7d1e_fab6_452b_6086_5ea5d9731e35
  style 9f2cb53a_5c95_e9d5_a6c0_39c7317ab19b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/theme-customizer.tsx lines 199–252

export function CopyCodeButton({
  className,
  ...props
}: React.ComponentProps<typeof Button>) {
  return (
    <>
      <Drawer>
        <DrawerTrigger asChild>
          <Button
            className={cn("h-8 rounded-lg shadow-none sm:hidden", className)}
            {...props}
          >
            Copy
          </Button>
        </DrawerTrigger>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Theme</DrawerTitle>
            <DrawerDescription>
              Copy and paste the following code into your CSS file.
            </DrawerDescription>
          </DrawerHeader>
          <ThemeWrapper defaultTheme="zinc" className="relative px-6">
            <CustomizerCode />
          </ThemeWrapper>
        </DrawerContent>
      </Drawer>
      <Dialog>
        <DialogTrigger asChild>
          <Button
            className={cn(
              "hidden h-8 rounded-lg shadow-none sm:flex",
              className
            )}
            {...props}
          >
            Copy code
          </Button>
        </DialogTrigger>
        <DialogContent className="max-w-2xl outline-none">
          <DialogHeader>
            <DialogTitle>Theme</DialogTitle>
            <DialogDescription>
              Copy and paste the following code into your CSS file.
            </DialogDescription>
          </DialogHeader>
          <ThemeWrapper defaultTheme="zinc" className="relative">
            <CustomizerCode />
          </ThemeWrapper>
        </DialogContent>
      </Dialog>
    </>
  )
}