/preview route

src/App.tsx

@@ -9,6 +9,7 @@ import { EditorPage } from "./pages/editor"
 import { LandingPage } from "./pages/landing"
 import { MyOrdersPage } from "./pages/my-orders"
 import { NewestPage } from "./pages/newest"
+import { PreviewPage } from "./pages/preview"
 import { QuickstartPage } from "./pages/quickstart"
 import { SearchPage } from "./pages/search"
 import { SettingsPage } from "./pages/settings"
@@ -31,6 +32,7 @@ function App() {
         <Route path="/authorize" component={AuthenticatePage} />
         <Route path="/my-orders" component={MyOrdersPage} />
         <Route path="/orders/:orderId" component={ViewOrderPage} />
+        <Route path="/preview" component={PreviewPage} />
         <Route path="/:username" component={UserProfilePage} />
         <Route path="/:author/:snippetName" component={ViewSnippetPage} />
       </Switch>

src/components/ViewSnippetSidebar.tsx

@@ -1,24 +1,8 @@
-import { Link } from "wouter"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import {
-  Code,
-  Monitor,
-  Bot,
-  GitFork,
-  AtSign,
-  Package,
-  Settings,
-  Link as LinkIcon,
-  Copy,
-  Hash,
-  Clock,
-  File,
-} from "lucide-react"
-import { GitHubLogoIcon } from "@radix-ui/react-icons"
-import { cn } from "@/lib/utils"
 import { useCurrentSnippet } from "@/hooks/use-current-snippet"
 import { useToast } from "@/hooks/use-toast"
+import { cn } from "@/lib/utils"
+import { AtSign, Bot, Clock, Code, File, GitFork, Package } from "lucide-react"
+import { Link } from "wouter"
 import { useFilesDialog } from "./dialogs/files-dialog"
 
 export default function ViewSnippetSidebar({
@@ -126,8 +110,18 @@ export default function ViewSnippetSidebar({
       <div className="p-4 border-t border-gray-200 space-y-4">
         <div className="space-y-1">
           <div className="text-xs font-medium">Copy embed code</div>
-          <div className="text-[0.5em] p-2 rounded-sm bg-blue-50 border border-blue-200 cursor-pointer font-mono whitespace-nowrap overflow-hidden text-ellipsis">
-            {`<iframe src="https://snippets.tscircuit.com/embed/seveibar/circuitmodule" width="100%" height="100%"></iframe>`}
+          <div
+            className="text-[0.5em] p-2 rounded-sm bg-blue-50 border border-blue-200 cursor-pointer font-mono whitespace-nowrap overflow-hidden text-ellipsis"
+            onClick={() => {
+              const embedCode = `<iframe src="${window.location.origin}/preview?snippet_id=${snippet?.snippet_id}" width="100%" height="500" frameborder="0"></iframe>`
+              navigator.clipboard.writeText(embedCode)
+              toast({
+                title: "Copied!",
+                description: "Embed code copied to clipboard",
+              })
+            }}
+          >
+            {`<iframe src="${window.location.origin}/preview?snippet_id=${snippet?.snippet_id}" width="100%" height="500" frameborder="0"></iframe>`}
           </div>
         </div>
         <div className="space-y-1">

src/pages/preview.tsx

@@ -0,0 +1,42 @@
+import { PreviewContent } from "@/components/PreviewContent"
+import { useRunTsx } from "@/hooks/use-run-tsx"
+import { useSnippet } from "@/hooks/use-snippet"
+import { useUrlParams } from "@/hooks/use-url-params"
+import { useState } from "react"
+
+export const PreviewPage = () => {
+  const urlParams = useUrlParams()
+  const snippetId = urlParams.snippet_id
+  const { data: snippet } = useSnippet(snippetId)
+  const [manualEditsFileContent, setManualEditsFileContent] = useState("")
+
+  const {
+    message: errorMessage,
+    circuitJson,
+    triggerRunTsx,
+    tsxRunTriggerCount,
+  } = useRunTsx({
+    code: snippet?.code ?? "",
+    type: snippet?.snippet_type,
+  })
+
+  if (!snippet) return null
+
+  return (
+    <div className="w-full h-full">
+      <PreviewContent
+        className="w-full h-full"
+        code={snippet.code}
+        triggerRunTsx={triggerRunTsx}
+        tsxRunTriggerCount={tsxRunTriggerCount}
+        errorMessage={errorMessage}
+        circuitJson={circuitJson}
+        showCodeTab={false}
+        showJsonTab={true}
+        showImportAndFormatButtons={false}
+        manualEditsFileContent={manualEditsFileContent}
+        onManualEditsFileContentChange={setManualEditsFileContent}
+      />
+    </div>
+  )
+}