Skip to content

Commit 57cddb1

Browse files
EseAlliEseAlli
authored
Merge pull request #23 from she-code-africa/Code_Playground
update: codeplaygroundpage
2 parents 61f45cb + 308d94a commit 57cddb1

File tree

7 files changed

+92
-92
lines changed

7 files changed

+92
-92
lines changed

‎src/App.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
RoboticsPage,
99
GameDevelopment,
1010
ContactUsPage,
11+
CodePlaygroundPage,
1112
} from "./pages";
1213
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
1314
import { ToastContainer } from "react-toastify";
@@ -32,19 +33,18 @@ function App() {
3233
}
3334
}
3435
}, []);
36+
3537
return (
3638
<QueryClientProvider client={queryClient}>
3739
<Routes>
3840
<Route path="/" element={<HomePage />} />
3941
<Route path="/outreach" element={<OutreachPage />} />
4042
<Route path="/activities/coding" element={<CodingPage />} />
4143
<Route path="/activities/robotics" element={<RoboticsPage />} />
42-
<Route
43-
path="/activities/game-development"
44-
element={<GameDevelopment />}
45-
/>
44+
<Route path="/activities/game-development" element={<GameDevelopment />} />
4645
<Route path="/stem-clubs" element={<StemClubs />} />
4746
<Route path="/contact-us" element={<ContactUsPage />} />
47+
<Route path="/code-playground" element={<CodePlaygroundPage />} />
4848
</Routes>
4949
<ToastContainer />
5050
</QueryClientProvider>

‎src/components/activities/ReadyToCode.jsx‎

Lines changed: 5 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,12 @@
1-
import React, { useState } from "react";
1+
import React from "react";
22
import { Link } from "react-router-dom";
3-
import Modal from "react-modal";
4-
import { FaAngleRight, FaCheck, FaExternalLinkAlt } from "react-icons/fa";
3+
import { FaAngleRight,} from "react-icons/fa";
54
import { starImage } from "../../assets/images";
65

7-
const CodePlayground = ({ isOpen, onClose }) => {
8-
return (
9-
<Modal
10-
isOpen={isOpen}
11-
onRequestClose={onClose}
12-
contentLabel="Code Playground"
13-
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center overflow-y-auto"
14-
overlayClassName=" fixed inset-0 bg-black bg-opacity-50"
15-
>
16-
<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 ">
17-
<div className="flex justify-between">
18-
<button
19-
className=" hover:text-primaryPink transition-all"
20-
onClick={onClose}
21-
>
22-
Back
23-
</button>
24-
<a
25-
href="https://codeplayground.vercel.app/"
26-
target="_blank"
27-
rel="noopener noreferrer"
28-
className="hover:text-primaryPink transition-all"
29-
>
30-
<FaExternalLinkAlt />
31-
</a>
32-
</div>
33-
<h2 className="text-2xl md:text-3xl lg:text-4xl mb-4 text-center ">
34-
Explore Code Playground
35-
</h2>
36-
<div className="flex mb-5 lg:justify-center flex-wrap gap-2 w-full">
37-
<div className="flex items-center gap-2 ">
38-
<span className="text-primaryPink">
39-
<FaCheck />
40-
</span>
41-
<p>HTML: The Building Blocks of Websites</p>
42-
</div>
43-
<div className="flex items-center gap-2 ">
44-
<span className="text-primaryPink">
45-
<FaCheck />
46-
</span>
47-
<p>CSS: Style Your Website Like a Pro</p>
48-
</div>
49-
<div className="flex items-center gap-2 ">
50-
<span className="text-primaryPink">
51-
<FaCheck />
52-
</span>
53-
<p>JavaScript: Bring Your Website to Life</p>
54-
</div>
55-
</div>
56-
<h2 className="font-semibold text-lg my-4">Description</h2>
57-
<hr className="border-primaryPink mb-5" />
58-
<p className="mb-10">
59-
This Playground allows you to experiment with code without having to
60-
set up your own development environment. You can write HTML code to
61-
structure the content of your webpage, CSS code to style the
62-
appearance of your webpage, and JavaScript code to add interactivity
63-
to your webpage. The playground will then execute your code and
64-
display the results in a preview pane.
65-
</p>
66-
<div className="h-[70vh] overflow-y-auto mb-10">
67-
<iframe
68-
src="https://codeplayground.vercel.app/"
69-
style={{ width: "100%", height: "100%", border: "none" }}
70-
title="Code Playground"
71-
></iframe>
72-
</div>
73-
</div>
74-
</Modal>
75-
);
76-
};
77-
78-
const ReadyToCode = () => {
79-
const [isLightboxOpen, setIsLightboxOpen] = useState(false);
806

81-
const openLightbox = () => {
82-
setIsLightboxOpen(true);
83-
};
847

85-
const closeLightbox = () => {
86-
setIsLightboxOpen(false);
87-
};
8+
const ReadyToCode = () => {
9+
8810

8911
return (
9012
<section
@@ -105,9 +27,8 @@ const ReadyToCode = () => {
10527
</p>
10628
<div className="flex justify-center my-7">
10729
<Link
108-
to="#"
30+
to="/code-playground"
10931
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"
110-
onClick={openLightbox}
11132
>
11233
Click here to explore
11334
<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 = () => {
11738
</div>
11839
</div>
11940
<img src={starImage} alt="" className="max-md:hidden right-64 bottom-16 absolute" />
120-
<CodePlayground isOpen={isLightboxOpen} onClose={closeLightbox} />
12141

12242
</section>
12343
);

‎src/components/activities/code-playground/index.jsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from "react";
2+
import { FaCheck, FaExternalLinkAlt } from "react-icons/fa";
3+
4+
const CodePlayground = () => {
5+
return (
6+
<div className="bg-white py-7 lg:px-16 px-5 rounded-lg max-w-[90%] w-full mx-auto mt-7">
7+
<div className="flex justify-between lg:mb-2 mb-10 ">
8+
<a
9+
href="/activities/coding"
10+
className="hover:text-primaryPink transition-all"
11+
>
12+
Back
13+
</a>
14+
<a
15+
href="https://codeplayground.vercel.app/"
16+
target="_blank"
17+
rel="noopener noreferrer"
18+
className="hover:text-primaryPink transition-all"
19+
>
20+
<FaExternalLinkAlt />
21+
</a>
22+
</div>
23+
<h2 className="text-2xl md:text-3xl lg:text-4xl mb-7 text-center">
24+
Explore Code Playground
25+
</h2>
26+
<div className="flex mb-5 lg:justify-center flex-wrap gap-2 w-full">
27+
<div className="flex items-center gap-2">
28+
<span className="text-primaryPink">
29+
<FaCheck />
30+
</span>
31+
<p>HTML: The Building Blocks of Websites</p>
32+
</div>
33+
<div className="flex items-center gap-2">
34+
<span className="text-primaryPink">
35+
<FaCheck />
36+
</span>
37+
<p>CSS: Style Your Website Like a Pro</p>
38+
</div>
39+
<div className="flex items-center gap-2">
40+
<span className="text-primaryPink">
41+
<FaCheck />
42+
</span>
43+
<p>JavaScript: Bring Your Website to Life</p>
44+
</div>
45+
</div>
46+
<h2 className="font-semibold text-lg my-4">Description</h2>
47+
<hr className="border-primaryPink mb-5" />
48+
<p className="mb-10">
49+
This Playground allows you to experiment with code without having to
50+
set up your own development environment. You can write HTML code to
51+
structure the content of your webpage, CSS code to style the appearance
52+
of your webpage, and JavaScript code to add interactivity to your
53+
webpage. The playground will then execute your code and display the
54+
results in a preview pane.
55+
</p>
56+
<div className="h-[70vh] overflow-y-auto mb-10">
57+
<iframe
58+
src="https://codeplayground.vercel.app/"
59+
style={{ width: "100%", height: "100%", border: "none" }}
60+
title="Code Playground"
61+
></iframe>
62+
</div>
63+
</div>
64+
);
65+
};
66+
67+
export default CodePlayground;

‎src/index.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,11 @@ import App from "./App";
55
import reportWebVitals from "./reportWebVitals";
66
import { BrowserRouter as Router } from "react-router-dom";
77
import ReactGA from "react-ga4";
8-
import Modal from "react-modal";
98

109
// Initialize Google Analytics
1110
ReactGA.initialize(process.env.REACT_APP_G_TAG_ID);
1211

13-
// Set the app element for react-modal
14-
Modal.setAppElement('#root');
12+
1513

1614
const root = ReactDOM.createRoot(document.getElementById("root"));
1715

‎src/pages/code-playground/page.jsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from "react";
2+
import { GlobalLayout } from "../../components";
3+
import CodePlayground from "../../components/activities/code-playground";
4+
const CodePlaygroundPage = () => {
5+
return (
6+
<GlobalLayout>
7+
<CodePlayground/>
8+
</GlobalLayout>
9+
);
10+
};
11+
12+
export default CodePlaygroundPage;

‎src/pages/index.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import CodingPage from "./activities/coding/page";
55
import RoboticsPage from "./activities/robotics/page";
66
import GameDevelopment from "./activities/game-development/page";
77
import ContactUsPage from "./contact-us/page";
8+
import CodePlaygroundPage from "./code-playground/page";
89

910
export {
1011
HomePage,
@@ -14,4 +15,5 @@ export {
1415
RoboticsPage,
1516
GameDevelopment,
1617
ContactUsPage,
18+
CodePlaygroundPage
1719
};

‎src/utils/appData.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export const navigationMenu = [
3333
title: "Robotics",
3434
url: "/activities/robotics",
3535
},
36+
3637
],
3738
},
3839
{

0 commit comments

Comments
 (0)