From c7767483b85f88f38259de1423ac94bd0486ac8c Mon Sep 17 00:00:00 2001 From: Saket Aryan <94069182+whysosaket@users.noreply.github.com> Date: Tue, 24 Sep 2024 22:16:26 +0530 Subject: [PATCH 1/2] Added Subscription Feature --- .gitignore | 3 + my-app/src/App.jsx | 13 ++- my-app/src/components/Newsletter.jsx | 13 ++- my-app/src/components/Subscribe.jsx | 128 +++++++++++++++++++++++++++ my-app/src/index.css | 17 ++++ my-app/src/pages/About.jsx | 11 +-- my-app/src/pages/Home.jsx | 4 +- my-app/src/site.config.js | 6 +- package-lock.json | 54 +++++++++++ package.json | 5 ++ 10 files changed, 233 insertions(+), 21 deletions(-) create mode 100644 .gitignore create mode 100644 my-app/src/components/Subscribe.jsx create mode 100644 package-lock.json create mode 100644 package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..89d2f6e --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +**/.env +**/.DS_Store +**/node_modules \ No newline at end of file diff --git a/my-app/src/App.jsx b/my-app/src/App.jsx index c2cd1ae..dec0871 100644 --- a/my-app/src/App.jsx +++ b/my-app/src/App.jsx @@ -6,15 +6,24 @@ import Community from "./pages/Community"; import ContactForm from "./pages/Contact"; import Events from "./pages/Events"; import Base from "./layouts/Base"; +import Subscribe from "./components/Subscribe"; +import { useState } from "react"; export default function App() { + const [isVisible, setIsVisible] = useState(false); + + const handleSetVisible = (value)=>{ + setIsVisible(value); + }; + return (
+ {isVisible&&} - } /> - } /> + } /> + } /> } /> } /> } /> diff --git a/my-app/src/components/Newsletter.jsx b/my-app/src/components/Newsletter.jsx index 719a6fe..5b22f7e 100644 --- a/my-app/src/components/Newsletter.jsx +++ b/my-app/src/components/Newsletter.jsx @@ -1,24 +1,23 @@ import React from "react"; -import siteConfig from "../site.config"; -export default function Newsletter() { +export default function Newsletter(props) { return ( + <>

Join our monthly newsletter

- props.handle(true)} > Subscribe - +
+ ); } diff --git a/my-app/src/components/Subscribe.jsx b/my-app/src/components/Subscribe.jsx new file mode 100644 index 0000000..067372a --- /dev/null +++ b/my-app/src/components/Subscribe.jsx @@ -0,0 +1,128 @@ +import React, { useState } from 'react' +import Toastify from "toastify-js"; +import "toastify-js/src/toastify.css"; +import { RxCross2 } from "react-icons/rx"; +import {motion} from "framer-motion"; +import { API_URL } from '../lib/constants'; + +const Subscribe = (props) => { + const [name, setName] = useState(""); + const [email, setEmail] = useState(""); + const [reg, setReg] = useState(""); + + const handleSend = async () => { + if (name === "" || email === "" || reg === "") { + Toastify({ + text: "Form can't be empty!", + duration: 3000, + backgroundColor: "#56ccf2", + stopOnFocus: true, + position: "right", + }).showToast(); + return; + } + + try { + const response = await fetch(`${API_URL}/subscribe/subscribe`, { + method: "POST", + body: JSON.stringify({ + name: name, + email: email, + reg: reg, + }), + headers: { + "Content-type": "application/json; charset=UTF-8", + }, + }); + + if (response.status === 200) { + const result = await response.json(); // Assuming the response is in JSON format + Toastify({ + text: result.message || "Subscription successful!", // Adjust according to your API response + duration: 3000, + backgroundColor: "#56ccf2", + stopOnFocus: true, + position: "right", + }).showToast(); + setName(""); + setEmail(""); + setReg(""); + props.handle(false); + } else { + Toastify({ + text: "Something went wrong!", + duration: 3000, + backgroundColor: "#ff0000", + stopOnFocus: true, + position: "right", + }).showToast(); + } + } catch (err) { + console.error(err); + Toastify({ + text: "An error occurred!", + duration: 3000, + backgroundColor: "#ff0000", + stopOnFocus: true, + position: "right", + }).showToast(); + } + }; + + + return ( +
+ +
+ props.handle(false)} size={32} className="cursor-pointer hover:scale-[1.2] a" /> +
+

Subscribe to Our Newsletter

+
+ + + + +
+ +
+ ) +} + +export default Subscribe \ No newline at end of file diff --git a/my-app/src/index.css b/my-app/src/index.css index 79fd97e..15c52fd 100644 --- a/my-app/src/index.css +++ b/my-app/src/index.css @@ -11,6 +11,23 @@ body{ background-color: #0d1026 } +.a{ + transition: all 0.4s; +} + +html { + overflow: scroll; + overflow-x: hidden; +} +::-webkit-scrollbar { + width: 0; /* Remove scrollbar space */ + background: transparent; /* Optional: just make scrollbar invisible */ +} +/* Optional: show position indicator in red */ +::-webkit-scrollbar-thumb { + background: #131313; +} + @tailwind components; @tailwind utilities; diff --git a/my-app/src/pages/About.jsx b/my-app/src/pages/About.jsx index f2ff839..634c6b3 100644 --- a/my-app/src/pages/About.jsx +++ b/my-app/src/pages/About.jsx @@ -1,8 +1,7 @@ import React from "react"; import GroupMembers from "../assets/images/about2.png"; -import siteConfig from "../site.config"; -const About = () => { +const About = (props) => { return (
diff --git a/my-app/src/pages/Home.jsx b/my-app/src/pages/Home.jsx index 099385e..2df513f 100644 --- a/my-app/src/pages/Home.jsx +++ b/my-app/src/pages/Home.jsx @@ -4,13 +4,13 @@ import Newsletter from "../components/Newsletter"; import Statistics from "../components/Statistics"; import Testimonial from "../components/Testimonial"; -const Home = () => { +const Home = (props) => { return ( <> - + ); }; diff --git a/my-app/src/site.config.js b/my-app/src/site.config.js index 6aa5337..9c075a3 100644 --- a/my-app/src/site.config.js +++ b/my-app/src/site.config.js @@ -15,9 +15,9 @@ const siteConfig = { titleTemplate: "%s - Codex", description: shared.description, stats: { - members: 100, - commits: 2.1, - projects: 35, + members: 120, + commits: 2.3, + projects: 38, workshops: 18, }, newsletterUrl: "https://docs.google.com/forms/d/e/1FAIpQLSdOp_wsPsjwFvxhSRECAxBsUGeL2s4cjJ1SghNLgNPg7f8bHQ/viewform", diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..a8a227f --- /dev/null +++ b/package-lock.json @@ -0,0 +1,54 @@ +{ + "name": "website-frontend", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "react-icons": "^5.3.0" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "license": "MIT", + "peer": true + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "license": "MIT", + "peer": true, + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/react": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..644e5da --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "react-icons": "^5.3.0" + } +} From 0b010406fc86802b59350501880f317beab81694 Mon Sep 17 00:00:00 2001 From: Saket Aryan <94069182+whysosaket@users.noreply.github.com> Date: Tue, 24 Sep 2024 23:44:01 +0530 Subject: [PATCH 2/2] =?UTF-8?q?Bug=20Fix=20=F0=9F=90=9E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- my-app/package-lock.json | 16 ++++++++++++++++ my-app/package.json | 1 + 2 files changed, 17 insertions(+) diff --git a/my-app/package-lock.json b/my-app/package-lock.json index f0b6c72..08a057f 100644 --- a/my-app/package-lock.json +++ b/my-app/package-lock.json @@ -18,6 +18,7 @@ "react-carousel-minimal": "^1.3.4", "react-dom": "^18.1.0", "react-helmet": "^6.1.0", + "react-icons": "^5.3.0", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "react-secure-storage": "^1.2.2", @@ -14043,6 +14044,15 @@ "react": "^16.3.0 || ^17.0.0" } }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -26887,6 +26897,12 @@ } } }, + "react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "requires": {} + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/my-app/package.json b/my-app/package.json index dfc1f57..730fcce 100644 --- a/my-app/package.json +++ b/my-app/package.json @@ -13,6 +13,7 @@ "react-carousel-minimal": "^1.3.4", "react-dom": "^18.1.0", "react-helmet": "^6.1.0", + "react-icons": "^5.3.0", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "react-secure-storage": "^1.2.2",