Merge pull request #26 from zacharyLYH/erick-toPlaygroundArea

Erick to playground area
zacharyLYH · Nov 10, 2023 · 0d45664 · 0d45664
2 parents b8fa4e3 + 76e5e4d
commit 0d45664
Show file tree

Hide file tree

Showing 26 changed files with 742 additions and 129 deletions.
diff --git a/app/code-area/page.tsx b/app/code-area/page.tsx
@@ -9,6 +9,8 @@ import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
 import { cn } from "@/lib/utils";
 import useCodeAreaStore from "@/data-store/code-area-store";
+import { useStepperStore } from "@/data-store/stepper-store";
+import validateUser from "@/lib/validate-user";
 
 type MosaicKey = "EDITOR" | "PREVIEW";
 
@@ -25,69 +27,78 @@ const CodeArea = () => {
     );
     const router = useRouter();
     const { mosaicThemeDark } = useCodeAreaStore();
+    const { email, check, progress, challenge } = useStepperStore();
 
-    return (
-        <div className='h-screen'>
-            <div className='pointer-events-auto absolute inset-0 z-20 bg-white bg-opacity-50 xl:hidden' />
-            <div className='absolute inset-0 z-30 flex items-center justify-center xl:hidden'>
-                <div className='w-3/4 max-w-lg rounded-xl bg-black p-6 shadow-lg'>
-                    <h2 className='mb-4 text-center text-xl font-bold text-white'>
-                        It looks like you&quot;re on a small screen
-                    </h2>
-                    <p className='text-sm font-semibold text-gray-400'>
-                        We hate to be non-inclusive towards phones and tablets,
-                        however we want to provide you with the best experience
-                        possible!
-                    </p>
-                    <div className='flex justify-center'>
-                        <Button
-                            variant='destructive'
-                            className='mt-2'
-                            onClick={() => router.push("/")}
-                        >
-                            Back to main page...
-                        </Button>
+    const onExitHandler = async () => {
+        router.push("/");
+    };
+
+    if (validateUser("Code", email, check, challenge, progress)) {
+        router.push("/unauthorized");
+    } else {
+        return (
+            <div className='h-screen'>
+                <div className='pointer-events-auto absolute inset-0 z-20 bg-white bg-opacity-50 xl:hidden' />
+                <div className='absolute inset-0 z-30 flex items-center justify-center xl:hidden'>
+                    <div className='w-3/4 max-w-lg rounded-xl bg-black p-6 shadow-lg'>
+                        <h2 className='mb-4 text-center text-xl font-bold text-white'>
+                            It looks like you&quot;re on a small screen
+                        </h2>
+                        <p className='text-sm font-semibold text-gray-400'>
+                            We hate to be non-inclusive towards phones and
+                            tablets, however we want to provide you with the
+                            best experience possible!
+                        </p>
+                        <div className='flex justify-center'>
+                            <Button
+                                variant='destructive'
+                                className='mt-2'
+                                onClick={onExitHandler}
+                            >
+                                Back to main page...
+                            </Button>
+                        </div>
                     </div>
                 </div>
+                <Mosaic<MosaicKey>
+                    className={cn(
+                        "mosaic-blueprint-theme",
+                        mosaicThemeDark && "bp4-dark"
+                    )}
+                    value={layout || initialLayout}
+                    onChange={(newLayout) => setLayout(newLayout)}
+                    renderTile={(id, path) => {
+                        switch (id) {
+                            case "EDITOR":
+                                return (
+                                    <MosaicWindow<MosaicKey>
+                                        title='Editor'
+                                        path={path}
+                                    >
+                                        <>
+                                            <Editor />
+                                        </>
+                                    </MosaicWindow>
+                                );
+                            case "PREVIEW":
+                                return (
+                                    <MosaicWindow<MosaicKey>
+                                        title='Preview'
+                                        path={path}
+                                    >
+                                        <>
+                                            <Preview />
+                                        </>
+                                    </MosaicWindow>
+                                );
+                            default:
+                                return <></>; // Return a React Fragment as a fallback
+                        }
+                    }}
+                />
             </div>
-            <Mosaic<MosaicKey>
-                className={cn(
-                    "mosaic-blueprint-theme",
-                    mosaicThemeDark && "bp4-dark"
-                )}
-                value={layout || initialLayout}
-                onChange={(newLayout) => setLayout(newLayout)}
-                renderTile={(id, path) => {
-                    switch (id) {
-                        case "EDITOR":
-                            return (
-                                <MosaicWindow<MosaicKey>
-                                    title='Editor'
-                                    path={path}
-                                >
-                                    <>
-                                        <Editor />
-                                    </>
-                                </MosaicWindow>
-                            );
-                        case "PREVIEW":
-                            return (
-                                <MosaicWindow<MosaicKey>
-                                    title='Preview'
-                                    path={path}
-                                >
-                                    <>
-                                        <Preview />
-                                    </>
-                                </MosaicWindow>
-                            );
-                        default:
-                            return <></>; // Return a React Fragment as a fallback
-                    }
-                }}
-            />
-        </div>
-    );
+        );
+    }
 };
 
 export default CodeArea;
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -0,0 +1,43 @@
+"use client";
+import Link from "next/link";
+import { Navigation } from "@/components/landing/navigation";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export default function NotFound() {
+    const router = useRouter();
+
+    useEffect(() => {
+        const delay = 5000;
+
+        const redirectTimer = setTimeout(() => {
+            router.push("/");
+        }, delay);
+        return () => clearTimeout(redirectTimer);
+    }, [router]);
+
+    return (
+        <main className='mx-auto flex h-screen w-full flex-col overflow-clip bg-gradient-to-b from-[#493b6c] via-[#14243a] to-[#000000]'>
+            <Navigation />
+
+            <section className='m-auto flex max-w-screen-lg flex-col items-center px-4'>
+                <h1 className='mb-8 text-4xl font-bold !leading-[1.208]  text-orange-500 sm:text-[42px] lg:text-[40px] xl:text-5xl'>
+                    404 - Page Not Found
+                </h1>
+                <p className='text-body-color dark:text-dark-6 mb-4 text-base'>
+                    The page you are looking for either does not exist, or you
+                    are not allowed to access it!
+                </p>
+                <p className='text-body-color dark:text-dark-6 mb-14 text-base'>
+                    You should be auto-redirect within the next 5 seconds. If
+                    you are not, click the button below.
+                </p>
+
+                <Link href='/'>
+                    <Button>Return Home</Button>
+                </Link>
+            </section>
+        </main>
+    );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,12 +1,12 @@
 import ScrollToTop from "@/components/ui/back-to-top";
 import { Hero } from "@/components/landing/hero";
-import { TabSection } from "@/components/landing/tabs";
 import { Navigation } from "@/components/landing/navigation";
 import SiteCounter from "@/components/landing/site-counter";
 import AboutTailspin from "@/components/landing/about-tailspin";
 import FAQ from "@/components/landing/faq";
 import Timeline from "@/components/landing/timeline";
 import ThanksPage from "@/components/landing/thanks";
+import StepperCard from "@/components/ui/useCode/StepperCard";
 import RatingBody from "@/components/core/rating-area/rating-component";
 
 export default function Home() {
@@ -24,11 +24,14 @@ export default function Home() {
                     <Hero />
                 </div>
             </section>
-            <section>
+            <section id='about'>
                 <AboutTailspin />
             </section>
-            <section id='tabsSection'>
-                <TabSection />
+            <section
+                id='stepper'
+                className='flex h-screen items-center justify-center'
+            >
+                <StepperCard />
             </section>
             <section className='container'>
                 <div>

diff --git a/app/unauthorized/page.tsx b/app/unauthorized/page.tsx
@@ -0,0 +1,42 @@
+"use client";
+import Link from "next/link";
+import { Navigation } from "@/components/landing/navigation";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export default function NotFound() {
+    const router = useRouter();
+
+    useEffect(() => {
+        const delay = 5000;
+
+        const redirectTimer = setTimeout(() => {
+            router.push("/");
+        }, delay);
+        return () => clearTimeout(redirectTimer);
+    }, [router]);
+
+    return (
+        <main className='mx-auto flex h-screen w-full flex-col overflow-clip bg-gradient-to-b from-[#493b6c] via-[#14243a] to-[#000000]'>
+            <Navigation />
+
+            <section className='m-auto flex max-w-screen-lg flex-col items-center px-4'>
+                <h1 className='mb-8 text-4xl font-bold !leading-[1.208]  text-orange-500 sm:text-[42px] lg:text-[40px] xl:text-5xl'>
+                    401 - Page Not Authorized
+                </h1>
+                <p className='text-body-color dark:text-dark-6 mb-4 text-base'>
+                    The page you are attempting to look at requires you to have
+                    proper authorization
+                </p>
+                <p className='text-body-color dark:text-dark-6 mb-14 text-base'>
+                    You should be auto-redirect within the next 5 seconds. If
+                    you are not, click the button below.
+                </p>
+                <Link href='/'>
+                    <Button>Return Home</Button>
+                </Link>
+            </section>
+        </main>
+    );
+}
diff --git a/components/core/editor.tsx b/components/core/editor.tsx
@@ -9,12 +9,14 @@ import useCodeAreaStore from "@/data-store/code-area-store";
 import { Button } from "../ui/button";
 import StaticPrompt from "./target-image";
 import LandingPageChallengeCode from "../landing/test-challenges/challenge-code";
+import { useStepperStore } from "@/data-store/stepper-store";
 
 const Editor = () => {
     const { code, setCode } = useSessionStore();
     const { aceEditorTheme, fontSize, tabSize } = useCodeAreaStore();
     const [AceEditor, setAceEditor] = useState<typeof ReactAce>();
     const [targetImage, toggleTargetImage] = useState(false);
+    const { challenge } = useStepperStore();
 
     useEffect(() => {
         const loadAce = async () => {
@@ -58,7 +60,7 @@ const Editor = () => {
                 </div>
             </div>
             {targetImage ? (
-                <StaticPrompt code={LandingPageChallengeCode("helloWorld")} />
+                <StaticPrompt code={LandingPageChallengeCode(challenge)} />
             ) : (
                 AceEditor && (
                     <AceEditor

diff --git a/components/landing/about-tailspin.tsx b/components/landing/about-tailspin.tsx
@@ -51,7 +51,7 @@ const AboutTailspin = () => {
                             We&apos;ll provide you with a Target image, you
                             write code to reproduce that image.
                             <br />
-                            <Link href='#tabsSection'>
+                            <Link href='#stepper'>
                                 <Button className='mt-2 bg-orange-500'>
                                     Try it out! 🏃
                                 </Button>
@@ -112,7 +112,7 @@ const AboutTailspin = () => {
                             discover and meet like-minded people, and maybe even
                             hire/get hired 😉.
                             <br />
-                            <Link href='#tabsSection'>
+                            <Link href='#stepper'>
                                 <Button className='mt-2 bg-orange-500'>
                                     Leaderboard{" "}
                                     <BarChartBig className='ml-2 h-4 w-4' />

diff --git a/components/landing/hero.tsx b/components/landing/hero.tsx
@@ -29,7 +29,7 @@ export const Hero = () => {
                 <HeroSubText />
             </div>
             <a
-                href='#tabsSection'
+                href='#stepper'
                 className='flex cursor-pointer flex-col items-center'
             >
                 <div className='h-12 w-12 animate-bounce'>

diff --git a/components/landing/navigation.tsx b/components/landing/navigation.tsx
@@ -7,18 +7,20 @@ import { TailspinLogo } from "../ui/spinning-logo";
 export const Navigation = () => {
     return (
         <nav className='fixed top-0 z-[1] flex h-16 w-full items-center'>
-            <Link href='#landing'>
+            <Link href='/#landing'>
                 <div className='mx-5'>
                     <TailspinLogo outershellClassname='animate-spin h-10 w-10' />
                 </div>
             </Link>
-            <Button
-                variant='ghost'
-                className='mx-3 font-semibold text-muted-foreground'
-            >
-                About
-            </Button>
-            <Link href='#tabsSection'>
+            <Link href='/#about'>
+                <Button
+                    variant='ghost'
+                    className='mx-3 font-semibold text-muted-foreground'
+                >
+                    About
+                </Button>
+            </Link>
+            <Link href='/#stepper'>
                 <Button
                     variant='ghost'
                     className='mx-3 font-semibold text-muted-foreground'

diff --git a/components/landing/tabs.tsx b/components/landing/tabs.tsx