react-email 1.0.6 → 1.0.8

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/index.js

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const extra_typings_1 = require("@commander-js/extra-typings");
+const shelljs_1 = __importDefault(require("shelljs"));
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const contants_1 = require("./utils/contants");
+const watcher_1 = require("./utils/watcher");
+const check_directory_exist_1 = require("./utils/check-directory-exist");
+const check_empty_directory_1 = require("./utils/check-empty-directory");
+const copy_files_1 = require("./utils/copy-files");
+extra_typings_1.program
+    .name(contants_1.PACKAGE_NAME)
+    .description('A live preview of your emails right in your browser')
+    .version('0.0.0');
+extra_typings_1.program
+    .command('dev')
+    .description('Starts the application in development mode')
+    .action(async () => {
+    const hasEmailsDirectory = (0, check_directory_exist_1.checkDirectoryExist)(contants_1.DEFAULT_EMAILS_DIRECTORY);
+    if (!hasEmailsDirectory) {
+        return console.error('Missing emails directory');
+    }
+    const isEmailsDirectoryEmpty = await (0, check_empty_directory_1.checkEmptyDirectory)(contants_1.DEFAULT_EMAILS_DIRECTORY);
+    if (isEmailsDirectoryEmpty) {
+        return console.error('Missing email files');
+    }
+    const hasDotEmailDirectory = (0, check_directory_exist_1.checkDirectoryExist)(contants_1.DOT_EMAIL_DEV);
+    if (!hasDotEmailDirectory) {
+        await fs_1.default.promises.mkdir(contants_1.DOT_EMAIL_DEV, { recursive: true });
+    }
+    await (0, copy_files_1.copyFiles)();
+    shelljs_1.default.cd(path_1.default.join(contants_1.DOT_EMAIL_DEV));
+    shelljs_1.default.exec('yarn', { silent: true });
+    shelljs_1.default.exec('yarn dev', { async: true });
+    (0, watcher_1.watcher)();
+});
+extra_typings_1.program.parse();

package/dist/utils/check-directory-exist.d.ts

@@ -0,0 +1 @@
+export declare const checkDirectoryExist: (path: string) => boolean;

package/dist/utils/check-directory-exist.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkDirectoryExist = void 0;
+const fs_1 = __importDefault(require("fs"));
+const checkDirectoryExist = (path) => fs_1.default.existsSync(path);
+exports.checkDirectoryExist = checkDirectoryExist;

package/dist/utils/check-empty-directory.d.ts

@@ -0,0 +1 @@
+export declare const checkEmptyDirectory: (path: string) => Promise<boolean>;

package/dist/utils/check-empty-directory.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkEmptyDirectory = void 0;
+const fs_1 = __importDefault(require("fs"));
+const checkEmptyDirectory = async (path) => {
+    const files = await fs_1.default.promises.readdir(path);
+    return files.length === 0;
+};
+exports.checkEmptyDirectory = checkEmptyDirectory;

package/dist/utils/contants.d.ts

@@ -0,0 +1,10 @@
+export declare const CURRENT_PATH: string;
+export declare const DEFAULT_EMAILS_DIRECTORY = "emails";
+export declare const PACKAGE_NAME = "react-email";
+export declare const HOME_DIR: string;
+export declare const DOT_EMAIL_DEV: string;
+export declare const NODE_MODULES_PACKAGE_PATH: string;
+export declare const NODE_MODULES_PREVIEW_PATH: string;
+export declare const CLIENT_EMAILS_PATH: string;
+export declare const PACKAGE_EMAILS_PATH: string;
+export declare const EVENT_FILE_DELETED = "unlink";

package/dist/utils/contants.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EVENT_FILE_DELETED = exports.PACKAGE_EMAILS_PATH = exports.CLIENT_EMAILS_PATH = exports.NODE_MODULES_PREVIEW_PATH = exports.NODE_MODULES_PACKAGE_PATH = exports.DOT_EMAIL_DEV = exports.HOME_DIR = exports.PACKAGE_NAME = exports.DEFAULT_EMAILS_DIRECTORY = exports.CURRENT_PATH = void 0;
+const os_1 = __importDefault(require("os"));
+const path_1 = __importDefault(require("path"));
+exports.CURRENT_PATH = process.cwd();
+exports.DEFAULT_EMAILS_DIRECTORY = 'emails';
+exports.PACKAGE_NAME = 'react-email';
+exports.HOME_DIR = os_1.default.homedir();
+exports.DOT_EMAIL_DEV = path_1.default.join(exports.HOME_DIR, '.react-email');
+exports.NODE_MODULES_PACKAGE_PATH = path_1.default.join(exports.CURRENT_PATH, 'node_modules', exports.PACKAGE_NAME);
+exports.NODE_MODULES_PREVIEW_PATH = path_1.default.join(exports.NODE_MODULES_PACKAGE_PATH, 'preview');
+exports.CLIENT_EMAILS_PATH = path_1.default.join(exports.CURRENT_PATH, exports.DEFAULT_EMAILS_DIRECTORY);
+exports.PACKAGE_EMAILS_PATH = path_1.default.join(exports.DOT_EMAIL_DEV, exports.DEFAULT_EMAILS_DIRECTORY);
+exports.EVENT_FILE_DELETED = 'unlink';

package/dist/utils/copy-files.d.ts

@@ -0,0 +1 @@
+export declare const copyFiles: () => Promise<void>;

package/dist/utils/copy-files.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.copyFiles = void 0;
+const path_1 = __importDefault(require("path"));
+const cpy_1 = __importDefault(require("cpy"));
+const contants_1 = require("./contants");
+const copyFiles = async () => {
+    try {
+        await (0, cpy_1.default)(path_1.default.join(contants_1.NODE_MODULES_PREVIEW_PATH, 'src', 'pages', 'preview'), path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'pages', 'preview'));
+        await (0, cpy_1.default)(path_1.default.join(contants_1.NODE_MODULES_PREVIEW_PATH, 'src', 'pages', '_app.tsx'), path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'pages'));
+        await (0, cpy_1.default)(path_1.default.join(contants_1.NODE_MODULES_PREVIEW_PATH, 'src', 'pages', '_document.tsx'), path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'pages'));
+        await (0, cpy_1.default)(path_1.default.join(contants_1.NODE_MODULES_PREVIEW_PATH, 'src', 'pages', 'index.tsx'), path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'pages'));
+        await (0, cpy_1.default)(path_1.default.join(contants_1.NODE_MODULES_PREVIEW_PATH, 'src', 'styles'), path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'styles'));
+        await (0, cpy_1.default)(path_1.default.join(contants_1.NODE_MODULES_PREVIEW_PATH, 'src', 'components'), path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'components'));
+        await (0, cpy_1.default)(path_1.default.join(contants_1.NODE_MODULES_PREVIEW_PATH, 'src', 'utils'), path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'utils'));
+        await (0, cpy_1.default)(path_1.default.join(contants_1.NODE_MODULES_PREVIEW_PATH, 'next-env.d.ts'), contants_1.DOT_EMAIL_DEV);
+        await (0, cpy_1.default)(path_1.default.join(contants_1.NODE_MODULES_PREVIEW_PATH, 'package.json'), contants_1.DOT_EMAIL_DEV);
+        await (0, cpy_1.default)(path_1.default.join(contants_1.NODE_MODULES_PREVIEW_PATH, 'postcss.config.js'), contants_1.DOT_EMAIL_DEV);
+        await (0, cpy_1.default)(path_1.default.join(contants_1.NODE_MODULES_PREVIEW_PATH, 'tailwind.config.js'), contants_1.DOT_EMAIL_DEV);
+        await (0, cpy_1.default)(path_1.default.join(contants_1.NODE_MODULES_PREVIEW_PATH, 'tsconfig.json'), contants_1.DOT_EMAIL_DEV);
+        await (0, cpy_1.default)(contants_1.CLIENT_EMAILS_PATH, contants_1.PACKAGE_EMAILS_PATH);
+    }
+    catch (error) {
+        console.error({ error });
+    }
+};
+exports.copyFiles = copyFiles;

package/dist/utils/watcher.d.ts

@@ -0,0 +1,2 @@
+import chokidar from 'chokidar';
+export declare const watcher: () => chokidar.FSWatcher;

package/dist/utils/watcher.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.watcher = void 0;
+const chokidar_1 = __importDefault(require("chokidar"));
+const contants_1 = require("./contants");
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const cpy_1 = __importDefault(require("cpy"));
+const watcher = () => chokidar_1.default
+    .watch(contants_1.CURRENT_PATH, { ignoreInitial: true, cwd: contants_1.CURRENT_PATH })
+    .on('all', async (event, filename) => {
+    if (event === contants_1.EVENT_FILE_DELETED) {
+        await fs_1.default.promises.rm(path_1.default.join(contants_1.DOT_EMAIL_DEV, filename));
+    }
+    else {
+        await (0, cpy_1.default)(contants_1.CLIENT_EMAILS_PATH, contants_1.PACKAGE_EMAILS_PATH);
+    }
+});
+exports.watcher = watcher;

package/package.json

@@ -1,17 +1,38 @@
 {
   "name": "react-email",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "A live preview of your emails right in your browser.",
-  "main": "src/index.js",
+  "bin": {
+    "email": "./dist/index.js"
+  },
+  "exports": [
+    "./dist/index.js",
+    "./preview"
+  ],
+  "types": "./dist/index.d.ts",
+  "engines": {
+    "node": ">=14.16"
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build",
+    "format:check": "prettier --check \"**/*.{js,ts,tsx,json}\"",
+    "format": "prettier --write \"**/*.{js,ts,tsx,json}\"",
+    "lint": "eslint",
+    "clean": "rm -rf dist"
+  },
   "license": "MIT",
   "dependencies": {
-    "commander": "^9.4.1",
-    "copy": "^0.3.2",
-    "inquirer": "^9.1.4",
-    "prompts": "^2.4.2",
-    "shelljs": "^0.8.5"
+    "@commander-js/extra-typings": "9.4.1",
+    "chokidar": "3.5.3",
+    "commander": "9.4.1",
+    "cpy": "8.1.2",
+    "glob": "8.0.3",
+    "shelljs": "0.8.5"
   },
-  "bin": {
-    "email": "src/index.js"
+  "devDependencies": {
+    "@types/node": "18.11.9",
+    "@types/shelljs": "0.8.11",
+    "prettier": "2.7.1"
   }
 }

package/preview/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "create-react-email-test",
+  "version": "0.0.10",
+  "description": "Create react email",
+  "main": "index.js",
+  "repository": "bukinoshita/create-react-email",
+  "author": "Bu Kinoshita",
+  "license": "MIT",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "format:check": "prettier --check \"**/*.{ts,tsx,md}\"",
+    "format": "prettier --write \"**/*.{ts,tsx,md}\""
+  },
+  "dependencies": {
+    "@next/font": "13.0.4",
+    "@radix-ui/colors": "0.1.8",
+    "@radix-ui/react-collapsible": "1.0.1",
+    "@radix-ui/react-slot": "1.0.1",
+    "@radix-ui/react-toggle-group": "1.0.1",
+    "@react-email/avatar": "0.0.2",
+    "@react-email/button": "0.0.3",
+    "@react-email/container": "0.0.4",
+    "@react-email/head": "0.0.2",
+    "@react-email/heading": "0.0.3",
+    "@react-email/hr": "0.0.2",
+    "@react-email/html": "0.0.2",
+    "@react-email/img": "0.0.2",
+    "@react-email/link": "0.0.2",
+    "@react-email/preview": "0.0.2",
+    "@react-email/render": "0.0.2",
+    "@react-email/section": "0.0.1",
+    "@react-email/text": "0.0.2",
+    "classnames": "2.3.2",
+    "next": "13.0.4",
+    "prism-react-renderer": "1.3.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/classnames": "2.3.1",
+    "@types/node": "18.11.9",
+    "@types/react": "18.0.25",
+    "@types/react-dom": "18.0.9",
+    "autoprefixer": "10.4.13",
+    "postcss": "8.4.19",
+    "tailwindcss": "3.2.4",
+    "typescript": "4.9.3"
+  }
+}

package/preview/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/preview/src/components/button.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { unreachable } from '../utils';
+import * as SlotPrimitive from '@radix-ui/react-slot';
+
+type ButtonElement = React.ElementRef<'button'>;
+type RootProps = React.ComponentPropsWithoutRef<'button'>;
+
+type Appearance = 'white' | 'gradient';
+type Size = '1' | '2' | '3' | '4';
+
+interface ButtonProps extends RootProps {
+  asChild?: boolean;
+  appearance?: Appearance;
+  size?: Size;
+}
+
+export const Button = React.forwardRef<ButtonElement, Readonly<ButtonProps>>(
+  (
+    {
+      asChild,
+      appearance = 'white',
+      className,
+      children,
+      size = '2',
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const classNames = classnames(
+      getSize(size),
+      getAppearance(appearance),
+      'inline-flex items-center justify-center border font-medium',
+      className,
+    );
+
+    return asChild ? (
+      <SlotPrimitive.Slot ref={forwardedRef} {...props} className={classNames}>
+        <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>
+      </SlotPrimitive.Slot>
+    ) : (
+      <button ref={forwardedRef} className={classNames} {...props}>
+        {children}
+      </button>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+const getAppearance = (appearance: Appearance | undefined) => {
+  switch (appearance) {
+    case undefined:
+    case 'white':
+      return [
+        'bg-white text-black',
+        'hover:bg-white/90',
+        'focus:ring-2 focus:ring-white/20 focus:outline-none focus:bg-white/90',
+      ];
+    case 'gradient':
+      return [
+        'bg-gradient backdrop-blur-[20px] border-[#34343A]',
+        'hover:bg-gradientHover',
+        'focus:ring-2 focus:ring-white/20 focus:outline-none focus:bg-gradientHover',
+      ];
+    default:
+      unreachable(appearance);
+  }
+};
+
+const getSize = (size: Size | undefined) => {
+  switch (size) {
+    case '1':
+      return '';
+    case undefined:
+    case '2':
+      return 'text-[14px] h-8 px-3 rounded-md gap-2';
+    case '3':
+      return 'text-[14px] h-10 px-4 rounded-md gap-2';
+    case '4':
+      return 'text-base h-11 px-4 rounded-md gap-2';
+    default:
+      unreachable(size);
+  }
+};

package/{base/src/components/code → preview/src/components}/code.tsx

@@ -1,15 +1,11 @@
 import classnames from 'classnames';
 import Highlight, { defaultProps, Language } from 'prism-react-renderer';
 import * as React from 'react';
-import { IconButton } from '../icon-button';
-import { copyTextToClipboard } from '../../utils/copy-text-to-clipboard';
-import { IconClipboard, IconCheck, IconDownload } from '../icons';
-import { Tooltip } from '../tooltip';
 
 interface CodeProps {
   children: any;
   className?: string;
-  language?: string;
+  language?: Language;
 }
 
 const theme = {
@@ -55,11 +51,6 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
   const [isCopied, setIsCopied] = React.useState(false);
   const value = children.trim();
 
-  const file = new File([value], 'template.html', {
-    type: 'text/html',
-  });
-  const url = URL.createObjectURL(file);
-
   return (
     <Highlight
       {...defaultProps}
@@ -70,7 +61,7 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
       {({ tokens, getLineProps, getTokenProps }) => (
         <pre
           className={classnames(
-            'relative my-8 w-full min-w-full max-w-full overflow-auto whitespace-pre rounded-md border border-gray-6 p-4 text-sm backdrop-blur-md',
+            'border-slate-6 relative p-4 w-full items-center overflow-auto whitespace-pre rounded-md border text-sm backdrop-blur-md',
             className,
           )}
           style={{
@@ -80,32 +71,8 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
             boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',
           }}
         >
-          <Tooltip>
-            <Tooltip.Trigger className="absolute top-3 right-3 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-3 right-8 hidden md:block">
-              <a title="Download HTML" href={url} download={file.name}>
-                <IconDownload />
-              </a>
-            </Tooltip.Trigger>
-            <Tooltip.Content>Download HTML</Tooltip.Content>
-          </Tooltip>
-
           <div
-            className="absolute right-0 top-0 h-px w-[300px]"
+            className="absolute right-0 top-0 h-px w-[200px]"
             style={{
               background:
                 '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%)',
@@ -117,7 +84,7 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
                 key={i}
                 {...getLineProps({ line, key: i })}
                 className={classnames('whitespace-pre', {
-                  "before:text-gray-11 before:mr-2 before:content-['$']":
+                  "before:text-slate-11 before:mr-2 before:content-['$']":
                     language === 'bash' && tokens.length === 1,
                 })}
               >
@@ -139,7 +106,7 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
             );
           })}
           <div
-            className="absolute left-0 bottom-0 h-px w-[300px]"
+            className="absolute left-0 bottom-0 h-px w-[200px]"
             style={{
               background:
                 '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%)',

package/preview/src/components/heading.tsx

@@ -0,0 +1,114 @@
+import * as SlotPrimitive from '@radix-ui/react-slot';
+import classnames from 'classnames';
+import * as React from 'react';
+import { As, unreachable } from '../utils';
+
+export type HeadingSize =
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10';
+export type HeadingColor = 'white' | 'gray';
+export type HeadingWeight = 'medium' | 'bold';
+
+interface HeadingOwnProps {
+  size?: HeadingSize;
+  color?: HeadingColor;
+  weight?: HeadingWeight;
+}
+
+type HeadingProps = As<'h1', 'h2', 'h3', 'h4', 'h5', 'h6'> & HeadingOwnProps;
+
+export const Heading = React.forwardRef<
+  HTMLHeadingElement,
+  Readonly<HeadingProps>
+>(
+  (
+    {
+      as: Tag = 'h1',
+      size = '3',
+      className,
+      color = 'white',
+      children,
+      weight = 'bold',
+      ...props
+    },
+    forwardedRef,
+  ) => (
+    <SlotPrimitive.Slot
+      ref={forwardedRef}
+      className={classnames(
+        className,
+        getSizesClassNames(size),
+        getColorClassNames(color),
+        getWeightClassNames(weight),
+      )}
+      {...props}
+    >
+      <Tag>{children}</Tag>
+    </SlotPrimitive.Slot>
+  ),
+);
+
+const getSizesClassNames = (size: HeadingSize | undefined) => {
+  switch (size) {
+    case '1':
+      return 'text-xs';
+    case '2':
+      return 'text-sm';
+    case undefined:
+    case '3':
+      return 'text-base';
+    case '4':
+      return 'text-lg';
+    case '5':
+      return 'text-xl tracking-[-0.16px]';
+    case '6':
+      return 'text-2xl tracking-[-0.288px]';
+    case '7':
+      return 'text-[28px] leading-[34px] tracking-[-0.416px]';
+    case '8':
+      return 'text-[35px] leading-[42px] tracking-[-0.64px]';
+    case '9':
+      return 'text-6xl leading-[73px] tracking-[-0.896px]';
+    case '10':
+      return [
+        'text-[38px] leading-[46px]',
+        'md:text-[70px] md:leading-[85px] tracking-[-1.024px;]',
+      ];
+    default:
+      return unreachable(size);
+  }
+};
+
+const getColorClassNames = (color: HeadingColor | undefined) => {
+  switch (color) {
+    case 'gray':
+      return 'text-slate-11';
+    case 'white':
+    case undefined:
+      return 'text-slate-12';
+    default:
+      return unreachable(color);
+  }
+};
+
+const getWeightClassNames = (weight: HeadingWeight | undefined) => {
+  switch (weight) {
+    case 'medium':
+      return 'font-medium';
+    case 'bold':
+    case undefined:
+      return 'font-bold';
+    default:
+      return unreachable(weight);
+  }
+};
+
+Heading.displayName = 'Heading';

package/preview/src/components/index.ts

@@ -0,0 +1,7 @@
+export * from './button';
+export * from './code';
+export * from './heading';
+export * from './logo';
+export * from './sidebar';
+export * from './text';
+export * from './topbar';

package/preview/src/components/layout.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { Topbar } from './topbar';
+import { Sidebar } from './sidebar';
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import classnames from 'classnames';
+
+type LayoutElement = React.ElementRef<'div'>;
+type RootProps = React.ComponentPropsWithoutRef<'div'>;
+
+interface LayoutProps extends RootProps {
+  navItems: string[];
+  viewMode?: string;
+  setViewMode?: (viewMode: string) => void;
+}
+
+export const Layout = React.forwardRef<LayoutElement, Readonly<LayoutProps>>(
+  (
+    { className, title, navItems, children, viewMode, setViewMode, ...props },
+    forwardedRef,
+  ) => {
+    return (
+      <>
+        <div className="flex justify-between h-screen">
+          <Sidebar navItems={navItems} />
+          <main className="w-full bg-slate-2">
+            {title && <Topbar title={title} />}
+            <div className="pt-16 relative h-[calc(100vh_-_70px)] overflow-auto">
+              {setViewMode && (
+                <ToggleGroup.Root
+                  className="items-center bg-slate-2 p-1.5 flex gap-1 border border-slate-6 rounded-md absolute top-4 right-4"
+                  type="single"
+                  value={viewMode}
+                  aria-label="View mode"
+                  onValueChange={(value) => {
+                    if (!value) {
+                      return setViewMode('desktop');
+                    }
+                    setViewMode(value);
+                  }}
+                >
+                  <ToggleGroup.Item
+                    className={classnames(
+                      'text-sm text-slate-11 rounded px-1.5 py-0.5',
+                      {
+                        'text-slate-12 bg-slate-3 font-medium':
+                          viewMode === 'desktop',
+                      },
+                    )}
+                    value="desktop"
+                  >
+                    Desktop
+                  </ToggleGroup.Item>
+                  <ToggleGroup.Item
+                    className={classnames(
+                      'text-sm text-slate-11 rounded px-1.5 py-0.5',
+                      {
+                        'text-slate-12 bg-slate-3 font-medium':
+                          viewMode === 'source',
+                      },
+                    )}
+                    value="source"
+                  >
+                    Source
+                  </ToggleGroup.Item>
+                </ToggleGroup.Root>
+              )}
+              <div className="max-w-[600px] mx-auto">{children}</div>
+            </div>
+          </main>
+        </div>
+      </>
+    );
+  },
+);
+
+Layout.displayName = 'Layout';