react-email 1.6.0 → 1.6.2

package/dist/_preview/components.js

@@ -6,9 +6,13 @@ exports.components = [
         title: 'button.tsx',
         content: "import * as React from 'react';\nimport classnames from 'classnames';\nimport { unreachable } from '../utils';\nimport * as SlotPrimitive from '@radix-ui/react-slot';\n\ntype ButtonElement = React.ElementRef<'button'>;\ntype RootProps = React.ComponentPropsWithoutRef<'button'>;\n\ntype Appearance = 'white' | 'gradient';\ntype Size = '1' | '2' | '3' | '4';\n\ninterface ButtonProps extends RootProps {\n  asChild?: boolean;\n  appearance?: Appearance;\n  size?: Size;\n}\n\nexport const Button = React.forwardRef<ButtonElement, Readonly<ButtonProps>>(\n  (\n    {\n      asChild,\n      appearance = 'white',\n      className,\n      children,\n      size = '2',\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const classNames = classnames(\n      getSize(size),\n      getAppearance(appearance),\n      'inline-flex items-center justify-center border font-medium',\n      className,\n    );\n\n    return asChild ? (\n      <SlotPrimitive.Slot ref={forwardedRef} {...props} className={classNames}>\n        <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>\n      </SlotPrimitive.Slot>\n    ) : (\n      <button ref={forwardedRef} className={classNames} {...props}>\n        {children}\n      </button>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n\nconst getAppearance = (appearance: Appearance | undefined) => {\n  switch (appearance) {\n    case undefined:\n    case 'white':\n      return [\n        'bg-white text-black',\n        'hover:bg-white/90',\n        'focus:ring-2 focus:ring-white/20 focus:outline-none focus:bg-white/90',\n      ];\n    case 'gradient':\n      return [\n        'bg-gradient backdrop-blur-[20px] border-[#34343A]',\n        'hover:bg-gradientHover',\n        'focus:ring-2 focus:ring-white/20 focus:outline-none focus:bg-gradientHover',\n      ];\n    default:\n      unreachable(appearance);\n  }\n};\n\nconst getSize = (size: Size | undefined) => {\n  switch (size) {\n    case '1':\n      return '';\n    case undefined:\n    case '2':\n      return 'text-[14px] h-8 px-3 rounded-md gap-2';\n    case '3':\n      return 'text-[14px] h-10 px-4 rounded-md gap-2';\n    case '4':\n      return 'text-base h-11 px-4 rounded-md gap-2';\n    default:\n      unreachable(size);\n  }\n};\n",
     },
+    {
+        title: 'code-container.tsx',
+        content: "import { Language } from 'prism-react-renderer';\nimport { IconButton } from './icon-button';\nimport { IconClipboard } from './icon-clipboard';\nimport { IconDownload } from './icon-download';\nimport { IconCheck } from './icon-check';\nimport { copyTextToClipboard } from '../utils';\nimport languageMap from '../utils/language-map';\nimport { Tooltip } from './tooltip';\nimport { Code } from './code';\nimport * as React from 'react';\n\ninterface CodeContainerProps {\n  markups: MarkupProps[];\n}\n\ninterface MarkupProps {\n  language: Language;\n  content: string;\n}\n\nexport const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({\n  markups,\n}) => {\n  const [isCopied, setIsCopied] = React.useState(false);\n  const [activeTab, setActiveTab] = React.useState(markups[0].language);\n  let file = null;\n  let url = null;\n\n  const renderDownloadIcon = () => {\n    let value = markups.filter((markup) => markup.language === activeTab);\n    file = new File([value[0].content], `email.${value[0].language}`);\n    url = URL.createObjectURL(file);\n\n    return (\n      <a href={url} download={file.name}>\n        <IconDownload />\n      </a>\n    );\n  };\n\n  const renderClipboardIcon = () => {\n    const handleClipboard = async () => {\n      const activeContent = markups.filter(({ language }) => {\n        return activeTab === language;\n      });\n      setIsCopied(true);\n      await copyTextToClipboard(activeContent[0].content);\n      setTimeout(() => setIsCopied(false), 3000);\n    };\n\n    return (\n      <IconButton onClick={handleClipboard}>\n        {isCopied ? <IconCheck /> : <IconClipboard />}\n      </IconButton>\n    );\n  };\n\n  React.useEffect(() => {\n    setIsCopied(false);\n  }, [activeTab]);\n\n  return (\n    <pre\n      className={\n        'border-slate-6 relative w-full items-center overflow-auto whitespace-pre rounded-md border text-sm backdrop-blur-md'\n      }\n      style={{\n        lineHeight: '130%',\n        background:\n          'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',\n        boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',\n      }}\n    >\n      <div className=\"h-9 border-b border-slate-6\">\n        <div className=\"py-[10px] px-4 text-xs flex gap-8\">\n          {markups.map(({ language }) => {\n            return (\n              <div key={language}>\n                <button\n                  className={`${activeTab !== language && 'opacity-25'}`}\n                  onClick={() => setActiveTab(language)}\n                >\n                  {languageMap[language]}\n                </button>\n              </div>\n            );\n          })}\n        </div>\n        <Tooltip>\n          <Tooltip.Trigger className=\"absolute top-2 right-2 hidden md:block\">\n            {renderClipboardIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Copy to Clipboard</Tooltip.Content>\n        </Tooltip>\n        <Tooltip>\n          <Tooltip.Trigger className=\"text-gray-11 absolute top-2 right-8 hidden md:block\">\n            {renderDownloadIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Download</Tooltip.Content>\n        </Tooltip>\n      </div>\n      {markups.map(({ language, content }) => {\n        return (\n          <div\n            className={`${activeTab !== language && 'hidden'}`}\n            key={language}\n          >\n            <Code language={language}>{content}</Code>\n          </div>\n        );\n      })}\n    </pre>\n  );\n};\n",
+    },
     {
         title: 'code.tsx',
-        content: "import classnames from 'classnames';\nimport Highlight, { defaultProps, Language } from 'prism-react-renderer';\nimport { IconButton } from './icon-button';\nimport { IconClipboard } from './icon-clipboard';\nimport { IconDownload } from './icon-download';\nimport { IconCheck } from './icon-check';\nimport { copyTextToClipboard } from '../utils';\nimport { Tooltip } from './tooltip';\nimport * as React from 'react';\n\ninterface CodeProps {\n  children: any;\n  className?: string;\n  language?: Language;\n}\n\nconst theme = {\n  plain: {\n    color: '#EDEDEF',\n    fontSize: 13,\n    fontFamily: 'MonoLisa, Menlo, monospace',\n  },\n  styles: [\n    {\n      types: ['comment'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['atrule', 'keyword', 'attr-name', 'selector'],\n      style: {\n        color: '#7E7D86',\n      },\n    },\n    {\n      types: ['punctuation', 'operator'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['class-name', 'function', 'tag', 'key-white'],\n      style: {\n        color: '#EDEDEF',\n      },\n    },\n  ],\n};\n\nexport const Code: React.FC<Readonly<CodeProps>> = ({\n  children,\n  className,\n  language = 'html',\n  ...props\n}) => {\n  const [isCopied, setIsCopied] = React.useState(false);\n  const value = children.trim();\n\n  const file = new File([value], `email.${language}`);\n  const url = URL.createObjectURL(file);\n\n  return (\n    <Highlight\n      {...defaultProps}\n      theme={theme}\n      code={value}\n      language={language as Language}\n    >\n      {({ tokens, getLineProps, getTokenProps }) => (\n        <pre\n          className={classnames(\n            'border-slate-6 relative w-full items-center overflow-auto whitespace-pre rounded-md border text-sm backdrop-blur-md',\n            className,\n          )}\n          style={{\n            lineHeight: '130%',\n            background:\n              'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',\n            boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',\n          }}\n        >\n          <div className=\"h-9 border-b border-slate-6\">\n            <div className=\"py-[10px] px-4 text-xs\">\n              {language === 'jsx' ? 'React' : 'HTML'}\n            </div>\n            <Tooltip>\n              <Tooltip.Trigger className=\"absolute top-2 right-2 hidden md:block\">\n                <IconButton\n                  onClick={async () => {\n                    setIsCopied(true);\n                    await copyTextToClipboard(value);\n                    setTimeout(() => setIsCopied(false), 3000);\n                  }}\n                >\n                  {isCopied ? <IconCheck /> : <IconClipboard />}\n                </IconButton>\n              </Tooltip.Trigger>\n              <Tooltip.Content>Copy to Clipboard</Tooltip.Content>\n            </Tooltip>\n\n            <Tooltip>\n              <Tooltip.Trigger className=\"text-gray-11 absolute top-2 right-8 hidden md:block\">\n                <a href={url} download={file.name}>\n                  <IconDownload />\n                </a>\n              </Tooltip.Trigger>\n              <Tooltip.Content>Download</Tooltip.Content>\n            </Tooltip>\n          </div>\n\n          <div\n            className=\"absolute right-0 top-0 h-px w-[200px]\"\n            style={{\n              background:\n                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',\n            }}\n          />\n          <div className=\"p-4\">\n            {tokens.map((line, i) => {\n              return (\n                <div\n                  key={i}\n                  {...getLineProps({ line, key: i })}\n                  className={classnames('whitespace-pre', {\n                    \"before:text-slate-11 before:mr-2 before:content-['$']\":\n                      language === 'bash' && tokens && tokens.length === 1,\n                  })}\n                >\n                  {line.map((token, key) => {\n                    const isException =\n                      token.content === 'from' &&\n                      line[key + 1]?.content === ':';\n                    const newTypes = isException\n                      ? [...token.types, 'key-white']\n                      : token.types;\n                    token.types = newTypes;\n\n                    return (\n                      <React.Fragment key={key}>\n                        <span {...getTokenProps({ token, key })} />\n                      </React.Fragment>\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n          <div\n            className=\"absolute left-0 bottom-0 h-px w-[200px]\"\n            style={{\n              background:\n                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',\n            }}\n          />\n        </pre>\n      )}\n    </Highlight>\n  );\n};\n",
+        content: "import classnames from 'classnames';\nimport Highlight, { defaultProps, Language } from 'prism-react-renderer';\nimport * as React from 'react';\n\ninterface CodeProps {\n  children: any;\n  className?: string;\n  language?: Language;\n}\n\nconst theme = {\n  plain: {\n    color: '#EDEDEF',\n    fontSize: 13,\n    fontFamily: 'MonoLisa, Menlo, monospace',\n  },\n  styles: [\n    {\n      types: ['comment'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['atrule', 'keyword', 'attr-name', 'selector'],\n      style: {\n        color: '#7E7D86',\n      },\n    },\n    {\n      types: ['punctuation', 'operator'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['class-name', 'function', 'tag', 'key-white'],\n      style: {\n        color: '#EDEDEF',\n      },\n    },\n  ],\n};\n\nexport const Code: React.FC<Readonly<CodeProps>> = ({\n  children,\n  language = 'html',\n}) => {\n  const [isCopied, setIsCopied] = React.useState(false);\n  const value = children.trim();\n\n  const file = new File([value], `email.${language}`);\n  const url = URL.createObjectURL(file);\n\n  return (\n    <Highlight\n      {...defaultProps}\n      theme={theme}\n      code={value}\n      language={language as Language}\n    >\n      {({ tokens, getLineProps, getTokenProps }) => (\n        <>\n          <div\n            className=\"absolute right-0 top-0 h-px w-[200px]\"\n            style={{\n              background:\n                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',\n            }}\n          />\n          <div className=\"p-4\">\n            {tokens.map((line, i) => {\n              return (\n                <div\n                  key={i}\n                  {...getLineProps({ line, key: i })}\n                  className={classnames('whitespace-pre', {\n                    \"before:text-slate-11 before:mr-2 before:content-['$']\":\n                      language === 'bash' && tokens && tokens.length === 1,\n                  })}\n                >\n                  {line.map((token, key) => {\n                    const isException =\n                      token.content === 'from' &&\n                      line[key + 1]?.content === ':';\n                    const newTypes = isException\n                      ? [...token.types, 'key-white']\n                      : token.types;\n                    token.types = newTypes;\n\n                    return (\n                      <React.Fragment key={key}>\n                        <span {...getTokenProps({ token, key })} />\n                      </React.Fragment>\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n          <div\n            className=\"absolute left-0 bottom-0 h-px w-[200px]\"\n            style={{\n              background:\n                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',\n            }}\n          />\n        </>\n      )}\n    </Highlight>\n  );\n};\n",
     },
     {
         title: 'heading.tsx',
@@ -48,11 +52,11 @@ exports.components = [
     },
     {
         title: 'send.tsx',
-        content: 'import { inter } from \'../pages/_app\';\nimport { Button } from \'./button\';\nimport * as Popover from \'@radix-ui/react-popover\';\nimport * as React from \'react\';\n\nexport const Send = ({ markup }: { markup: string }) => {\n  const [to, setTo] = React.useState(\'\');\n  const [subject, setSubject] = React.useState(\'Testing React Email\');\n  const [isSending, setIsSending] = React.useState(false);\n\n  const onFormSubmit = async (e: React.FormEvent) => {\n    try {\n      e.preventDefault();\n      setIsSending(true);\n\n      const response = await fetch(\'https://react.email/api/send/test\', {\n        method: \'POST\',\n        headers: { \'Content-Type\': \'application/json\' },\n        body: JSON.stringify({\n          to,\n          subject,\n          html: markup,\n        }),\n      });\n\n      if (response.status === 429) {\n        const { error } = await response.json();\n        alert(error);\n      }\n    } catch (e) {\n      alert(\'Something went wrong. Please try again.\');\n    } finally {\n      setIsSending(false);\n    }\n  };\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <button className="box-border outline-none self-center w-20 h-5 flex items-center justify-center rounded-lg text-center transition duration-300 ease-in-out border border-slate-6 text-slate-11 text-sm px-4 py-4 hover:border-slate-12 hover:text-slate-12 font-sans">\n          Send\n        </button>\n      </Popover.Trigger>\n      <Popover.Anchor />\n      <Popover.Portal>\n        <Popover.Content\n          align="end"\n          className={`w-80 -mt-10 p-3 bg-black border border-slate-6 text-slate-11 rounded-lg font-sans ${inter.variable}`}\n        >\n          <Popover.Close\n            aria-label="Close"\n            className="absolute right-2 flex items-center justify-center w-6 h-6 text-xs text-slate-11 hover:text-slate-12 transition duration-300 ease-in-out rounded-full"\n          >\n            ✕\n          </Popover.Close>\n          <form onSubmit={onFormSubmit} className="mt-1">\n            <label\n              htmlFor="to"\n              className="text-slate-10 text-xs uppercase mb-2 block"\n            >\n              Recipient\n            </label>\n            <input\n              autoFocus={true}\n              className="appearance-none rounded-lg px-2 py-1 mb-3 outline-none w-full bg-slate-3 border placeholder-slate-8 border-slate-6 text-slate-12 text-sm focus:ring-1 focus:ring-slate-12 transition duration-300 ease-in-out"\n              onChange={(e) => setTo(e.target.value)}\n              defaultValue={to}\n              placeholder="you@example.com"\n              type="email"\n              id="to"\n              required\n            />\n            <label\n              htmlFor="subject"\n              className="text-slate-10 text-xs uppercase mb-2 block"\n            >\n              Subject\n            </label>\n            <input\n              className="appearance-none rounded-lg px-2 py-1 mb-3 outline-none w-full bg-slate-3 border placeholder-slate-8 border-slate-6 text-slate-12 text-sm focus:ring-1 focus:ring-slate-12 transition duration-300 ease-in-out"\n              onChange={(e) => setSubject(e.target.value)}\n              defaultValue={subject}\n              placeholder="My Email"\n              type="text"\n              id="subject"\n              required\n            />\n            <input\n              type="checkbox"\n              className="appearance-none checked:bg-blue-500"\n            />\n            <div className="flex items-center justify-end">\n              <Button\n                type="submit"\n                disabled={subject.length === 0 || to.length === 0 || isSending}\n                className="disabled:bg-slate-11 disabled:border-transparent"\n              >\n                Send\n              </Button>\n            </div>\n          </form>\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n',
+        content: 'import { inter } from \'../pages/_app\';\nimport { Button } from \'./button\';\nimport { Text } from \'./text\';\nimport * as Popover from \'@radix-ui/react-popover\';\nimport * as React from \'react\';\n\nexport const Send = ({ markup }: { markup: string }) => {\n  const [to, setTo] = React.useState(\'\');\n  const [subject, setSubject] = React.useState(\'Testing React Email\');\n  const [isSending, setIsSending] = React.useState(false);\n\n  const onFormSubmit = async (e: React.FormEvent) => {\n    try {\n      e.preventDefault();\n      setIsSending(true);\n\n      const response = await fetch(\'https://react.email/api/send/test\', {\n        method: \'POST\',\n        headers: { \'Content-Type\': \'application/json\' },\n        body: JSON.stringify({\n          to,\n          subject,\n          html: markup,\n        }),\n      });\n\n      if (response.status === 429) {\n        const { error } = await response.json();\n        alert(error);\n      }\n    } catch (e) {\n      alert(\'Something went wrong. Please try again.\');\n    } finally {\n      setIsSending(false);\n    }\n  };\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <button className="box-border outline-none self-center w-20 h-5 flex items-center justify-center rounded-lg text-center transition duration-300 ease-in-out border border-slate-6 text-slate-11 text-sm px-4 py-4 hover:border-slate-12 hover:text-slate-12 font-sans">\n          Send\n        </button>\n      </Popover.Trigger>\n      <Popover.Anchor />\n      <Popover.Portal>\n        <Popover.Content\n          align="end"\n          className={`w-80 -mt-10 p-3 bg-black border border-slate-6 text-slate-11 rounded-lg font-sans ${inter.variable}`}\n        >\n          <Popover.Close\n            aria-label="Close"\n            className="absolute right-2 flex items-center justify-center w-6 h-6 text-xs text-slate-11 hover:text-slate-12 transition duration-300 ease-in-out rounded-full"\n          >\n            ✕\n          </Popover.Close>\n          <form onSubmit={onFormSubmit} className="mt-1">\n            <label\n              htmlFor="to"\n              className="text-slate-10 text-xs uppercase mb-2 block"\n            >\n              Recipient\n            </label>\n            <input\n              autoFocus={true}\n              className="appearance-none rounded-lg px-2 py-1 mb-3 outline-none w-full bg-slate-3 border placeholder-slate-8 border-slate-6 text-slate-12 text-sm focus:ring-1 focus:ring-slate-12 transition duration-300 ease-in-out"\n              onChange={(e) => setTo(e.target.value)}\n              defaultValue={to}\n              placeholder="you@example.com"\n              type="email"\n              id="to"\n              required\n            />\n            <label\n              htmlFor="subject"\n              className="text-slate-10 text-xs uppercase mb-2 block"\n            >\n              Subject\n            </label>\n            <input\n              className="appearance-none rounded-lg px-2 py-1 mb-3 outline-none w-full bg-slate-3 border placeholder-slate-8 border-slate-6 text-slate-12 text-sm focus:ring-1 focus:ring-slate-12 transition duration-300 ease-in-out"\n              onChange={(e) => setSubject(e.target.value)}\n              defaultValue={subject}\n              placeholder="My Email"\n              type="text"\n              id="subject"\n              required\n            />\n            <input\n              type="checkbox"\n              className="appearance-none checked:bg-blue-500"\n            />\n            <div className="flex items-center justify-between">\n              <Text className="inline-block" size="1">\n                Powered by{\' \'}\n                <a\n                  className="hover:text-slate-12 transition ease-in-out duration-300"\n                  href="https://resend.com"\n                  target="_blank"\n                  rel="noreferrer"\n                >\n                  Resend\n                </a>\n              </Text>\n              <Button\n                type="submit"\n                disabled={subject.length === 0 || to.length === 0 || isSending}\n                className="disabled:bg-slate-11 disabled:border-transparent"\n              >\n                Send\n              </Button>\n            </div>\n          </form>\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n',
     },
     {
         title: 'sidebar.tsx',
-        content: 'import { Logo } from \'./logo\';\nimport * as React from \'react\';\nimport classnames from \'classnames\';\nimport Link from \'next/link\';\nimport { Heading } from \'./heading\';\nimport { useRouter } from \'next/router\';\nimport * as Collapsible from \'@radix-ui/react-collapsible\';\n\ntype SidebarElement = React.ElementRef<\'aside\'>;\ntype RootProps = React.ComponentPropsWithoutRef<\'aside\'>;\n\ninterface SidebarProps extends RootProps {\n  navItems: string[];\n}\n\nexport const Sidebar = React.forwardRef<SidebarElement, Readonly<SidebarProps>>(\n  ({ className, navItems, ...props }, forwardedRef) => {\n    const { query } = useRouter();\n\n    return (\n      <aside\n        ref={forwardedRef}\n        className="px-6 min-w-[275px] max-w-[275px] flex flex-col gap-4 border-r border-slate-6"\n        {...props}\n      >\n        <div className="h-[70px] flex items-center">\n          <Logo />\n        </div>\n\n        <nav className="flex flex-col gap-4">\n          <Collapsible.Root defaultOpen>\n            <Collapsible.Trigger\n              className={classnames(\'flex items-center gap-1\', {\n                \'cursor-default\': navItems && navItems.length === 0,\n              })}\n            >\n              <svg\n                className="text-slate-11"\n                width="24"\n                height="24"\n                viewBox="0 0 24 24"\n                fill="none"\n                xmlns="http://www.w3.org/2000/svg"\n              >\n                <path\n                  d="M19.25 17.25V9.75C19.25 8.64543 18.3546 7.75 17.25 7.75H4.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25Z"\n                  stroke="currentColor"\n                  strokeWidth="1.5"\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                />\n                <path\n                  d="M13.5 7.5L12.5685 5.7923C12.2181 5.14977 11.5446 4.75 10.8127 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V11"\n                  stroke="currentColor"\n                  strokeWidth="1.5"\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                />\n              </svg>\n\n              <div className="flex items-center">\n                <Heading as="h3" color="white" size="2" weight="medium">\n                  All emails\n                </Heading>\n                {navItems && navItems.length > 0 && (\n                  <svg\n                    className="text-slate-11"\n                    width="24"\n                    height="24"\n                    viewBox="0 0 24 24"\n                    fill="none"\n                    xmlns="http://www.w3.org/2000/svg"\n                  >\n                    <path\n                      d="M12 15L8.5359 9.75L15.4641 9.75L12 15Z"\n                      fill="currentColor"\n                    />\n                  </svg>\n                )}\n              </div>\n            </Collapsible.Trigger>\n\n            {navItems && navItems.length > 0 && (\n              <Collapsible.Content className="relative mt-3">\n                <div className="absolute left-2.5  w-px h-full bg-slate-6" />\n\n                <div className="py-2 flex flex-col gap-1.5 truncate">\n                  {navItems &&\n                    navItems.map((item) => (\n                      <Link key={item} href={`/preview/${item}`}>\n                        <span\n                          className={classnames(\n                            \'text-[14px] flex items-center font-medium gap-2 h-8 w-full pl-4 rounded-md text-slate-11\',\n                            {\n                              \'bg-cyan-3 text-cyan-11\': query.slug === item,\n                              \'hover:text-slate-12\': query.slug !== item,\n                            },\n                          )}\n                        >\n                          {query.slug === item && (\n                            <div className="h-5 bg-cyan-11 w-px absolute left-2.5" />\n                          )}\n                          <svg\n                            width="24"\n                            height="24"\n                            viewBox="0 0 24 24"\n                            fill="none"\n                            xmlns="http://www.w3.org/2000/svg"\n                          >\n                            <path\n                              d="M7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V9L14 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25Z"\n                              stroke="currentColor"\n                              strokeOpacity="0.927"\n                              strokeWidth="1.5"\n                              strokeLinecap="round"\n                              strokeLinejoin="round"\n                            />\n                            <path\n                              d="M18 9.25H13.75V5"\n                              stroke="currentColor"\n                              strokeOpacity="0.927"\n                              strokeWidth="1.5"\n                              strokeLinecap="round"\n                              strokeLinejoin="round"\n                            />\n                          </svg>\n                          {item}\n                        </span>\n                      </Link>\n                    ))}\n                </div>\n              </Collapsible.Content>\n            )}\n          </Collapsible.Root>\n        </nav>\n      </aside>\n    );\n  },\n);\n\nSidebar.displayName = \'Sidebar\';\n',
+        content: 'import { Logo } from \'./logo\';\nimport * as React from \'react\';\nimport classnames from \'classnames\';\nimport Link from \'next/link\';\nimport { Heading } from \'./heading\';\nimport { useRouter } from \'next/router\';\nimport * as Collapsible from \'@radix-ui/react-collapsible\';\n\ntype SidebarElement = React.ElementRef<\'aside\'>;\ntype RootProps = React.ComponentPropsWithoutRef<\'aside\'>;\n\ninterface SidebarProps extends RootProps {\n  navItems: string[];\n}\n\nexport const Sidebar = React.forwardRef<SidebarElement, Readonly<SidebarProps>>(\n  ({ className, navItems, ...props }, forwardedRef) => {\n    const { query } = useRouter();\n\n    return (\n      <aside\n        ref={forwardedRef}\n        className="px-6 min-w-[275px] max-w-[275px] flex flex-col gap-4 border-r border-slate-6"\n        {...props}\n      >\n        <div className="h-[70px] flex items-center">\n          <Logo />\n        </div>\n\n        <nav className="flex flex-col gap-4">\n          <Collapsible.Root defaultOpen>\n            <Collapsible.Trigger\n              className={classnames(\'flex items-center gap-1\', {\n                \'cursor-default\': navItems && navItems.length === 0,\n              })}\n            >\n              <svg\n                className="text-slate-11"\n                width="24"\n                height="24"\n                viewBox="0 0 24 24"\n                fill="none"\n                xmlns="http://www.w3.org/2000/svg"\n              >\n                <path\n                  d="M19.25 17.25V9.75C19.25 8.64543 18.3546 7.75 17.25 7.75H4.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25Z"\n                  stroke="currentColor"\n                  strokeWidth="1.5"\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                />\n                <path\n                  d="M13.5 7.5L12.5685 5.7923C12.2181 5.14977 11.5446 4.75 10.8127 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V11"\n                  stroke="currentColor"\n                  strokeWidth="1.5"\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                />\n              </svg>\n\n              <div className="flex items-center">\n                <Heading as="h3" color="white" size="2" weight="medium">\n                  All emails\n                </Heading>\n                {navItems && navItems.length > 0 && (\n                  <svg\n                    className="text-slate-11"\n                    width="24"\n                    height="24"\n                    viewBox="0 0 24 24"\n                    fill="none"\n                    xmlns="http://www.w3.org/2000/svg"\n                  >\n                    <path\n                      d="M12 15L8.5359 9.75L15.4641 9.75L12 15Z"\n                      fill="currentColor"\n                    />\n                  </svg>\n                )}\n              </div>\n            </Collapsible.Trigger>\n\n            {navItems && navItems.length > 0 && (\n              <Collapsible.Content className="relative mt-3">\n                <div className="absolute left-2.5  w-px h-full bg-slate-6" />\n\n                <div className="py-2 flex flex-col gap-1.5 truncate">\n                  {navItems &&\n                    navItems.map((item) => (\n                      <Link key={item} href={`/preview/${item}`}>\n                        <span\n                          className={classnames(\n                            \'text-[14px] flex items-center font-medium gap-2 h-8 w-full pl-4 rounded-md text-slate-11\',\n                            {\n                              \'bg-cyan-3 text-cyan-11\': query.slug === item,\n                              \'hover:text-slate-12\': query.slug !== item,\n                            },\n                          )}\n                        >\n                          {query.slug === item && (\n                            <div className="h-5 bg-cyan-11 w-px absolute left-2.5" />\n                          )}\n                          <svg\n                            className="flex-shrink-0"\n                            width="24"\n                            height="24"\n                            viewBox="0 0 24 24"\n                            fill="none"\n                            xmlns="http://www.w3.org/2000/svg"\n                          >\n                            <path\n                              d="M7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V9L14 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25Z"\n                              stroke="currentColor"\n                              strokeOpacity="0.927"\n                              strokeWidth="1.5"\n                              strokeLinecap="round"\n                              strokeLinejoin="round"\n                            />\n                            <path\n                              d="M18 9.25H13.75V5"\n                              stroke="currentColor"\n                              strokeOpacity="0.927"\n                              strokeWidth="1.5"\n                              strokeLinecap="round"\n                              strokeLinejoin="round"\n                            />\n                          </svg>\n                          {item}\n                        </span>\n                      </Link>\n                    ))}\n                </div>\n              </Collapsible.Content>\n            )}\n          </Collapsible.Root>\n        </nav>\n      </aside>\n    );\n  },\n);\n\nSidebar.displayName = \'Sidebar\';\n',
     },
     {
         title: 'text.tsx',

package/dist/_preview/pages.js

@@ -17,6 +17,6 @@ exports.pages = [
     {
         dir: 'preview',
         title: '[slug].tsx',
-        content: "import * as React from 'react';\nimport { promises as fs } from 'fs';\nimport path from 'path';\nimport { render } from '@react-email/render';\nimport { GetStaticPaths } from 'next';\nimport { Layout } from '../../components/layout';\nimport { Code } from '../../components';\nimport Head from 'next/head';\nimport { useRouter } from 'next/router';\n\ninterface PreviewProps {}\n\nexport const CONTENT_DIR = 'emails';\n\nconst getEmails = async () => {\n  const emailsDirectory = path.join(process.cwd(), CONTENT_DIR);\n  const filenames = await fs.readdir(emailsDirectory);\n  const emails = filenames\n    .map((file) => file.replace(/\\.(jsx|tsx)$/g, ''))\n    .filter((file) => file !== 'components');\n  return { emails, filenames };\n};\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n  const { emails } = await getEmails();\n  const paths = emails.map((email) => {\n    return { params: { slug: email } };\n  });\n  return { paths, fallback: true };\n};\n\nexport async function getStaticProps({ params }) {\n  try {\n    const { emails, filenames } = await getEmails();\n    const template = filenames.filter((email) => {\n      const [fileName] = email.split('.');\n      return params.slug === fileName;\n    });\n\n    const Email = (await import(`../../../emails/${params.slug}`)).default;\n    const markup = render(<Email />, { pretty: true });\n    const path = `${process.cwd()}/${CONTENT_DIR}/${template[0]}`;\n    const reactMarkup = await fs.readFile(path, {\n      encoding: 'utf-8',\n    });\n\n    return emails\n      ? { props: { navItems: emails, slug: params.slug, markup, reactMarkup } }\n      : { notFound: true };\n  } catch (error) {\n    console.error(error);\n    return { notFound: true };\n  }\n}\n\nconst Preview: React.FC<Readonly<PreviewProps>> = ({\n  navItems,\n  markup,\n  reactMarkup,\n  slug,\n}: any) => {\n  const title = `${slug} — React Email`;\n  const router = useRouter();\n  const [viewMode, setViewMode] = React.useState('desktop');\n\n  const handleViewMode = (mode: string) => {\n    setViewMode(mode);\n\n    router.push({\n      pathname: router.pathname,\n      query: {\n        ...router.query,\n        view: mode,\n      },\n    });\n  };\n\n  React.useEffect(() => {\n    if (router.query.view === 'source' || router.query.view === 'desktop') {\n      setViewMode(router.query.view);\n    }\n  }, [router.query.view]);\n\n  return (\n    <Layout\n      navItems={navItems}\n      title={slug}\n      viewMode={viewMode}\n      setViewMode={handleViewMode}\n      markup={markup}\n    >\n      <Head>\n        <title>{title}</title>\n      </Head>\n      {viewMode === 'desktop' ? (\n        <iframe\n          srcDoc={markup}\n          frameBorder=\"0\"\n          className=\"w-full h-[calc(100vh_-_70px)]\"\n        />\n      ) : (\n        <div className=\"flex gap-6 mx-auto p-6\">\n          <Code language=\"jsx\">{reactMarkup}</Code>\n          <Code>{markup}</Code>\n        </div>\n      )}\n    </Layout>\n  );\n};\n\nexport default Preview;\n",
+        content: "import * as React from 'react';\nimport { promises as fs } from 'fs';\nimport path from 'path';\nimport { render } from '@react-email/render';\nimport { GetStaticPaths } from 'next';\nimport { Layout } from '../../components/layout';\nimport { CodeContainer } from '../../components/code-container';\nimport { Code } from '../../components';\nimport Head from 'next/head';\nimport { useRouter } from 'next/router';\n\ninterface PreviewProps {\n  navItems: string;\n  markup: string;\n  reactMarkup: string;\n  slug: string;\n}\n\nexport const CONTENT_DIR = 'emails';\n\nconst getEmails = async () => {\n  const emailsDirectory = path.join(process.cwd(), CONTENT_DIR);\n  const filenames = await fs.readdir(emailsDirectory);\n  const emails = filenames\n    .map((file) => file.replace(/\\.(jsx|tsx)$/g, ''))\n    .filter((file) => file !== 'components');\n  return { emails, filenames };\n};\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n  const { emails } = await getEmails();\n  const paths = emails.map((email) => {\n    return { params: { slug: email } };\n  });\n  return { paths, fallback: true };\n};\n\nexport async function getStaticProps({ params }) {\n  try {\n    const { emails, filenames } = await getEmails();\n    const template = filenames.filter((email) => {\n      const [fileName] = email.split('.');\n      return params.slug === fileName;\n    });\n\n    const Email = (await import(`../../../emails/${params.slug}`)).default;\n    const markup = render(<Email />, { pretty: true });\n    const path = `${process.cwd()}/${CONTENT_DIR}/${template[0]}`;\n    const reactMarkup = await fs.readFile(path, {\n      encoding: 'utf-8',\n    });\n\n    return emails\n      ? { props: { navItems: emails, slug: params.slug, markup, reactMarkup } }\n      : { notFound: true };\n  } catch (error) {\n    console.error(error);\n    return { notFound: true };\n  }\n}\n\nconst Preview: React.FC<Readonly<PreviewProps>> = ({\n  navItems,\n  markup,\n  reactMarkup,\n  slug,\n}: any) => {\n  const title = `${slug} — React Email`;\n  const router = useRouter();\n  const [viewMode, setViewMode] = React.useState('desktop');\n\n  const handleViewMode = (mode: string) => {\n    setViewMode(mode);\n\n    router.push({\n      pathname: router.pathname,\n      query: {\n        ...router.query,\n        view: mode,\n      },\n    });\n  };\n\n  React.useEffect(() => {\n    if (router.query.view === 'source' || router.query.view === 'desktop') {\n      setViewMode(router.query.view);\n    }\n  }, [router.query.view]);\n\n  return (\n    <Layout\n      navItems={navItems}\n      title={slug}\n      viewMode={viewMode}\n      setViewMode={handleViewMode}\n      markup={markup}\n    >\n      <Head>\n        <title>{title}</title>\n      </Head>\n      {viewMode === 'desktop' ? (\n        <iframe\n          srcDoc={markup}\n          frameBorder=\"0\"\n          className=\"w-full h-[calc(100vh_-_70px)]\"\n        />\n      ) : (\n        <div className=\"flex gap-6 mx-auto p-6\">\n          <CodeContainer\n            markups={[\n              { language: 'jsx', content: reactMarkup },\n              { language: 'markup', content: markup },\n            ]}\n          />\n        </div>\n      )}\n    </Layout>\n  );\n};\n\nexport default Preview;\n",
     },
 ];

package/dist/_preview/root.js

@@ -6,9 +6,13 @@ exports.root = [
         title: 'next-env.d.ts',
         content: '/// <reference types="next" />\n/// <reference types="next/image-types/global" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n',
     },
+    {
+        title: 'next.config.js',
+        content: "/**\n * @type {import('next').NextConfig}\n */\nconst nextConfig = {\n  reactStrictMode: true,\n  swcMinify: true,\n};\n\nmodule.exports = nextConfig;\n",
+    },
     {
         title: 'package.json',
-        content: '{\n  "name": "react-email-preview",\n  "version": "0.0.5",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "engines": {\n    "node": ">=18.0.0"\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-popover": "^1.0.2",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@radix-ui/react-tooltip": "^1.0.2",\n    "@react-email/render": "0.0.2",\n    "classnames": "2.3.2",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
+        content: '{\n  "name": "react-email-preview",\n  "version": "0.0.7",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "engines": {\n    "node": ">=18.0.0"\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-popover": "1.0.2",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@radix-ui/react-tooltip": "1.0.2",\n    "@react-email/render": "0.0.2",\n    "classnames": "2.3.2",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
     },
     {
         title: 'postcss.config.js',

package/dist/_preview/utils.js

@@ -14,6 +14,10 @@ exports.utils = [
         title: 'index.ts',
         content: "export * from './as';\nexport * from './unreachable';\nexport * from './copy-text-to-clipboard';\n",
     },
+    {
+        title: 'language-map.ts',
+        content: "const languageMap = {\n  jsx: 'React',\n  markup: 'HTML',\n};\n\nexport default languageMap;\n",
+    },
     {
         title: 'unreachable.ts',
         content: "export const unreachable = (\n  condition: never,\n  message = `Entered unreachable code. Received '${condition}'.`,\n): never => {\n  throw new TypeError(message);\n};\n",

package/dist/commands/dev.js

@@ -90,12 +90,12 @@ const createAppFiles = async () => {
                 return fs_1.default.promises.writeFile(location, file.content);
             });
         };
-        const pageCreation = pages_1.pages.map((page) => {
+        const pageCreation = pages_1.pages.map(async (page) => {
             const location = page.dir
                 ? `${utils_1.SRC_PATH}/pages/${page.dir}/${page.title}`
                 : `${utils_1.SRC_PATH}/pages/${page.title}`;
             if (page.dir) {
-                (0, utils_1.createDirectory)(`${utils_1.SRC_PATH}/pages/${page.dir}`);
+                await (0, utils_1.createDirectory)(`${utils_1.SRC_PATH}/pages/${page.dir}`);
             }
             return fs_1.default.promises.writeFile(location, page.content);
         });

package/dist/commands/export.d.ts

@@ -0,0 +1,2 @@
+import { Options } from '@react-email/render';
+export declare const exportTemplates: (outDir: string, options: Options) => Promise<never>;

package/dist/commands/export.js

@@ -0,0 +1,80 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exportTemplates = void 0;
+const glob_1 = require("glob");
+const esbuild_1 = __importDefault(require("esbuild"));
+const tree_node_cli_1 = __importDefault(require("tree-node-cli"));
+const ora_1 = __importDefault(require("ora"));
+const log_symbols_1 = __importDefault(require("log-symbols"));
+const render_1 = require("@react-email/render");
+const fs_1 = require("fs");
+const cpy_1 = __importDefault(require("cpy"));
+const normalize_path_1 = __importDefault(require("normalize-path"));
+const utils_1 = require("../utils");
+/*
+  This first builds all the templates using esbuild and then puts the output in the `.js`
+  files. Then these `.js` files are imported dynamically and rendered to `.html` files
+  using the `render` function.
+ */
+const exportTemplates = async (outDir, options) => {
+    const spinner = (0, ora_1.default)('Preparing files...\n').start();
+    const allTemplates = glob_1.glob.sync((0, normalize_path_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/*.{tsx,jsx}`));
+    esbuild_1.default.buildSync({
+        bundle: true,
+        entryPoints: allTemplates,
+        platform: 'node',
+        write: true,
+        outdir: outDir,
+    });
+    const allBuiltTemplates = glob_1.glob.sync((0, normalize_path_1.default)(`${outDir}/*.js`), {
+        absolute: true,
+    });
+    for (const template of allBuiltTemplates) {
+        const component = await Promise.resolve().then(() => __importStar(require(template)));
+        const rendered = (0, render_1.render)(component.default(), options);
+        const htmlPath = template.replace('.js', options.plainText ? '.txt' : '.html');
+        (0, fs_1.writeFileSync)(htmlPath, rendered);
+        (0, fs_1.unlinkSync)(template);
+    }
+    const hasStaticDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.CLIENT_EMAILS_PATH}/static`);
+    if (hasStaticDirectory) {
+        await (0, cpy_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/static`, `${outDir}/static`);
+    }
+    const fileTree = (0, tree_node_cli_1.default)(outDir, {
+        allFiles: true,
+        maxDepth: 4,
+    });
+    console.log(fileTree);
+    spinner.stopAndPersist({
+        symbol: log_symbols_1.default.success,
+        text: 'Successfully exported emails',
+    });
+    process.exit();
+};
+exports.exportTemplates = exportTemplates;

package/dist/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const extra_typings_1 = require("@commander-js/extra-typings");
 const constants_1 = require("./utils/constants");
 const dev_1 = require("./commands/dev");
-const exportTemplates_1 = require("./commands/exportTemplates");
+const export_1 = require("./commands/export");
 extra_typings_1.program
     .name(constants_1.PACKAGE_NAME)
     .description('A live preview of your emails right in your browser')
@@ -18,5 +18,6 @@ extra_typings_1.program
     .description('Build the templates to the `out` directory')
     .option('--outDir <path>', 'Output directory', 'out')
     .option('-p, --pretty', 'Pretty print the output', false)
-    .action(({ outDir, pretty }) => (0, exportTemplates_1.exportTemplates)(outDir, pretty));
+    .option('-t, --plainText', 'Set output format as plain Text', false)
+    .action(({ outDir, pretty, plainText }) => (0, export_1.exportTemplates)(outDir, { pretty, plainText }));
 extra_typings_1.program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/index.js"
@@ -18,7 +18,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/zenorocha/react-email.git",
+    "url": "https://github.com/resendlabs/react-email.git",
     "directory": "packages/react-email"
   },
   "keywords": [
@@ -26,11 +26,11 @@
     "email"
   ],
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=16.0.0"
   },
   "dependencies": {
     "@commander-js/extra-typings": "9.4.1",
-    "@react-email/render": "0.0.3",
+    "@react-email/render": "0.0.4",
     "chokidar": "3.5.3",
     "commander": "9.4.1",
     "cpy": "8.1.2",

package/preview/next.config.js

@@ -0,0 +1,9 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+};
+
+module.exports = nextConfig;

package/preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email-preview",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "The React Email preview application",
   "license": "MIT",
   "scripts": {

package/preview/src/components/code-container.tsx

@@ -0,0 +1,114 @@
+import { Language } from 'prism-react-renderer';
+import { IconButton } from './icon-button';
+import { IconClipboard } from './icon-clipboard';
+import { IconDownload } from './icon-download';
+import { IconCheck } from './icon-check';
+import { copyTextToClipboard } from '../utils';
+import languageMap from '../utils/language-map';
+import { Tooltip } from './tooltip';
+import { Code } from './code';
+import * as React from 'react';
+
+interface CodeContainerProps {
+  markups: MarkupProps[];
+}
+
+interface MarkupProps {
+  language: Language;
+  content: string;
+}
+
+export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
+  markups,
+}) => {
+  const [isCopied, setIsCopied] = React.useState(false);
+  const [activeTab, setActiveTab] = React.useState(markups[0].language);
+  let file = null;
+  let url = null;
+
+  const renderDownloadIcon = () => {
+    let value = markups.filter((markup) => markup.language === activeTab);
+    file = new File([value[0].content], `email.${value[0].language}`);
+    url = URL.createObjectURL(file);
+
+    return (
+      <a href={url} download={file.name}>
+        <IconDownload />
+      </a>
+    );
+  };
+
+  const renderClipboardIcon = () => {
+    const handleClipboard = async () => {
+      const activeContent = markups.filter(({ language }) => {
+        return activeTab === language;
+      });
+      setIsCopied(true);
+      await copyTextToClipboard(activeContent[0].content);
+      setTimeout(() => setIsCopied(false), 3000);
+    };
+
+    return (
+      <IconButton onClick={handleClipboard}>
+        {isCopied ? <IconCheck /> : <IconClipboard />}
+      </IconButton>
+    );
+  };
+
+  React.useEffect(() => {
+    setIsCopied(false);
+  }, [activeTab]);
+
+  return (
+    <pre
+      className={
+        'border-slate-6 relative w-full items-center overflow-auto whitespace-pre rounded-md border text-sm backdrop-blur-md'
+      }
+      style={{
+        lineHeight: '130%',
+        background:
+          'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',
+        boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',
+      }}
+    >
+      <div className="h-9 border-b border-slate-6">
+        <div className="py-[10px] px-4 text-xs flex gap-8">
+          {markups.map(({ language }) => {
+            return (
+              <div key={language}>
+                <button
+                  className={`${activeTab !== language && 'opacity-25'}`}
+                  onClick={() => setActiveTab(language)}
+                >
+                  {languageMap[language]}
+                </button>
+              </div>
+            );
+          })}
+        </div>
+        <Tooltip>
+          <Tooltip.Trigger className="absolute top-2 right-2 hidden md:block">
+            {renderClipboardIcon()}
+          </Tooltip.Trigger>
+          <Tooltip.Content>Copy to Clipboard</Tooltip.Content>
+        </Tooltip>
+        <Tooltip>
+          <Tooltip.Trigger className="text-gray-11 absolute top-2 right-8 hidden md:block">
+            {renderDownloadIcon()}
+          </Tooltip.Trigger>
+          <Tooltip.Content>Download</Tooltip.Content>
+        </Tooltip>
+      </div>
+      {markups.map(({ language, content }) => {
+        return (
+          <div
+            className={`${activeTab !== language && 'hidden'}`}
+            key={language}
+          >
+            <Code language={language}>{content}</Code>
+          </div>
+        );
+      })}
+    </pre>
+  );
+};

package/preview/src/components/code.tsx

@@ -1,11 +1,5 @@
 import classnames from 'classnames';
 import Highlight, { defaultProps, Language } from 'prism-react-renderer';
-import { IconButton } from './icon-button';
-import { IconClipboard } from './icon-clipboard';
-import { IconDownload } from './icon-download';
-import { IconCheck } from './icon-check';
-import { copyTextToClipboard } from '../utils';
-import { Tooltip } from './tooltip';
 import * as React from 'react';
 
 interface CodeProps {
@@ -50,9 +44,7 @@ const theme = {
 
 export const Code: React.FC<Readonly<CodeProps>> = ({
   children,
-  className,
   language = 'html',
-  ...props
 }) => {
   const [isCopied, setIsCopied] = React.useState(false);
   const value = children.trim();
@@ -68,47 +60,7 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
       language={language as Language}
     >
       {({ tokens, getLineProps, getTokenProps }) => (
-        <pre
-          className={classnames(
-            'border-slate-6 relative w-full items-center overflow-auto whitespace-pre rounded-md border text-sm backdrop-blur-md',
-            className,
-          )}
-          style={{
-            lineHeight: '130%',
-            background:
-              'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',
-            boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',
-          }}
-        >
-          <div className="h-9 border-b border-slate-6">
-            <div className="py-[10px] px-4 text-xs">
-              {language === 'jsx' ? 'React' : 'HTML'}
-            </div>
-            <Tooltip>
-              <Tooltip.Trigger className="absolute top-2 right-2 hidden md:block">
-                <IconButton
-                  onClick={async () => {
-                    setIsCopied(true);
-                    await copyTextToClipboard(value);
-                    setTimeout(() => setIsCopied(false), 3000);
-                  }}
-                >
-                  {isCopied ? <IconCheck /> : <IconClipboard />}
-                </IconButton>
-              </Tooltip.Trigger>
-              <Tooltip.Content>Copy to Clipboard</Tooltip.Content>
-            </Tooltip>
-
-            <Tooltip>
-              <Tooltip.Trigger className="text-gray-11 absolute top-2 right-8 hidden md:block">
-                <a href={url} download={file.name}>
-                  <IconDownload />
-                </a>
-              </Tooltip.Trigger>
-              <Tooltip.Content>Download</Tooltip.Content>
-            </Tooltip>
-          </div>
-
+        <>
           <div
             className="absolute right-0 top-0 h-px w-[200px]"
             style={{
@@ -153,7 +105,7 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
                 'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
             }}
           />
-        </pre>
+        </>
       )}
     </Highlight>
   );

package/preview/src/components/send.tsx

@@ -1,5 +1,6 @@
 import { inter } from '../pages/_app';
 import { Button } from './button';
+import { Text } from './text';
 import * as Popover from '@radix-ui/react-popover';
 import * as React from 'react';
 
@@ -89,7 +90,18 @@ export const Send = ({ markup }: { markup: string }) => {
               type="checkbox"
               className="appearance-none checked:bg-blue-500"
             />
-            <div className="flex items-center justify-end">
+            <div className="flex items-center justify-between">
+              <Text className="inline-block" size="1">
+                Powered by{' '}
+                <a
+                  className="hover:text-slate-12 transition ease-in-out duration-300"
+                  href="https://resend.com"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Resend
+                </a>
+              </Text>
               <Button
                 type="submit"
                 disabled={subject.length === 0 || to.length === 0 || isSending}

package/preview/src/pages/preview/[slug].tsx

@@ -4,11 +4,17 @@ import path from 'path';
 import { render } from '@react-email/render';
 import { GetStaticPaths } from 'next';
 import { Layout } from '../../components/layout';
+import { CodeContainer } from '../../components/code-container';
 import { Code } from '../../components';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 
-interface PreviewProps {}
+interface PreviewProps {
+  navItems: string;
+  markup: string;
+  reactMarkup: string;
+  slug: string;
+}
 
 export const CONTENT_DIR = 'emails';
 
@@ -100,8 +106,12 @@ const Preview: React.FC<Readonly<PreviewProps>> = ({
         />
       ) : (
         <div className="flex gap-6 mx-auto p-6">
-          <Code language="jsx">{reactMarkup}</Code>
-          <Code>{markup}</Code>
+          <CodeContainer
+            markups={[
+              { language: 'jsx', content: reactMarkup },
+              { language: 'markup', content: markup },
+            ]}
+          />
         </div>
       )}
     </Layout>

package/preview/src/utils/language-map.ts

@@ -0,0 +1,6 @@
+const languageMap = {
+  jsx: 'React',
+  markup: 'HTML',
+};
+
+export default languageMap;

package/readme.md

@@ -6,7 +6,7 @@
 <div align="center">
 <a href="https://react.email">Website</a> 
 <span> · </span>
-<a href="https://github.com/zenorocha/react-email">GitHub</a> 
+<a href="https://github.com/resendlabs/react-email">GitHub</a> 
 <span> · </span>
 <a href="https://react.email/discord">Discord</a>
 </div>

package/source/_preview/components.ts

@@ -4,10 +4,15 @@ export const components = [
     content:
       "import * as React from 'react';\nimport classnames from 'classnames';\nimport { unreachable } from '../utils';\nimport * as SlotPrimitive from '@radix-ui/react-slot';\n\ntype ButtonElement = React.ElementRef<'button'>;\ntype RootProps = React.ComponentPropsWithoutRef<'button'>;\n\ntype Appearance = 'white' | 'gradient';\ntype Size = '1' | '2' | '3' | '4';\n\ninterface ButtonProps extends RootProps {\n  asChild?: boolean;\n  appearance?: Appearance;\n  size?: Size;\n}\n\nexport const Button = React.forwardRef<ButtonElement, Readonly<ButtonProps>>(\n  (\n    {\n      asChild,\n      appearance = 'white',\n      className,\n      children,\n      size = '2',\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const classNames = classnames(\n      getSize(size),\n      getAppearance(appearance),\n      'inline-flex items-center justify-center border font-medium',\n      className,\n    );\n\n    return asChild ? (\n      <SlotPrimitive.Slot ref={forwardedRef} {...props} className={classNames}>\n        <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>\n      </SlotPrimitive.Slot>\n    ) : (\n      <button ref={forwardedRef} className={classNames} {...props}>\n        {children}\n      </button>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n\nconst getAppearance = (appearance: Appearance | undefined) => {\n  switch (appearance) {\n    case undefined:\n    case 'white':\n      return [\n        'bg-white text-black',\n        'hover:bg-white/90',\n        'focus:ring-2 focus:ring-white/20 focus:outline-none focus:bg-white/90',\n      ];\n    case 'gradient':\n      return [\n        'bg-gradient backdrop-blur-[20px] border-[#34343A]',\n        'hover:bg-gradientHover',\n        'focus:ring-2 focus:ring-white/20 focus:outline-none focus:bg-gradientHover',\n      ];\n    default:\n      unreachable(appearance);\n  }\n};\n\nconst getSize = (size: Size | undefined) => {\n  switch (size) {\n    case '1':\n      return '';\n    case undefined:\n    case '2':\n      return 'text-[14px] h-8 px-3 rounded-md gap-2';\n    case '3':\n      return 'text-[14px] h-10 px-4 rounded-md gap-2';\n    case '4':\n      return 'text-base h-11 px-4 rounded-md gap-2';\n    default:\n      unreachable(size);\n  }\n};\n",
   },
+  {
+    title: 'code-container.tsx',
+    content:
+      "import { Language } from 'prism-react-renderer';\nimport { IconButton } from './icon-button';\nimport { IconClipboard } from './icon-clipboard';\nimport { IconDownload } from './icon-download';\nimport { IconCheck } from './icon-check';\nimport { copyTextToClipboard } from '../utils';\nimport languageMap from '../utils/language-map';\nimport { Tooltip } from './tooltip';\nimport { Code } from './code';\nimport * as React from 'react';\n\ninterface CodeContainerProps {\n  markups: MarkupProps[];\n}\n\ninterface MarkupProps {\n  language: Language;\n  content: string;\n}\n\nexport const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({\n  markups,\n}) => {\n  const [isCopied, setIsCopied] = React.useState(false);\n  const [activeTab, setActiveTab] = React.useState(markups[0].language);\n  let file = null;\n  let url = null;\n\n  const renderDownloadIcon = () => {\n    let value = markups.filter((markup) => markup.language === activeTab);\n    file = new File([value[0].content], `email.${value[0].language}`);\n    url = URL.createObjectURL(file);\n\n    return (\n      <a href={url} download={file.name}>\n        <IconDownload />\n      </a>\n    );\n  };\n\n  const renderClipboardIcon = () => {\n    const handleClipboard = async () => {\n      const activeContent = markups.filter(({ language }) => {\n        return activeTab === language;\n      });\n      setIsCopied(true);\n      await copyTextToClipboard(activeContent[0].content);\n      setTimeout(() => setIsCopied(false), 3000);\n    };\n\n    return (\n      <IconButton onClick={handleClipboard}>\n        {isCopied ? <IconCheck /> : <IconClipboard />}\n      </IconButton>\n    );\n  };\n\n  React.useEffect(() => {\n    setIsCopied(false);\n  }, [activeTab]);\n\n  return (\n    <pre\n      className={\n        'border-slate-6 relative w-full items-center overflow-auto whitespace-pre rounded-md border text-sm backdrop-blur-md'\n      }\n      style={{\n        lineHeight: '130%',\n        background:\n          'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',\n        boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',\n      }}\n    >\n      <div className=\"h-9 border-b border-slate-6\">\n        <div className=\"py-[10px] px-4 text-xs flex gap-8\">\n          {markups.map(({ language }) => {\n            return (\n              <div key={language}>\n                <button\n                  className={`${activeTab !== language && 'opacity-25'}`}\n                  onClick={() => setActiveTab(language)}\n                >\n                  {languageMap[language]}\n                </button>\n              </div>\n            );\n          })}\n        </div>\n        <Tooltip>\n          <Tooltip.Trigger className=\"absolute top-2 right-2 hidden md:block\">\n            {renderClipboardIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Copy to Clipboard</Tooltip.Content>\n        </Tooltip>\n        <Tooltip>\n          <Tooltip.Trigger className=\"text-gray-11 absolute top-2 right-8 hidden md:block\">\n            {renderDownloadIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Download</Tooltip.Content>\n        </Tooltip>\n      </div>\n      {markups.map(({ language, content }) => {\n        return (\n          <div\n            className={`${activeTab !== language && 'hidden'}`}\n            key={language}\n          >\n            <Code language={language}>{content}</Code>\n          </div>\n        );\n      })}\n    </pre>\n  );\n};\n",
+  },
   {
     title: 'code.tsx',
     content:
-      "import classnames from 'classnames';\nimport Highlight, { defaultProps, Language } from 'prism-react-renderer';\nimport { IconButton } from './icon-button';\nimport { IconClipboard } from './icon-clipboard';\nimport { IconDownload } from './icon-download';\nimport { IconCheck } from './icon-check';\nimport { copyTextToClipboard } from '../utils';\nimport { Tooltip } from './tooltip';\nimport * as React from 'react';\n\ninterface CodeProps {\n  children: any;\n  className?: string;\n  language?: Language;\n}\n\nconst theme = {\n  plain: {\n    color: '#EDEDEF',\n    fontSize: 13,\n    fontFamily: 'MonoLisa, Menlo, monospace',\n  },\n  styles: [\n    {\n      types: ['comment'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['atrule', 'keyword', 'attr-name', 'selector'],\n      style: {\n        color: '#7E7D86',\n      },\n    },\n    {\n      types: ['punctuation', 'operator'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['class-name', 'function', 'tag', 'key-white'],\n      style: {\n        color: '#EDEDEF',\n      },\n    },\n  ],\n};\n\nexport const Code: React.FC<Readonly<CodeProps>> = ({\n  children,\n  className,\n  language = 'html',\n  ...props\n}) => {\n  const [isCopied, setIsCopied] = React.useState(false);\n  const value = children.trim();\n\n  const file = new File([value], `email.${language}`);\n  const url = URL.createObjectURL(file);\n\n  return (\n    <Highlight\n      {...defaultProps}\n      theme={theme}\n      code={value}\n      language={language as Language}\n    >\n      {({ tokens, getLineProps, getTokenProps }) => (\n        <pre\n          className={classnames(\n            'border-slate-6 relative w-full items-center overflow-auto whitespace-pre rounded-md border text-sm backdrop-blur-md',\n            className,\n          )}\n          style={{\n            lineHeight: '130%',\n            background:\n              'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',\n            boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',\n          }}\n        >\n          <div className=\"h-9 border-b border-slate-6\">\n            <div className=\"py-[10px] px-4 text-xs\">\n              {language === 'jsx' ? 'React' : 'HTML'}\n            </div>\n            <Tooltip>\n              <Tooltip.Trigger className=\"absolute top-2 right-2 hidden md:block\">\n                <IconButton\n                  onClick={async () => {\n                    setIsCopied(true);\n                    await copyTextToClipboard(value);\n                    setTimeout(() => setIsCopied(false), 3000);\n                  }}\n                >\n                  {isCopied ? <IconCheck /> : <IconClipboard />}\n                </IconButton>\n              </Tooltip.Trigger>\n              <Tooltip.Content>Copy to Clipboard</Tooltip.Content>\n            </Tooltip>\n\n            <Tooltip>\n              <Tooltip.Trigger className=\"text-gray-11 absolute top-2 right-8 hidden md:block\">\n                <a href={url} download={file.name}>\n                  <IconDownload />\n                </a>\n              </Tooltip.Trigger>\n              <Tooltip.Content>Download</Tooltip.Content>\n            </Tooltip>\n          </div>\n\n          <div\n            className=\"absolute right-0 top-0 h-px w-[200px]\"\n            style={{\n              background:\n                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',\n            }}\n          />\n          <div className=\"p-4\">\n            {tokens.map((line, i) => {\n              return (\n                <div\n                  key={i}\n                  {...getLineProps({ line, key: i })}\n                  className={classnames('whitespace-pre', {\n                    \"before:text-slate-11 before:mr-2 before:content-['$']\":\n                      language === 'bash' && tokens && tokens.length === 1,\n                  })}\n                >\n                  {line.map((token, key) => {\n                    const isException =\n                      token.content === 'from' &&\n                      line[key + 1]?.content === ':';\n                    const newTypes = isException\n                      ? [...token.types, 'key-white']\n                      : token.types;\n                    token.types = newTypes;\n\n                    return (\n                      <React.Fragment key={key}>\n                        <span {...getTokenProps({ token, key })} />\n                      </React.Fragment>\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n          <div\n            className=\"absolute left-0 bottom-0 h-px w-[200px]\"\n            style={{\n              background:\n                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',\n            }}\n          />\n        </pre>\n      )}\n    </Highlight>\n  );\n};\n",
+      "import classnames from 'classnames';\nimport Highlight, { defaultProps, Language } from 'prism-react-renderer';\nimport * as React from 'react';\n\ninterface CodeProps {\n  children: any;\n  className?: string;\n  language?: Language;\n}\n\nconst theme = {\n  plain: {\n    color: '#EDEDEF',\n    fontSize: 13,\n    fontFamily: 'MonoLisa, Menlo, monospace',\n  },\n  styles: [\n    {\n      types: ['comment'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['atrule', 'keyword', 'attr-name', 'selector'],\n      style: {\n        color: '#7E7D86',\n      },\n    },\n    {\n      types: ['punctuation', 'operator'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['class-name', 'function', 'tag', 'key-white'],\n      style: {\n        color: '#EDEDEF',\n      },\n    },\n  ],\n};\n\nexport const Code: React.FC<Readonly<CodeProps>> = ({\n  children,\n  language = 'html',\n}) => {\n  const [isCopied, setIsCopied] = React.useState(false);\n  const value = children.trim();\n\n  const file = new File([value], `email.${language}`);\n  const url = URL.createObjectURL(file);\n\n  return (\n    <Highlight\n      {...defaultProps}\n      theme={theme}\n      code={value}\n      language={language as Language}\n    >\n      {({ tokens, getLineProps, getTokenProps }) => (\n        <>\n          <div\n            className=\"absolute right-0 top-0 h-px w-[200px]\"\n            style={{\n              background:\n                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',\n            }}\n          />\n          <div className=\"p-4\">\n            {tokens.map((line, i) => {\n              return (\n                <div\n                  key={i}\n                  {...getLineProps({ line, key: i })}\n                  className={classnames('whitespace-pre', {\n                    \"before:text-slate-11 before:mr-2 before:content-['$']\":\n                      language === 'bash' && tokens && tokens.length === 1,\n                  })}\n                >\n                  {line.map((token, key) => {\n                    const isException =\n                      token.content === 'from' &&\n                      line[key + 1]?.content === ':';\n                    const newTypes = isException\n                      ? [...token.types, 'key-white']\n                      : token.types;\n                    token.types = newTypes;\n\n                    return (\n                      <React.Fragment key={key}>\n                        <span {...getTokenProps({ token, key })} />\n                      </React.Fragment>\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n          <div\n            className=\"absolute left-0 bottom-0 h-px w-[200px]\"\n            style={{\n              background:\n                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',\n            }}\n          />\n        </>\n      )}\n    </Highlight>\n  );\n};\n",
   },
   {
     title: 'heading.tsx',
@@ -57,12 +62,12 @@ export const components = [
   {
     title: 'send.tsx',
     content:
-      'import { inter } from \'../pages/_app\';\nimport { Button } from \'./button\';\nimport * as Popover from \'@radix-ui/react-popover\';\nimport * as React from \'react\';\n\nexport const Send = ({ markup }: { markup: string }) => {\n  const [to, setTo] = React.useState(\'\');\n  const [subject, setSubject] = React.useState(\'Testing React Email\');\n  const [isSending, setIsSending] = React.useState(false);\n\n  const onFormSubmit = async (e: React.FormEvent) => {\n    try {\n      e.preventDefault();\n      setIsSending(true);\n\n      const response = await fetch(\'https://react.email/api/send/test\', {\n        method: \'POST\',\n        headers: { \'Content-Type\': \'application/json\' },\n        body: JSON.stringify({\n          to,\n          subject,\n          html: markup,\n        }),\n      });\n\n      if (response.status === 429) {\n        const { error } = await response.json();\n        alert(error);\n      }\n    } catch (e) {\n      alert(\'Something went wrong. Please try again.\');\n    } finally {\n      setIsSending(false);\n    }\n  };\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <button className="box-border outline-none self-center w-20 h-5 flex items-center justify-center rounded-lg text-center transition duration-300 ease-in-out border border-slate-6 text-slate-11 text-sm px-4 py-4 hover:border-slate-12 hover:text-slate-12 font-sans">\n          Send\n        </button>\n      </Popover.Trigger>\n      <Popover.Anchor />\n      <Popover.Portal>\n        <Popover.Content\n          align="end"\n          className={`w-80 -mt-10 p-3 bg-black border border-slate-6 text-slate-11 rounded-lg font-sans ${inter.variable}`}\n        >\n          <Popover.Close\n            aria-label="Close"\n            className="absolute right-2 flex items-center justify-center w-6 h-6 text-xs text-slate-11 hover:text-slate-12 transition duration-300 ease-in-out rounded-full"\n          >\n            ✕\n          </Popover.Close>\n          <form onSubmit={onFormSubmit} className="mt-1">\n            <label\n              htmlFor="to"\n              className="text-slate-10 text-xs uppercase mb-2 block"\n            >\n              Recipient\n            </label>\n            <input\n              autoFocus={true}\n              className="appearance-none rounded-lg px-2 py-1 mb-3 outline-none w-full bg-slate-3 border placeholder-slate-8 border-slate-6 text-slate-12 text-sm focus:ring-1 focus:ring-slate-12 transition duration-300 ease-in-out"\n              onChange={(e) => setTo(e.target.value)}\n              defaultValue={to}\n              placeholder="you@example.com"\n              type="email"\n              id="to"\n              required\n            />\n            <label\n              htmlFor="subject"\n              className="text-slate-10 text-xs uppercase mb-2 block"\n            >\n              Subject\n            </label>\n            <input\n              className="appearance-none rounded-lg px-2 py-1 mb-3 outline-none w-full bg-slate-3 border placeholder-slate-8 border-slate-6 text-slate-12 text-sm focus:ring-1 focus:ring-slate-12 transition duration-300 ease-in-out"\n              onChange={(e) => setSubject(e.target.value)}\n              defaultValue={subject}\n              placeholder="My Email"\n              type="text"\n              id="subject"\n              required\n            />\n            <input\n              type="checkbox"\n              className="appearance-none checked:bg-blue-500"\n            />\n            <div className="flex items-center justify-end">\n              <Button\n                type="submit"\n                disabled={subject.length === 0 || to.length === 0 || isSending}\n                className="disabled:bg-slate-11 disabled:border-transparent"\n              >\n                Send\n              </Button>\n            </div>\n          </form>\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n',
+      'import { inter } from \'../pages/_app\';\nimport { Button } from \'./button\';\nimport { Text } from \'./text\';\nimport * as Popover from \'@radix-ui/react-popover\';\nimport * as React from \'react\';\n\nexport const Send = ({ markup }: { markup: string }) => {\n  const [to, setTo] = React.useState(\'\');\n  const [subject, setSubject] = React.useState(\'Testing React Email\');\n  const [isSending, setIsSending] = React.useState(false);\n\n  const onFormSubmit = async (e: React.FormEvent) => {\n    try {\n      e.preventDefault();\n      setIsSending(true);\n\n      const response = await fetch(\'https://react.email/api/send/test\', {\n        method: \'POST\',\n        headers: { \'Content-Type\': \'application/json\' },\n        body: JSON.stringify({\n          to,\n          subject,\n          html: markup,\n        }),\n      });\n\n      if (response.status === 429) {\n        const { error } = await response.json();\n        alert(error);\n      }\n    } catch (e) {\n      alert(\'Something went wrong. Please try again.\');\n    } finally {\n      setIsSending(false);\n    }\n  };\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <button className="box-border outline-none self-center w-20 h-5 flex items-center justify-center rounded-lg text-center transition duration-300 ease-in-out border border-slate-6 text-slate-11 text-sm px-4 py-4 hover:border-slate-12 hover:text-slate-12 font-sans">\n          Send\n        </button>\n      </Popover.Trigger>\n      <Popover.Anchor />\n      <Popover.Portal>\n        <Popover.Content\n          align="end"\n          className={`w-80 -mt-10 p-3 bg-black border border-slate-6 text-slate-11 rounded-lg font-sans ${inter.variable}`}\n        >\n          <Popover.Close\n            aria-label="Close"\n            className="absolute right-2 flex items-center justify-center w-6 h-6 text-xs text-slate-11 hover:text-slate-12 transition duration-300 ease-in-out rounded-full"\n          >\n            ✕\n          </Popover.Close>\n          <form onSubmit={onFormSubmit} className="mt-1">\n            <label\n              htmlFor="to"\n              className="text-slate-10 text-xs uppercase mb-2 block"\n            >\n              Recipient\n            </label>\n            <input\n              autoFocus={true}\n              className="appearance-none rounded-lg px-2 py-1 mb-3 outline-none w-full bg-slate-3 border placeholder-slate-8 border-slate-6 text-slate-12 text-sm focus:ring-1 focus:ring-slate-12 transition duration-300 ease-in-out"\n              onChange={(e) => setTo(e.target.value)}\n              defaultValue={to}\n              placeholder="you@example.com"\n              type="email"\n              id="to"\n              required\n            />\n            <label\n              htmlFor="subject"\n              className="text-slate-10 text-xs uppercase mb-2 block"\n            >\n              Subject\n            </label>\n            <input\n              className="appearance-none rounded-lg px-2 py-1 mb-3 outline-none w-full bg-slate-3 border placeholder-slate-8 border-slate-6 text-slate-12 text-sm focus:ring-1 focus:ring-slate-12 transition duration-300 ease-in-out"\n              onChange={(e) => setSubject(e.target.value)}\n              defaultValue={subject}\n              placeholder="My Email"\n              type="text"\n              id="subject"\n              required\n            />\n            <input\n              type="checkbox"\n              className="appearance-none checked:bg-blue-500"\n            />\n            <div className="flex items-center justify-between">\n              <Text className="inline-block" size="1">\n                Powered by{\' \'}\n                <a\n                  className="hover:text-slate-12 transition ease-in-out duration-300"\n                  href="https://resend.com"\n                  target="_blank"\n                  rel="noreferrer"\n                >\n                  Resend\n                </a>\n              </Text>\n              <Button\n                type="submit"\n                disabled={subject.length === 0 || to.length === 0 || isSending}\n                className="disabled:bg-slate-11 disabled:border-transparent"\n              >\n                Send\n              </Button>\n            </div>\n          </form>\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n',
   },
   {
     title: 'sidebar.tsx',
     content:
-      'import { Logo } from \'./logo\';\nimport * as React from \'react\';\nimport classnames from \'classnames\';\nimport Link from \'next/link\';\nimport { Heading } from \'./heading\';\nimport { useRouter } from \'next/router\';\nimport * as Collapsible from \'@radix-ui/react-collapsible\';\n\ntype SidebarElement = React.ElementRef<\'aside\'>;\ntype RootProps = React.ComponentPropsWithoutRef<\'aside\'>;\n\ninterface SidebarProps extends RootProps {\n  navItems: string[];\n}\n\nexport const Sidebar = React.forwardRef<SidebarElement, Readonly<SidebarProps>>(\n  ({ className, navItems, ...props }, forwardedRef) => {\n    const { query } = useRouter();\n\n    return (\n      <aside\n        ref={forwardedRef}\n        className="px-6 min-w-[275px] max-w-[275px] flex flex-col gap-4 border-r border-slate-6"\n        {...props}\n      >\n        <div className="h-[70px] flex items-center">\n          <Logo />\n        </div>\n\n        <nav className="flex flex-col gap-4">\n          <Collapsible.Root defaultOpen>\n            <Collapsible.Trigger\n              className={classnames(\'flex items-center gap-1\', {\n                \'cursor-default\': navItems && navItems.length === 0,\n              })}\n            >\n              <svg\n                className="text-slate-11"\n                width="24"\n                height="24"\n                viewBox="0 0 24 24"\n                fill="none"\n                xmlns="http://www.w3.org/2000/svg"\n              >\n                <path\n                  d="M19.25 17.25V9.75C19.25 8.64543 18.3546 7.75 17.25 7.75H4.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25Z"\n                  stroke="currentColor"\n                  strokeWidth="1.5"\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                />\n                <path\n                  d="M13.5 7.5L12.5685 5.7923C12.2181 5.14977 11.5446 4.75 10.8127 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V11"\n                  stroke="currentColor"\n                  strokeWidth="1.5"\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                />\n              </svg>\n\n              <div className="flex items-center">\n                <Heading as="h3" color="white" size="2" weight="medium">\n                  All emails\n                </Heading>\n                {navItems && navItems.length > 0 && (\n                  <svg\n                    className="text-slate-11"\n                    width="24"\n                    height="24"\n                    viewBox="0 0 24 24"\n                    fill="none"\n                    xmlns="http://www.w3.org/2000/svg"\n                  >\n                    <path\n                      d="M12 15L8.5359 9.75L15.4641 9.75L12 15Z"\n                      fill="currentColor"\n                    />\n                  </svg>\n                )}\n              </div>\n            </Collapsible.Trigger>\n\n            {navItems && navItems.length > 0 && (\n              <Collapsible.Content className="relative mt-3">\n                <div className="absolute left-2.5  w-px h-full bg-slate-6" />\n\n                <div className="py-2 flex flex-col gap-1.5 truncate">\n                  {navItems &&\n                    navItems.map((item) => (\n                      <Link key={item} href={`/preview/${item}`}>\n                        <span\n                          className={classnames(\n                            \'text-[14px] flex items-center font-medium gap-2 h-8 w-full pl-4 rounded-md text-slate-11\',\n                            {\n                              \'bg-cyan-3 text-cyan-11\': query.slug === item,\n                              \'hover:text-slate-12\': query.slug !== item,\n                            },\n                          )}\n                        >\n                          {query.slug === item && (\n                            <div className="h-5 bg-cyan-11 w-px absolute left-2.5" />\n                          )}\n                          <svg\n                            width="24"\n                            height="24"\n                            viewBox="0 0 24 24"\n                            fill="none"\n                            xmlns="http://www.w3.org/2000/svg"\n                          >\n                            <path\n                              d="M7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V9L14 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25Z"\n                              stroke="currentColor"\n                              strokeOpacity="0.927"\n                              strokeWidth="1.5"\n                              strokeLinecap="round"\n                              strokeLinejoin="round"\n                            />\n                            <path\n                              d="M18 9.25H13.75V5"\n                              stroke="currentColor"\n                              strokeOpacity="0.927"\n                              strokeWidth="1.5"\n                              strokeLinecap="round"\n                              strokeLinejoin="round"\n                            />\n                          </svg>\n                          {item}\n                        </span>\n                      </Link>\n                    ))}\n                </div>\n              </Collapsible.Content>\n            )}\n          </Collapsible.Root>\n        </nav>\n      </aside>\n    );\n  },\n);\n\nSidebar.displayName = \'Sidebar\';\n',
+      'import { Logo } from \'./logo\';\nimport * as React from \'react\';\nimport classnames from \'classnames\';\nimport Link from \'next/link\';\nimport { Heading } from \'./heading\';\nimport { useRouter } from \'next/router\';\nimport * as Collapsible from \'@radix-ui/react-collapsible\';\n\ntype SidebarElement = React.ElementRef<\'aside\'>;\ntype RootProps = React.ComponentPropsWithoutRef<\'aside\'>;\n\ninterface SidebarProps extends RootProps {\n  navItems: string[];\n}\n\nexport const Sidebar = React.forwardRef<SidebarElement, Readonly<SidebarProps>>(\n  ({ className, navItems, ...props }, forwardedRef) => {\n    const { query } = useRouter();\n\n    return (\n      <aside\n        ref={forwardedRef}\n        className="px-6 min-w-[275px] max-w-[275px] flex flex-col gap-4 border-r border-slate-6"\n        {...props}\n      >\n        <div className="h-[70px] flex items-center">\n          <Logo />\n        </div>\n\n        <nav className="flex flex-col gap-4">\n          <Collapsible.Root defaultOpen>\n            <Collapsible.Trigger\n              className={classnames(\'flex items-center gap-1\', {\n                \'cursor-default\': navItems && navItems.length === 0,\n              })}\n            >\n              <svg\n                className="text-slate-11"\n                width="24"\n                height="24"\n                viewBox="0 0 24 24"\n                fill="none"\n                xmlns="http://www.w3.org/2000/svg"\n              >\n                <path\n                  d="M19.25 17.25V9.75C19.25 8.64543 18.3546 7.75 17.25 7.75H4.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25Z"\n                  stroke="currentColor"\n                  strokeWidth="1.5"\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                />\n                <path\n                  d="M13.5 7.5L12.5685 5.7923C12.2181 5.14977 11.5446 4.75 10.8127 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V11"\n                  stroke="currentColor"\n                  strokeWidth="1.5"\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                />\n              </svg>\n\n              <div className="flex items-center">\n                <Heading as="h3" color="white" size="2" weight="medium">\n                  All emails\n                </Heading>\n                {navItems && navItems.length > 0 && (\n                  <svg\n                    className="text-slate-11"\n                    width="24"\n                    height="24"\n                    viewBox="0 0 24 24"\n                    fill="none"\n                    xmlns="http://www.w3.org/2000/svg"\n                  >\n                    <path\n                      d="M12 15L8.5359 9.75L15.4641 9.75L12 15Z"\n                      fill="currentColor"\n                    />\n                  </svg>\n                )}\n              </div>\n            </Collapsible.Trigger>\n\n            {navItems && navItems.length > 0 && (\n              <Collapsible.Content className="relative mt-3">\n                <div className="absolute left-2.5  w-px h-full bg-slate-6" />\n\n                <div className="py-2 flex flex-col gap-1.5 truncate">\n                  {navItems &&\n                    navItems.map((item) => (\n                      <Link key={item} href={`/preview/${item}`}>\n                        <span\n                          className={classnames(\n                            \'text-[14px] flex items-center font-medium gap-2 h-8 w-full pl-4 rounded-md text-slate-11\',\n                            {\n                              \'bg-cyan-3 text-cyan-11\': query.slug === item,\n                              \'hover:text-slate-12\': query.slug !== item,\n                            },\n                          )}\n                        >\n                          {query.slug === item && (\n                            <div className="h-5 bg-cyan-11 w-px absolute left-2.5" />\n                          )}\n                          <svg\n                            className="flex-shrink-0"\n                            width="24"\n                            height="24"\n                            viewBox="0 0 24 24"\n                            fill="none"\n                            xmlns="http://www.w3.org/2000/svg"\n                          >\n                            <path\n                              d="M7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V9L14 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25Z"\n                              stroke="currentColor"\n                              strokeOpacity="0.927"\n                              strokeWidth="1.5"\n                              strokeLinecap="round"\n                              strokeLinejoin="round"\n                            />\n                            <path\n                              d="M18 9.25H13.75V5"\n                              stroke="currentColor"\n                              strokeOpacity="0.927"\n                              strokeWidth="1.5"\n                              strokeLinecap="round"\n                              strokeLinejoin="round"\n                            />\n                          </svg>\n                          {item}\n                        </span>\n                      </Link>\n                    ))}\n                </div>\n              </Collapsible.Content>\n            )}\n          </Collapsible.Root>\n        </nav>\n      </aside>\n    );\n  },\n);\n\nSidebar.displayName = \'Sidebar\';\n',
   },
   {
     title: 'text.tsx',

package/source/_preview/pages.ts

@@ -18,6 +18,6 @@ export const pages = [
     dir: 'preview',
     title: '[slug].tsx',
     content:
-      "import * as React from 'react';\nimport { promises as fs } from 'fs';\nimport path from 'path';\nimport { render } from '@react-email/render';\nimport { GetStaticPaths } from 'next';\nimport { Layout } from '../../components/layout';\nimport { Code } from '../../components';\nimport Head from 'next/head';\nimport { useRouter } from 'next/router';\n\ninterface PreviewProps {}\n\nexport const CONTENT_DIR = 'emails';\n\nconst getEmails = async () => {\n  const emailsDirectory = path.join(process.cwd(), CONTENT_DIR);\n  const filenames = await fs.readdir(emailsDirectory);\n  const emails = filenames\n    .map((file) => file.replace(/\\.(jsx|tsx)$/g, ''))\n    .filter((file) => file !== 'components');\n  return { emails, filenames };\n};\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n  const { emails } = await getEmails();\n  const paths = emails.map((email) => {\n    return { params: { slug: email } };\n  });\n  return { paths, fallback: true };\n};\n\nexport async function getStaticProps({ params }) {\n  try {\n    const { emails, filenames } = await getEmails();\n    const template = filenames.filter((email) => {\n      const [fileName] = email.split('.');\n      return params.slug === fileName;\n    });\n\n    const Email = (await import(`../../../emails/${params.slug}`)).default;\n    const markup = render(<Email />, { pretty: true });\n    const path = `${process.cwd()}/${CONTENT_DIR}/${template[0]}`;\n    const reactMarkup = await fs.readFile(path, {\n      encoding: 'utf-8',\n    });\n\n    return emails\n      ? { props: { navItems: emails, slug: params.slug, markup, reactMarkup } }\n      : { notFound: true };\n  } catch (error) {\n    console.error(error);\n    return { notFound: true };\n  }\n}\n\nconst Preview: React.FC<Readonly<PreviewProps>> = ({\n  navItems,\n  markup,\n  reactMarkup,\n  slug,\n}: any) => {\n  const title = `${slug} — React Email`;\n  const router = useRouter();\n  const [viewMode, setViewMode] = React.useState('desktop');\n\n  const handleViewMode = (mode: string) => {\n    setViewMode(mode);\n\n    router.push({\n      pathname: router.pathname,\n      query: {\n        ...router.query,\n        view: mode,\n      },\n    });\n  };\n\n  React.useEffect(() => {\n    if (router.query.view === 'source' || router.query.view === 'desktop') {\n      setViewMode(router.query.view);\n    }\n  }, [router.query.view]);\n\n  return (\n    <Layout\n      navItems={navItems}\n      title={slug}\n      viewMode={viewMode}\n      setViewMode={handleViewMode}\n      markup={markup}\n    >\n      <Head>\n        <title>{title}</title>\n      </Head>\n      {viewMode === 'desktop' ? (\n        <iframe\n          srcDoc={markup}\n          frameBorder=\"0\"\n          className=\"w-full h-[calc(100vh_-_70px)]\"\n        />\n      ) : (\n        <div className=\"flex gap-6 mx-auto p-6\">\n          <Code language=\"jsx\">{reactMarkup}</Code>\n          <Code>{markup}</Code>\n        </div>\n      )}\n    </Layout>\n  );\n};\n\nexport default Preview;\n",
+      "import * as React from 'react';\nimport { promises as fs } from 'fs';\nimport path from 'path';\nimport { render } from '@react-email/render';\nimport { GetStaticPaths } from 'next';\nimport { Layout } from '../../components/layout';\nimport { CodeContainer } from '../../components/code-container';\nimport { Code } from '../../components';\nimport Head from 'next/head';\nimport { useRouter } from 'next/router';\n\ninterface PreviewProps {\n  navItems: string;\n  markup: string;\n  reactMarkup: string;\n  slug: string;\n}\n\nexport const CONTENT_DIR = 'emails';\n\nconst getEmails = async () => {\n  const emailsDirectory = path.join(process.cwd(), CONTENT_DIR);\n  const filenames = await fs.readdir(emailsDirectory);\n  const emails = filenames\n    .map((file) => file.replace(/\\.(jsx|tsx)$/g, ''))\n    .filter((file) => file !== 'components');\n  return { emails, filenames };\n};\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n  const { emails } = await getEmails();\n  const paths = emails.map((email) => {\n    return { params: { slug: email } };\n  });\n  return { paths, fallback: true };\n};\n\nexport async function getStaticProps({ params }) {\n  try {\n    const { emails, filenames } = await getEmails();\n    const template = filenames.filter((email) => {\n      const [fileName] = email.split('.');\n      return params.slug === fileName;\n    });\n\n    const Email = (await import(`../../../emails/${params.slug}`)).default;\n    const markup = render(<Email />, { pretty: true });\n    const path = `${process.cwd()}/${CONTENT_DIR}/${template[0]}`;\n    const reactMarkup = await fs.readFile(path, {\n      encoding: 'utf-8',\n    });\n\n    return emails\n      ? { props: { navItems: emails, slug: params.slug, markup, reactMarkup } }\n      : { notFound: true };\n  } catch (error) {\n    console.error(error);\n    return { notFound: true };\n  }\n}\n\nconst Preview: React.FC<Readonly<PreviewProps>> = ({\n  navItems,\n  markup,\n  reactMarkup,\n  slug,\n}: any) => {\n  const title = `${slug} — React Email`;\n  const router = useRouter();\n  const [viewMode, setViewMode] = React.useState('desktop');\n\n  const handleViewMode = (mode: string) => {\n    setViewMode(mode);\n\n    router.push({\n      pathname: router.pathname,\n      query: {\n        ...router.query,\n        view: mode,\n      },\n    });\n  };\n\n  React.useEffect(() => {\n    if (router.query.view === 'source' || router.query.view === 'desktop') {\n      setViewMode(router.query.view);\n    }\n  }, [router.query.view]);\n\n  return (\n    <Layout\n      navItems={navItems}\n      title={slug}\n      viewMode={viewMode}\n      setViewMode={handleViewMode}\n      markup={markup}\n    >\n      <Head>\n        <title>{title}</title>\n      </Head>\n      {viewMode === 'desktop' ? (\n        <iframe\n          srcDoc={markup}\n          frameBorder=\"0\"\n          className=\"w-full h-[calc(100vh_-_70px)]\"\n        />\n      ) : (\n        <div className=\"flex gap-6 mx-auto p-6\">\n          <CodeContainer\n            markups={[\n              { language: 'jsx', content: reactMarkup },\n              { language: 'markup', content: markup },\n            ]}\n          />\n        </div>\n      )}\n    </Layout>\n  );\n};\n\nexport default Preview;\n",
   },
 ];

package/source/_preview/root.ts

@@ -4,10 +4,15 @@ export const root = [
     content:
       '/// <reference types="next" />\n/// <reference types="next/image-types/global" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n',
   },
+  {
+    title: 'next.config.js',
+    content:
+      "/**\n * @type {import('next').NextConfig}\n */\nconst nextConfig = {\n  reactStrictMode: true,\n  swcMinify: true,\n};\n\nmodule.exports = nextConfig;\n",
+  },
   {
     title: 'package.json',
     content:
-      '{\n  "name": "react-email-preview",\n  "version": "0.0.5",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "engines": {\n    "node": ">=18.0.0"\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-popover": "^1.0.2",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@radix-ui/react-tooltip": "^1.0.2",\n    "@react-email/render": "0.0.2",\n    "classnames": "2.3.2",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
+      '{\n  "name": "react-email-preview",\n  "version": "0.0.7",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "engines": {\n    "node": ">=18.0.0"\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-popover": "1.0.2",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@radix-ui/react-tooltip": "1.0.2",\n    "@react-email/render": "0.0.2",\n    "classnames": "2.3.2",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
   },
   {
     title: 'postcss.config.js',

package/source/_preview/utils.ts

@@ -14,6 +14,11 @@ export const utils = [
     content:
       "export * from './as';\nexport * from './unreachable';\nexport * from './copy-text-to-clipboard';\n",
   },
+  {
+    title: 'language-map.ts',
+    content:
+      "const languageMap = {\n  jsx: 'React',\n  markup: 'HTML',\n};\n\nexport default languageMap;\n",
+  },
   {
     title: 'unreachable.ts',
     content:

package/source/commands/dev.ts

@@ -105,13 +105,13 @@ const createAppFiles = async () => {
       });
     };
 
-    const pageCreation = pages.map((page) => {
+    const pageCreation = pages.map(async (page) => {
       const location = page.dir
         ? `${SRC_PATH}/pages/${page.dir}/${page.title}`
         : `${SRC_PATH}/pages/${page.title}`;
 
       if (page.dir) {
-        createDirectory(`${SRC_PATH}/pages/${page.dir}`);
+        await createDirectory(`${SRC_PATH}/pages/${page.dir}`);
       }
 
       return fs.promises.writeFile(location, page.content);

package/source/commands/{exportTemplates.ts → export.ts}

@@ -3,7 +3,7 @@ import esbuild from 'esbuild';
 import tree from 'tree-node-cli';
 import ora from 'ora';
 import logSymbols from 'log-symbols';
-import { render } from '@react-email/render';
+import { render, Options } from '@react-email/render';
 import { unlinkSync, writeFileSync } from 'fs';
 import copy from 'cpy';
 import normalize from 'normalize-path';
@@ -14,9 +14,11 @@ import { checkDirectoryExist, CLIENT_EMAILS_PATH } from '../utils';
   files. Then these `.js` files are imported dynamically and rendered to `.html` files
   using the `render` function.
  */
-export const exportTemplates = async (outDir: string, pretty: boolean) => {
+export const exportTemplates = async (outDir: string, options: Options) => {
   const spinner = ora('Preparing files...\n').start();
-  const allTemplates = glob.sync(normalize(`${CLIENT_EMAILS_PATH}/*.{tsx,jsx}`));
+  const allTemplates = glob.sync(
+    normalize(`${CLIENT_EMAILS_PATH}/*.{tsx,jsx}`),
+  );
 
   esbuild.buildSync({
     bundle: true,
@@ -32,8 +34,11 @@ export const exportTemplates = async (outDir: string, pretty: boolean) => {
 
   for (const template of allBuiltTemplates) {
     const component = await import(template);
-    const rendered = render(component.default(), { pretty });
-    const htmlPath = template.replace('.js', '.html');
+    const rendered = render(component.default(), options);
+    const htmlPath = template.replace(
+      '.js',
+      options.plainText ? '.txt' : '.html',
+    );
     writeFileSync(htmlPath, rendered);
     unlinkSync(template);
   }
@@ -57,4 +62,6 @@ export const exportTemplates = async (outDir: string, pretty: boolean) => {
     symbol: logSymbols.success,
     text: 'Successfully exported emails',
   });
+
+  process.exit();
 };

package/source/index.ts

@@ -2,7 +2,7 @@
 import { program } from '@commander-js/extra-typings';
 import { PACKAGE_NAME } from './utils/constants';
 import { dev } from './commands/dev';
-import { exportTemplates } from './commands/exportTemplates';
+import { exportTemplates } from './commands/export';
 
 program
   .name(PACKAGE_NAME)
@@ -19,6 +19,9 @@ program
   .description('Build the templates to the `out` directory')
   .option('--outDir <path>', 'Output directory', 'out')
   .option('-p, --pretty', 'Pretty print the output', false)
-  .action(({ outDir, pretty }) => exportTemplates(outDir, pretty));
+  .option('-t, --plainText', 'Set output format as plain Text', false)
+  .action(({ outDir, pretty, plainText }) =>
+    exportTemplates(outDir, { pretty, plainText }),
+  );
 
 program.parse();