Adds a TypeScript overview page

src/components/MDX/Sandpack/NavigationBar.tsx

@@ -21,6 +21,7 @@ import {ResetButton} from './ResetButton';
 import {DownloadButton} from './DownloadButton';
 import {IconChevron} from '../../Icon/IconChevron';
 import {Listbox} from '@headlessui/react';
+import {OpenInTypeScriptPlaygroundButton} from './OpenInTypeScriptPlayground';
 
 export function useEvent(fn: any): any {
   const ref = useRef(null);
@@ -182,6 +183,11 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
         <DownloadButton providedFiles={providedFiles} />
         <ResetButton onReset={handleReset} />
         <OpenInCodeSandboxButton />
+        {activeFile.endsWith('.tsx') && (
+          <OpenInTypeScriptPlaygroundButton
+            content={sandpack.files[activeFile]?.code || ''}
+          />
+        )}
       </div>
     </div>
   );

src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {IconNewPage} from '../../Icon/IconNewPage';
+
+export const OpenInTypeScriptPlaygroundButton = (props: {content: string}) => {
+  const contentWithReactImport = `import * as React from 'react';\n\n${props.content}`;
+  return (
+    <a
+      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ml-2 md:ml-1"
+      href={`https://www.typescriptlang.org/play#src=${encodeURIComponent(
+        contentWithReactImport
+      )}`}
+      title="Open in TypeScript Playground"
+      target="_blank"
+      rel="noreferrer">
+      <IconNewPage
+        className="inline ml-1 mr-1 relative top-[1px]"
+        width="1em"
+        height="1em"
+      />
+      <span className="hidden md:block">TypeScript Playground</span>
+    </a>
+  );
+};