exercise full screen mode

holtzy · Nov 8, 2024 · fad061e · fad061e
1 parent 3985829
commit fad061e
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 9 deletions.
diff --git a/component/CodeSandbox.tsx b/component/CodeSandbox.tsx
@@ -4,9 +4,13 @@ import React from 'react';
 
 type CodeSandboxProps = {
   vizName: string;
+  height?: string;
 };
 
-export const CodeSandbox = ({ vizName }: CodeSandboxProps) => {
+export const CodeSandbox = ({
+  vizName,
+  height = '500px',
+}: CodeSandboxProps) => {
   const url =
     'https://codesandbox.io/embed/github/holtzy/react-graph-gallery/tree/main/viz/' +
     vizName +
@@ -17,7 +21,7 @@ export const CodeSandbox = ({ vizName }: CodeSandboxProps) => {
       src={url}
       style={{
         width: '100%',
-        height: '500px',
+        height: height,
         border: 'solid',
         borderWidth: 2,
         borderRadius: '4px',

diff --git a/component/ExerciseDoubleSandbox.tsx b/component/ExerciseDoubleSandbox.tsx
@@ -1,7 +1,9 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/component/UI/tabs';
-import { ReactNode } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import { CodeSandbox } from './CodeSandbox';
 import { Badge } from './UI/badge';
+import { Sidenote } from './SideNote';
+import { Button } from './UI/button';
 
 export type Exercise = {
   whyItMatters: ReactNode;
@@ -17,6 +19,20 @@ type ExerciseDoubleSandboxProps = {
 export const ExerciseDoubleSandbox = ({
   exercise,
 }: ExerciseDoubleSandboxProps) => {
+  const [isFullScreen, setIsFullScreen] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        setIsFullScreen(false);
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   return (
     <div>
       <div className="grid grid-cols-2 gap-4 pt-4">
@@ -30,16 +46,50 @@ export const ExerciseDoubleSandbox = ({
         </div>
       </div>
 
-      <Tabs defaultValue="practice" className="">
-        <center>
+      <Tabs defaultValue="practice" className="relative">
+        <div className="flex justify-center items-center">
           <TabsList>
             <TabsTrigger value="practice">Practice</TabsTrigger>
             <TabsTrigger value="solution">Solution</TabsTrigger>
           </TabsList>
-        </center>
+          <div className="absolute right-0">
+            <Button
+              size={'sm'}
+              variant={'outline'}
+              onClick={() => setIsFullScreen(true)}
+            >
+              Show full screen
+            </Button>
+          </div>
+        </div>
+
         <TabsContent value="practice">
-          <div className="full-bleed my-4 max-w-7xl mx-auto">
-            <CodeSandbox vizName={exercise.practiceSandbox} />
+          <div
+            className={
+              isFullScreen
+                ? 'fixed h-screen inset-0 flex justify-center items-center'
+                : 'my-4'
+            }
+          >
+            {isFullScreen && (
+              <div className="absolute inset-0 w-full h-full bg-white/80" />
+            )}
+            <div className={isFullScreen ? 'relative w-4/5 h-4/5' : ''}>
+              <CodeSandbox
+                vizName={exercise.practiceSandbox}
+                height={isFullScreen ? '100%' : '500px'}
+              />
+              {isFullScreen && (
+                <div className="w-full mt-2 flex justify-center">
+                  <Button
+                    onClick={() => setIsFullScreen(false)}
+                    variant={'destructive'}
+                  >
+                    Leave Fullscreen mode
+                  </Button>
+                </div>
+              )}
+            </div>
           </div>
         </TabsContent>
         <TabsContent value="solution">

diff --git a/util/lessonList.tsx b/util/lessonList.tsx
@@ -660,7 +660,7 @@ export const lessonList: Lesson[] = [
     ),
     readTime: 4,
     link: '/course/animation/introduction',
-    status: 'wip',
+    status: 'free',
     moduleId: 'animation',
   },
   {