update: codeplaygroundpage

she-code-africa · Jul 26, 2024 · a4e7d5a · a4e7d5a
1 parent ae0f544
commit a4e7d5a
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 88 deletions.
diff --git a/src/App.js b/src/App.js
@@ -8,6 +8,7 @@ import {
   RoboticsPage,
   GameDevelopment,
   ContactUsPage,
+  CodePlaygroundPage, 
 } from "./pages";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ToastContainer } from "react-toastify";
@@ -32,19 +33,18 @@ function App() {
       }
     }
   }, []);
+
   return (
     <QueryClientProvider client={queryClient}>
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/outreach" element={<OutreachPage />} />
         <Route path="/activities/coding" element={<CodingPage />} />
         <Route path="/activities/robotics" element={<RoboticsPage />} />
-        <Route
-          path="/activities/game-development"
-          element={<GameDevelopment />}
-        />
+        <Route path="/activities/game-development" element={<GameDevelopment />} />
         <Route path="/stem-clubs" element={<StemClubs />} />
         <Route path="/contact-us" element={<ContactUsPage />} />
+        <Route path="/code-playground" element={<CodePlaygroundPage />} />
       </Routes>
       <ToastContainer />
     </QueryClientProvider>

diff --git a/src/components/activities/ReadyToCode.jsx b/src/components/activities/ReadyToCode.jsx
@@ -1,90 +1,12 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import Modal from "react-modal";
-import { FaAngleRight, FaCheck, FaExternalLinkAlt } from "react-icons/fa";
+import { FaAngleRight,} from "react-icons/fa";
 import { starImage } from "../../assets/images";
 
-const CodePlayground = ({ isOpen, onClose }) => {
-  return (
-    <Modal
-      isOpen={isOpen}
-      onRequestClose={onClose}
-      contentLabel="Code Playground"
-      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center overflow-y-auto"
-      overlayClassName=" fixed inset-0 bg-black bg-opacity-50"
-    >
-      <div className="bg-white py-7 lg:px-16 px-5 rounded-lg max-w-[90%] w-full     lg:top-64 top-[400px] md:top-[200px] z-50 relative ">
-        <div className="flex justify-between">
-          <button
-            className="  hover:text-primaryPink transition-all"
-            onClick={onClose}
-          >
-            Back
-          </button>
-          <a
-            href="https://codeplayground.vercel.app/"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-primaryPink transition-all"
-          >
-            <FaExternalLinkAlt />
-          </a>
-        </div>
-        <h2 className="text-2xl md:text-3xl lg:text-4xl mb-4 text-center ">
-          Explore Code Playground
-        </h2>
-        <div className="flex mb-5 lg:justify-center flex-wrap gap-2 w-full">
-          <div className="flex items-center gap-2  ">
-            <span className="text-primaryPink">
-              <FaCheck />
-            </span>
-            <p>HTML: The Building Blocks of Websites</p>
-          </div>
-          <div className="flex items-center gap-2 ">
-            <span className="text-primaryPink">
-              <FaCheck />
-            </span>
-            <p>CSS: Style Your Website Like a Pro</p>
-          </div>
-          <div className="flex items-center gap-2  ">
-            <span className="text-primaryPink">
-              <FaCheck />
-            </span>
-            <p>JavaScript: Bring Your Website to Life</p>
-          </div>
-        </div>
-        <h2 className="font-semibold text-lg my-4">Description</h2>
-        <hr className="border-primaryPink  mb-5" />
-        <p className="mb-10">
-          This Playground allows you to experiment with code without having to
-          set up your own development environment. You can write HTML code to
-          structure the content of your webpage, CSS code to style the
-          appearance of your webpage, and JavaScript code to add interactivity
-          to your webpage. The playground will then execute your code and
-          display the results in a preview pane.
-        </p>
-        <div className="h-[70vh] overflow-y-auto mb-10">
-          <iframe
-            src="https://codeplayground.vercel.app/"
-            style={{ width: "100%", height: "100%", border: "none" }}
-            title="Code Playground"
-          ></iframe>
-        </div>
-      </div>
-    </Modal>
-  );
-};
-
-const ReadyToCode = () => {
-  const [isLightboxOpen, setIsLightboxOpen] = useState(false);
 
-  const openLightbox = () => {
-    setIsLightboxOpen(true);
-  };
 
-  const closeLightbox = () => {
-    setIsLightboxOpen(false);
-  };
+const ReadyToCode = () => {
+
 
   return (
     <section
@@ -105,9 +27,8 @@ const ReadyToCode = () => {
         </p>
         <div className="flex justify-center my-7">
           <Link
-            to="#"
+            to="/code-playground"
             className="text-white capitalize w-full max-w-[250px] h-[53px] rounded-[30px] text-sm flex items-center justify-center bg-primaryPink border-2 border-primaryPink hover:bg-transparent hover:text-primaryPink transition-all gap-2"
-            onClick={openLightbox}
           >
             Click here to explore
             <span className="text-sm flex items-center justify-center w-[24px] h-[24px] rounded-[50%] bg-white text-primaryPink">
@@ -117,7 +38,6 @@ const ReadyToCode = () => {
         </div>
       </div>
       <img src={starImage} alt="" className="max-md:hidden right-64 bottom-16 absolute" />
-      <CodePlayground isOpen={isLightboxOpen} onClose={closeLightbox} />
 
     </section>
   );

diff --git a/src/components/activities/code-playground/index.jsx b/src/components/activities/code-playground/index.jsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { FaCheck, FaExternalLinkAlt } from "react-icons/fa";
+
+const CodePlayground = () => {
+  return (
+    <div className="bg-white py-7 lg:px-16 px-5 rounded-lg max-w-[90%] w-full mx-auto mt-7">
+      <div className="flex justify-between lg:mb-2 mb-10 ">
+        <a
+          href="/activities/coding"
+          className="hover:text-primaryPink transition-all"
+        >
+          Back
+        </a>
+        <a
+          href="https://codeplayground.vercel.app/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="hover:text-primaryPink transition-all"
+        >
+          <FaExternalLinkAlt />
+        </a>
+      </div>
+      <h2 className="text-2xl md:text-3xl lg:text-4xl mb-7 text-center">
+        Explore Code Playground
+      </h2>
+      <div className="flex mb-5 lg:justify-center flex-wrap gap-2 w-full">
+        <div className="flex items-center gap-2">
+          <span className="text-primaryPink">
+            <FaCheck />
+          </span>
+          <p>HTML: The Building Blocks of Websites</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-primaryPink">
+            <FaCheck />
+          </span>
+          <p>CSS: Style Your Website Like a Pro</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-primaryPink">
+            <FaCheck />
+          </span>
+          <p>JavaScript: Bring Your Website to Life</p>
+        </div>
+      </div>
+      <h2 className="font-semibold text-lg my-4">Description</h2>
+      <hr className="border-primaryPink mb-5" />
+      <p className="mb-10">
+        This Playground allows you to experiment with code without having to
+        set up your own development environment. You can write HTML code to
+        structure the content of your webpage, CSS code to style the appearance
+        of your webpage, and JavaScript code to add interactivity to your
+        webpage. The playground will then execute your code and display the
+        results in a preview pane.
+      </p>
+      <div className="h-[70vh] overflow-y-auto mb-10">
+        <iframe
+          src="https://codeplayground.vercel.app/"
+          style={{ width: "100%", height: "100%", border: "none" }}
+          title="Code Playground"
+        ></iframe>
+      </div>
+    </div>
+  );
+};
+
+export default CodePlayground;
diff --git a/src/pages/code-playground/page.jsx b/src/pages/code-playground/page.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { GlobalLayout } from "../../components";
+import CodePlayground from "../../components/activities/code-playground";
+const CodePlaygroundPage = () => {
+  return (
+    <GlobalLayout>
+      <CodePlayground/>
+    </GlobalLayout>
+  );
+};
+
+export default CodePlaygroundPage;
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -5,6 +5,7 @@ import CodingPage from "./activities/coding/page";
 import RoboticsPage from "./activities/robotics/page";
 import GameDevelopment from "./activities/game-development/page";
 import ContactUsPage from "./contact-us/page";
+import CodePlaygroundPage from "./code-playground/page";
 
 export {
   HomePage,
@@ -14,4 +15,5 @@ export {
   RoboticsPage,
   GameDevelopment,
   ContactUsPage,
+  CodePlaygroundPage
 };
diff --git a/src/utils/appData.js b/src/utils/appData.js
@@ -39,6 +39,7 @@ export const navigationMenu = [
         title: "Robotics",
         url: "/activities/robotics",
       },
+
     ],
   },
   {