export const pages = [ { title: '_app.tsx', content: "import '../styles/globals.css';\nimport type { AppProps } from 'next/app';\nimport { Inter } from '@next/font/google';\nimport classnames from 'classnames';\nimport Head from 'next/head';\n\nconst inter = Inter({\n subsets: ['latin'],\n variable: '--font-inter',\n});\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n return (\n
\n \n React Email\n \n \n
\n );\n}\n\nexport default MyApp;\n", }, { title: '_document.tsx', content: 'import { Html, Head, Main, NextScript } from \'next/document\';\n\nexport default function Document() {\n return (\n \n \n \n
\n \n \n \n );\n}\n', }, { title: 'index.tsx', content: "import { promises as fs } from 'fs';\nimport path from 'path';\nimport { Button, Heading, Text } from '../components';\nimport { Layout } from '../components/layout';\nimport Link from 'next/link';\n\ninterface HomeProps {}\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.map((file) => file.replace('.tsx', ''));\n\n return emails;\n};\n\nexport async function getStaticProps({ params }) {\n try {\n const emails = await getEmails();\n return emails\n ? { props: { navItems: emails } }\n : { props: { navItems: [] } };\n } catch (error) {\n console.error(error);\n return { props: { navItems: [] } };\n }\n}\n\nconst Home: React.FC> = ({ navItems }: any) => {\n return (\n \n
\n \n Welcome to the React Email preview!\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dolorum\n vitae rem laudantium eos similique nobis facilis, quaerat excepturi\n ratione asperiores iste suscipit perspiciatis quam minima delectus,\n eveniet quas quo!\n \n\n \n
\n \n );\n};\n\nexport default Home;\n", }, { dir: 'preview', title: '[slug].tsx', content: "import { 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 * as React from 'react';\nimport { Code } from '../../components';\nimport Head from 'next/head';\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.map((file) => file.replace('.tsx', ''));\n\n return emails;\n};\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n const emails = await getEmails();\n\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 = await getEmails();\n const Email = (await import(`../../../emails/${params.slug}`)).default;\n const markup = render(, { pretty: true });\n\n return emails\n ? { props: { navItems: emails, slug: params.slug, markup } }\n : { notFound: true };\n } catch (error) {\n console.error(error);\n return { notFound: true };\n }\n}\n\nconst Preview: React.FC> = ({\n navItems,\n markup,\n slug,\n}: any) => {\n const [viewMode, setViewMode] = React.useState('desktop');\n const title = `${slug} — React Email`;\n\n return (\n \n \n {title}\n \n {viewMode === 'desktop' ? (\n \n ) : (\n
\n {markup}\n
\n )}\n \n );\n};\n\nexport default Preview;\n", }, ];