fix sandbox in new tab

component/ExerciseDoubleSandbox.tsx

@@ -1,8 +1,10 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/component/UI/tabs';
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactNode } from 'react';
 import { CodeSandbox } from './CodeSandbox';
 import { Badge } from './UI/badge';
-import { Button } from './UI/button';
+import { Button, buttonVariants } from './UI/button';
+import Link from 'next/link';
+import { cn } from '@/util/utils';
 
 export type Exercise = {
   whyItMatters: ReactNode;
@@ -19,32 +21,18 @@ type ExerciseDoubleSandboxProps = {
 export const ExerciseDoubleSandbox = ({
   exercise,
 }: ExerciseDoubleSandboxProps) => {
-  const [isFullScreen, setIsFullScreen] = useState(false);
-
-  useEffect(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === 'Escape') {
-        setIsFullScreen(false);
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, []);
-
   const practiceSandbox = (
     <CodeSandbox
       vizName={exercise.practiceSandbox}
-      height={isFullScreen ? '100%' : '500px'}
+      height={'500px'}
       fileToOpen={exercise.fileToOpen}
     />
   );
 
   const solutionSandbox = (
     <CodeSandbox
       vizName={exercise.solutionSandbox}
-      height={isFullScreen ? '100%' : '500px'}
+      height={'500px'}
       fileToOpen={exercise.fileToOpen}
     />
   );
@@ -68,70 +56,36 @@ export const ExerciseDoubleSandbox = ({
             <TabsTrigger value="practice">Practice</TabsTrigger>
             <TabsTrigger value="solution">Solution</TabsTrigger>
           </TabsList>
+        </div>
+
+        <TabsContent value="practice">
+          <div className="my-4">{practiceSandbox}</div>
           <div className="absolute right-0">
-            <Button
-              size={'sm'}
-              variant={'outline'}
-              onClick={() => setIsFullScreen(true)}
+            <Link
+              className={buttonVariants({ size: 'sm', variant: 'destructive' })}
+              href={'/sandbox?vizName=' + exercise.practiceSandbox}
+              target="_blank"
             >
               Show full screen
-            </Button>
+            </Link>
           </div>
-        </div>
-
-        <TabsContent value="practice">
-          {isFullScreen ? (
-            <FullScreenSandbox
-              setIsFullScreen={setIsFullScreen}
-              sandbox={practiceSandbox}
-            />
-          ) : (
-            <div className="my-4">{practiceSandbox}</div>
-          )}
         </TabsContent>
         <TabsContent value="solution">
-          {isFullScreen ? (
-            <FullScreenSandbox
-              setIsFullScreen={setIsFullScreen}
-              sandbox={solutionSandbox}
-            />
-          ) : (
-            <div className="my-4">{solutionSandbox}</div>
-          )}
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-};
-
-type FullScreenSandboxProps = {
-  sandbox: JSX.Element;
-  setIsFullScreen: (y: boolean) => void;
-};
-
-const FullScreenSandbox = ({
-  sandbox,
-  setIsFullScreen,
-}: FullScreenSandboxProps) => {
-  return (
-    <div className="fixed h-screen inset-0 flex justify-center items-center">
-      <div className="absolute inset-0 w-full h-full bg-white/80" />
-      <div className="relative w-11/12 h-4/5">
-        {sandbox}
-        <div className="w-full mt-2 flex justify-center items-center gap-2">
-          <div className="relative">
-            <Button
-              onClick={() => setIsFullScreen(false)}
-              variant={'destructive'}
+          <div className="my-4">{solutionSandbox}</div>
+          <div className="absolute right-0">
+            <Link
+              className={cn(
+                buttonVariants({ size: 'sm', variant: 'destructive' }),
+                'no-underline'
+              )}
+              href={'/sandbox?vizName=' + exercise.solutionSandbox}
+              target="_blank"
             >
-              Leave Fullscreen mode
-            </Button>
-            <span className="absolute w-96 ml-2 text-gray-500 text-xs mt-3">
-              You can also press <code>Esc</code>
-            </span>
+              Show full screen
+            </Link>
           </div>
-        </div>
-      </div>
+        </TabsContent>
+      </Tabs>
     </div>
   );
 };

pages/sandbox.tsx

@@ -0,0 +1,20 @@
+import { CodeSandbox } from '@/component/CodeSandbox';
+import { useRouter } from 'next/router';
+
+export default function Home() {
+  const router = useRouter();
+  const { vizName } = router.query;
+
+  if (typeof vizName !== 'string') {
+    return null;
+  }
+
+  return (
+    <div className="fixed h-screen inset-0 flex justify-center items-center">
+      <div className="absolute inset-0 w-full h-full bg-white/80" />
+      <div className="relative w-11/12 h-full py-4">
+        <CodeSandbox vizName={vizName} height={'100%'} />
+      </div>
+    </div>
+  );
+}