diff --git a/components/Layouts/HomeSideBar.tsx b/components/Layouts/HomeSideBar.tsx index fd2cbb3..70f2c13 100644 --- a/components/Layouts/HomeSideBar.tsx +++ b/components/Layouts/HomeSideBar.tsx @@ -1,7 +1,7 @@ const HomeSidebar = (props: Record) => { return ( -
-

Smart SC

+
+

Ssc

@@ -49,7 +49,7 @@ const HomeSidebar = (props: Record) => { -

A powerful, yet easy -to-use application for managing students’ information anywhere

+

A powerful, yet easy -to-use application for managing students’ information anywhere

) } diff --git a/components/Layouts/Input.tsx b/components/Layouts/Input.tsx index 178dcfc..ada9598 100644 --- a/components/Layouts/Input.tsx +++ b/components/Layouts/Input.tsx @@ -1,19 +1,6 @@ import React from 'react'; -interface Props { - className: string; - placeholder: string; - type: string; -} - -const Input = ({ props, ref }: { props: Props; ref: React.RefObject }) => { - return ( - - ); -}; +const Input = React.forwardRef((props, ref) => { + return ; +}) export default Input; diff --git a/components/Layouts/TitleSsc.tsx b/components/Layouts/TitleSsc.tsx new file mode 100644 index 0000000..30d387b --- /dev/null +++ b/components/Layouts/TitleSsc.tsx @@ -0,0 +1,6 @@ +const TiltleSsc = () => { + return ( +

Ssc

+ ) +} +export default TiltleSsc; \ No newline at end of file diff --git a/components/Login.tsx b/components/Login.tsx index ed8549a..f374b23 100644 --- a/components/Login.tsx +++ b/components/Login.tsx @@ -1,67 +1,83 @@ -import Link from 'next/link'; +import Input from "../components/Layouts/Input"; +import React, { useContext, useState } from "react"; +import Link from "next/link"; +import { + IModalContext, + ModalContext, +} from "./state-management/ContextProvider"; +import { useEffect } from "react"; +import SignUpPage from "../pages/auth/register"; -export function Login() { - return ( -
-
- - - - -
- -
-

Welcome back!

-

Enter your login details here below

-
+const LoginPage = () => { + const { + showSignIn, + setShowSignIn, + showSignUp, + setShowSignUp, + }: IModalContext = useContext(ModalContext); -
-
- - -
-
- - -
-
- - Forgot Password? - + return ( + <> + {showSignIn ? ( +
+
+
+

Welcome back !

+

+ Enter your account details here below +

+
+
+

+ User name or email +

+
+ +
+

Password

+
+ +
+
+

Forgot your password?

+
+
+ +
+
+
+ +

+ New to Ssc?  + { + setShowSignIn && setShowSignIn(false); + setShowSignUp && setShowSignUp(true); + }} + className="text-sm text-yellowColor font-bold" + > + SignUp + +   +

+
+
- - -
- New to Scs? {' '} - - Register - -
-
+ ) : showSignUp ? ( + + ) : null} + ); -} +}; +export default LoginPage; diff --git a/components/Modal.tsx b/components/Modal.tsx new file mode 100644 index 0000000..4ca4ce7 --- /dev/null +++ b/components/Modal.tsx @@ -0,0 +1,53 @@ +import React, { useState, ReactNode, useContext } from "react"; +import TitleSsc from "./Layouts/TitleSsc"; +import { + IModalContext, + ModalContext, +} from "./state-management/ContextProvider"; +import Image from "next/image"; + +type Props = { + children?: ReactNode; + modalSize?: string; +}; + +export default function Modal(props: Props) { + const { modalState, setModalState, setShowSignIn }: IModalContext = + useContext(ModalContext); + return ( + <> + {modalState ? ( + <> +
+
+ {/*content*/} +
+
{ + setModalState && setModalState(false), + setShowSignIn && setShowSignIn(true); + }} + > + about us component +
+ {/*header*/} +
+ +
+ {/*body*/} +
{props.children}
+
+
+
+
+ + ) : null} + + ); +} diff --git a/components/Nav.tsx b/components/Nav.tsx index 5176d62..bf1bb89 100644 --- a/components/Nav.tsx +++ b/components/Nav.tsx @@ -1,47 +1,68 @@ -import Link from 'next/link'; - +import Link from "next/link"; +import Modal from "./Modal"; +import React, { useContext, useEffect } from "react"; +import { + IModalContext, + ModalContext, +} from "./state-management/ContextProvider"; +import LoginPage from "./Login"; export function Nav() { + const { modalState, setModalState }: IModalContext = useContext(ModalContext); + useEffect(() => { + setModalState && setModalState(modalState || false); + }, [modalState, setModalState]); return ( - +
+ + + + +
); } diff --git a/components/state-management/ContextProvider.tsx b/components/state-management/ContextProvider.tsx new file mode 100644 index 0000000..3885d34 --- /dev/null +++ b/components/state-management/ContextProvider.tsx @@ -0,0 +1,33 @@ +import { useState, createContext, ReactNode, Dispatch } from "react"; +export interface IModalProps { + children?: ReactNode; +} +export interface IModalContext { + modalState?: boolean; + setModalState?: Dispatch>; + showSignUp?: boolean; + setShowSignUp?: Dispatch>; + showSignIn?: boolean; + setShowSignIn?: Dispatch>; +} +const ModalContext = createContext({}); +export function ContextProvider({ children }: IModalProps) { + const [modalState, setModalState] = useState(false); + const [showSignUp, setShowSignUp] = useState(false); + const [showSignIn, setShowSignIn] = useState(true); + return ( + + {children} + + ); +} +export { ModalContext }; diff --git a/components/state-management/FormContextProvider.tsx b/components/state-management/FormContextProvider.tsx new file mode 100644 index 0000000..e69de29 diff --git a/package.json b/package.json index 170540e..cf7db8a 100644 --- a/package.json +++ b/package.json @@ -11,18 +11,21 @@ "dependencies": { "@headlessui/react": "^1.4.1", "@heroicons/react": "^1.0.4", + "@material-ui/core": "^4.11.4", + "@tailwindcss/custom-forms": "^0.2.1", "chart.js": "^3.5.1", "eslint": "^7.32.0", "eslint-config-next": "^11.1.2", + "mdbreact": "^5.0.2", "next": "11.1.3-canary.0", + "prop-types": "^15.7.2", "react": "^17.0.2", "react-chartjs-2": "^3.0.5", "react-code-input": "^3.10.1", "react-dom": "^17.0.2", "react-feather": "^2.0.9", "react-icons": "^4.2.0", - "react-otp-input": "^2.4.0", - "react-verification-code-input": "^1.2.9" + "reactjs-popup": "^2.0.5" }, "devDependencies": { "@types/node": "^15.14.9", diff --git a/pages/_app.tsx b/pages/_app.tsx index 1e1bc9e..fb55ca2 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,9 +1,14 @@ import "tailwindcss/tailwind.css"; import '../public/app.css' import type { AppProps } from "next/app"; +import { ContextProvider } from "../components/state-management/ContextProvider"; function MyApp({ Component, pageProps }: AppProps) { - return ; + return ( + + + + ) } export default MyApp; diff --git a/pages/_document.tsx b/pages/_document.tsx new file mode 100644 index 0000000..f69d127 --- /dev/null +++ b/pages/_document.tsx @@ -0,0 +1,31 @@ +import Document, { + DocumentContext, + Html, + Head, + Main, + NextScript, + } from 'next/document' + + class MyDocument extends Document { + static async getInitialProps(ctx: DocumentContext) { + const initialProps = await Document.getInitialProps(ctx) + + return initialProps + } + + render() { + return ( + + + + + +
+ + + + ) + } + } + + export default MyDocument; \ No newline at end of file diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx index 19881d8..6ca184e 100644 --- a/pages/auth/login.tsx +++ b/pages/auth/login.tsx @@ -1,57 +1,57 @@ -import { Login } from '../../components/Login'; -import Head from 'next/head'; +import Image from "next/image"; +import React, { useRef, useState } from "react"; +import Link from "next/link"; +import HomeSidebar from "../../components/Layouts/HomeSideBar"; +import { Input } from "@material-ui/core"; +import TitleSsc from "../../components/Layouts/TitleSsc"; -export default function LoginPage() { +const LoginPage = () => { return ( - <> - - Login - -
- -
- +
+ +
+
+ +

Welcome back !

+

Enter your account details here below

+
+
+

User name or email

+
+ +
+

Password

+
+ +
+

Forgot your password?

+
+ +
+
+
+ +

+ New to Ssc?{" "} + + {" "} + Sign up + {" "} +

+
+
+
); -} - -/* const SignUpPage = () => { */ -/* /1* const [currentFile, setCurrentFile] = useState(''); *1/ */ -/* /1* const fileInput = useRef(); *1/ */ - -/* return ( */ -/*
*/ -/* */ -/*
*/ -/*
*/ -/*

Dont't have an account?

*/ -/*
*/ -/*
*/ -/*

Log into Smart SC

*/ -/*

Enter your login details here below

*/ -/*
*/ -/*
*/ -/*
*/ -/* profile icon */ -/* {/1* *1/} */ -/*
*/ -/*
*/ -/* profile icon */ - -/* {/1* *1/} */ -/*
*/ -/*

Forgot your password?

*/ -/*
*/ -/* */ -/* */ -/* {/*Remember me*/ -/*
*/ -/* */ -/*
*/ -/*
*/ -/*
*/ -/*
*/ -/*
*/ -/* ); */ -/* }; */ -/* export default SignUpPage; */ +}; +export default LoginPage; diff --git a/pages/auth/register.tsx b/pages/auth/register.tsx index 754705c..7522583 100644 --- a/pages/auth/register.tsx +++ b/pages/auth/register.tsx @@ -1,95 +1,118 @@ -import Button from '../../components/Layouts/Button'; -import HomeSidebar from '../../components/Layouts/HomeSideBar'; - -/* import Input from '../components/Layouts/Input'; */ - -import Image from 'next/image'; -import { useState } from 'react'; +import Link from "next/link"; +import { useContext, useState } from "react"; +import { + IModalContext, + ModalContext, +} from "../../components/state-management/ContextProvider"; +import Input from "../../components/Layouts/Input"; +import LoginPage from "./login"; const SignUpPage = () => { - const [currentFile, setCurrentFile] = useState(''); - - /* const fileInput = useRef(); */ - + const { + showSignIn, + setShowSignIn, + showSignUp, + setShowSignUp, + }: IModalContext = useContext(ModalContext); return ( -
- -
-
-

Already have an account?

-
-
-

Create an account in Smart SC

-

Enter your account details here below

-
-
-
- profile icon + <> + {showSignUp ? ( +
+
+
+

Register your school

+

+ Enter your account details here below +

+
+
+

First name

+
+ +
+

Username

+
+ +
+ + Account Type + +
+ + +
+

Password

+
+ +
+
- {/* */} +
+

Last name

+
+ +
+

Email address

+
+ +
+ +

Confirm password

+
+ +
+
-
- profile icon + - {/* */} -
-
- profile icon - - {/* */} -
-
- profile icon - - {/* */} -
-
- - {currentFile || 'No file choosen'} -
- -
- -
-
- profile icon - - {/* */} -
-
- profile icon - - {/* */} -
-
- profile icon - - {/* */} -
-
- profile icon - - {/* */} -
+

+ Already have an account?{" "} + { + setShowSignIn && setShowSignIn(true); + setShowSignUp && setShowSignUp(false); + }} + className="text-sm text-yellowColor font-bold" + > + Login + +

-
-
+ ) : showSignIn ? ( + + ) : null} + ); }; diff --git a/pages/index.tsx b/pages/index.tsx index 58b368d..1905967 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,16 +1,14 @@ -import React from 'react'; -import Head from 'next/head'; -import { Nav } from '../components/Nav'; - -import { Hero } from '../components/home/Hero'; -import { Card } from '../components/home/Card'; -import { Aboutus } from '../components/home/Aboutus'; -import { Partners } from '../components/home/Partners'; -import { Why } from '../components/home/Why'; -import { Contactus } from '../components/home/Contactus'; -import { Footer } from '../components/home/Footer'; - +import React from "react"; +import Head from "next/head"; +import { Nav } from "../components/Nav"; +import { Hero } from "../components/home/Hero"; +import { Card } from "../components/home/Card"; +import { Aboutus } from "../components/home/Aboutus"; +import { Partners } from "../components/home/Partners"; +import { Why } from "../components/home/Why"; +import { Contactus } from "../components/home/Contactus"; +import { Footer } from "../components/home/Footer"; export default function Home() { return ( @@ -18,8 +16,6 @@ export default function Home() { Embeded Kernel - -