Function CopyThemeCode

components/bricks/theme/copy-theme-code.tsx:191–307

({
  className = '',
  fonts,
  themeObject,
}: {
  className?: string;
  fonts: {
    default: FontDefinition;
    display: FontDefinition;
  };
  themeObject: ColorThemeObject;
})

};

export const CopyThemeCode = ({
  className = '',
  fonts,
  themeObject,
}: {
  className?: string;
  fonts: {
    default: FontDefinition;
    display: FontDefinition;
  };
  themeObject: ColorThemeObject;
}) => {
  const [copyType, setCopyType] = useState(COPY_TYPES.NEXTJS);

  return (
    <div className={cn('flex-col', className)}>
      <Dialog>
        <DialogTrigger asChild>
          <Button
            variant="default"
            size="sm"
            className={cn('relative flex gap-1', className)}
          >
            <CopyIcon className="h-3 w-3 mr-1" />
            <span>Copy</span>
          </Button>
        </DialogTrigger>
        <DialogContent className="md:max-w-2xl lg:max-w-2xl">
          <DialogHeader>
            <DialogTitle>Copy code</DialogTitle>
            <DialogDescription>
              Used fonts:{' '}
              <span className="font-semibold">{fonts.default.name}</span>
              {fonts.default.name !== fonts.display.name ? (
                <span className="font-semibold">, {fonts.display.name}</span>
              ) : null}
              <br />
              Closest TailwindCSS colors:{' '}
              <span className="font-semibold">
                {themeObject.tailwindNames.primary}
              </span>
              <span className="font-semibold">
                , {themeObject.tailwindNames.secondary}
              </span>
            </DialogDescription>
          </DialogHeader>

          <div className="overflow-auto">
            <Tabs
              defaultValue={copyType}
              onValueChange={(tabId: string) => {
                setCopyType(tabId);
              }}
            >
              <TabsList className="w-full flex md:grid md:grid-cols-4 justify-start overflow-x-auto overflow-y-hidden mt-4">
                <TabsTrigger value={COPY_TYPES.NEXTJS}>
                  Shipixen / Next.js
                </TabsTrigger>