diff --git a/src/Routers.jsx b/src/Routers.jsx index 033f698..a123010 100644 --- a/src/Routers.jsx +++ b/src/Routers.jsx @@ -68,6 +68,7 @@ import FamilyWalletPage from "./views/FamilyWalletPage"; import FamilyActivitiesPage from "./views/FamilyActivitiesPage"; import FamGamesPage from "./views/FamGamesPage"; import FamilyRoutesPage from "./views/FamilyRoutesPage"; +import PromoPage from "./views/PromoPage"; export default function Routers() { return ( @@ -93,6 +94,7 @@ export default function Routers() { } /> } /> } /> + } /> ) : ( <> diff --git a/src/components/AuthPages/Promo/Promo.jsx b/src/components/AuthPages/Promo/Promo.jsx new file mode 100644 index 0000000..08227ff --- /dev/null +++ b/src/components/AuthPages/Promo/Promo.jsx @@ -0,0 +1,134 @@ +import React, {useState, useEffect} from 'react' +import { Link, useParams } from "react-router-dom"; + +import PromoPageLayout from '../PromoPageLayout' +import InputCom from "../../Helpers/Inputs/InputCom"; +import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png"; +import LoadingSpinner from '../../../components/Spinners/LoadingSpinner' + +export default function Promo() { + + const {name, id} = useParams() + // console.log(name, id) + + const email = `${name}@${name}.com`.toLowerCase() + + const [requestStatus, setRequestStatus] = useState({loading:true, data:[]}) + + const [completeSignUp, setCompleteSignUp] = useState({loading:false, status:false, message: ''}); + + const [showPassword, setShowPassword] = useState(false); + + const [password, setPassword] = useState(""); + + const handlePassword = (e) => { + setPassword(e.target.value); + }; + + // To Show and Hide Password + const togglePasswordVisibility = () => { + setShowPassword(!showPassword); + }; + + const handleContinue = () => { + setCompleteSignUp({loading:true, status:false, message: ''}) + if(!password){ + setCompleteSignUp({loading:false, status:false, message: 'Please Enter Password'}) + return setTimeout(()=>{ + setCompleteSignUp({loading:false, status:false, message: ''}) + },2000) + } + setTimeout(()=>{ + setCompleteSignUp({loading:false, status:true, message: ''}) + },2000) + } + + useEffect(()=>{ + const timer = setTimeout(()=>{ + setRequestStatus({loading:false, data:[]}) + },2000) + return () => clearTimeout(timer) + },[]) + + return ( + +
+
+ + wrenchboard + +
+ {requestStatus.loading ? +
+ +

Loading...

+

please do not refresh

+
+ : +
+
+
+
+ +
+ +
+ +
+ + {completeSignUp.message && ( +
+ {completeSignUp.message} +
+ )} + +
+ +
+
+
+
+ } +
+ + ) +} diff --git a/src/components/AuthPages/PromoPageLayout.jsx b/src/components/AuthPages/PromoPageLayout.jsx new file mode 100644 index 0000000..1df1f48 --- /dev/null +++ b/src/components/AuthPages/PromoPageLayout.jsx @@ -0,0 +1,80 @@ +import React, { useContext } from "react"; +import { Link } from "react-router-dom"; +import { localImgLoad } from "../../lib"; + +import DarkModeContext from "../Contexts/DarkModeContext"; + +export default function PromoPageLayout({ children }) { + const bgImg = localImgLoad("images/left-wrenchboard.jpg"); + const bgImgNig = localImgLoad("images/wrench-home-back-nigeria.jpg"); + const bgImgCom = localImgLoad("images/wrench-home-back-common.jpg"); + + const { countryMode } = useContext(DarkModeContext); + + return ( +
+ +
+ {/* */} +
+
+
+ {children && children} +
+
+
+
+ +
+
+ +

+ + © {new Date().getFullYear()} - + + + WrenchBoard + {" "} +

+
+
+ +
+ ); +} diff --git a/src/views/PromoPage.jsx b/src/views/PromoPage.jsx new file mode 100644 index 0000000..55184c6 --- /dev/null +++ b/src/views/PromoPage.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import Promo from '../components/AuthPages/Promo/Promo' + +export default function PromoPage() { + return ( + <> + + + ) +}