diff --git a/public/images/Logo.svg b/public/images/Logo.svg new file mode 100644 index 00000000..a570fd4d --- /dev/null +++ b/public/images/Logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 4acabe0a..42c308d5 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -12,5 +12,13 @@ "USERNAME_PASSWORD_NOT_CORRECT": "The username or password you entered is incorrect", "FORGOT_PASSWORD": "Forgot Password?", "REMEMBER_ME": "Remember Me" + }, + "DASHBOARD": + { + "HI":"hi", + "DASHBOARD":"Dashboard", + "MANAGE_USER":"Manage Users", + "COURSE_PLANNER":"Course Planner", + "COHORTS":"Cohorts" } } diff --git a/src/components/Layouts/UserDropdown.tsx b/src/components/Layouts/UserDropdown.tsx deleted file mode 100644 index 87c35813..00000000 --- a/src/components/Layouts/UserDropdown.tsx +++ /dev/null @@ -1,144 +0,0 @@ -'use client' - -// React Imports -import { useRef, useState } from 'react' -import type { MouseEvent } from 'react' - -// Next Imports -import { useRouter } from 'next/navigation' - -// MUI Imports -import { styled } from '@mui/material/styles' -import Badge from '@mui/material/Badge' -import Avatar from '@mui/material/Avatar' -import Popper from '@mui/material/Popper' -import Fade from '@mui/material/Fade' -import Paper from '@mui/material/Paper' -import ClickAwayListener from '@mui/material/ClickAwayListener' -import MenuList from '@mui/material/MenuList' -import Typography from '@mui/material/Typography' -import Divider from '@mui/material/Divider' -import MenuItem from '@mui/material/MenuItem' -import Button from '@mui/material/Button' - -// Styled component for badge content -const BadgeContentSpan = styled('span')({ - width: 8, - height: 8, - borderRadius: '50%', - cursor: 'pointer', - backgroundColor: 'var(--mui-palette-success-main)', - boxShadow: '0 0 0 2px var(--mui-palette-background-paper)' -}) - -const UserDropdown = () => { - // States - const [open, setOpen] = useState(false) - - // Refs - const anchorRef = useRef(null) - - // Hooks - const router = useRouter() - - const handleDropdownOpen = () => { - !open ? setOpen(true) : setOpen(false) - } - - const handleDropdownClose = (event?: MouseEvent | (MouseEvent | TouchEvent), url?: string) => { - if (url) { - router.push(url) - } - - if (anchorRef.current && anchorRef.current.contains(event?.target as HTMLElement)) { - return - } - - setOpen(false) - } - - return ( - <> - } - anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} - className='mis-2' - > - - - - {({ TransitionProps, placement }) => ( - - - handleDropdownClose(e as MouseEvent | TouchEvent)}> - -
- -
- - Admin_name - - Admin -
-
- - handleDropdownClose(e)}> - - My Profile - - handleDropdownClose(e)}> - - Settings - - handleDropdownClose(e)}> - - Pricing - - handleDropdownClose(e)}> - - FAQ - -
- -
- - - - - )} - - - ) -} - -export default UserDropdown diff --git a/src/components/Link.tsx b/src/components/Link.tsx new file mode 100644 index 00000000..3eeda464 --- /dev/null +++ b/src/components/Link.tsx @@ -0,0 +1,225 @@ +// import * as React from 'react'; +// import PropTypes from 'prop-types'; +// import clsx from 'clsx'; +// import { useRouter } from 'next/router'; +// import NextLink from 'next/link'; +// import MuiLink from '@mui/material/Link'; +// import { styled } from '@mui/material/styles'; + +// // Add support for the sx prop for consistency with the other branches. +// const Anchor = styled('a')({}); + +// export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props, ref) { +// const { to, linkAs, href, replace, scroll, shallow, prefetch, locale, ...other } = props; + +// return ( +// +// +// +// ); +// }); + +// NextLinkComposed.propTypes = { +// href: PropTypes.any, +// linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), +// locale: PropTypes.string, +// passHref: PropTypes.bool, +// prefetch: PropTypes.bool, +// replace: PropTypes.bool, +// scroll: PropTypes.bool, +// shallow: PropTypes.bool, +// to: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired, +// }; + +// // A styled version of the Next.js Link component: +// // https://nextjs.org/docs/api-reference/next/link +// const Link = React.forwardRef(function Link(props, ref) { +// const { +// activeClassName = 'active', +// as: linkAs, +// className: classNameProps, +// href, +// noLinkStyle, +// role, // Link don't have roles. +// ...other +// } = props; + +// const router = useRouter(); +// const pathname = typeof href === 'string' ? href : href.pathname; +// const className = clsx(classNameProps, { +// [activeClassName]: router.pathname === pathname && activeClassName, +// }); + +// const isExternal = +// typeof href === 'string' && (href.indexOf('http') === 0 || href.indexOf('mailto:') === 0); + +// if (isExternal) { +// if (noLinkStyle) { +// return ; +// } + +// return ; +// } + +// if (noLinkStyle) { +// return ; +// } + +// return ( +// +// ); +// }); + +// Link.propTypes = { +// activeClassName: PropTypes.string, +// as: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), +// className: PropTypes.string, +// href: PropTypes.any, +// linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), +// noLinkStyle: PropTypes.bool, +// role: PropTypes.string, +// }; + +// export default Link; + + + +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { useRouter } from 'next/router'; +import NextLink from 'next/link'; +import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link'; +import { styled } from '@mui/material/styles'; + +// Add support for the sx prop for consistency with the other branches. +const Anchor: any = styled('a')({}); + +export interface NextLinkComposedProps { + to: string | { pathname: string }; + linkAs?: string | object; + href?: any; + replace?: boolean; + scroll?: boolean; + shallow?: boolean; + prefetch?: boolean; + locale?: string; + passHref?: boolean; + className?: string; +} + +export const NextLinkComposed = React.forwardRef( + function NextLinkComposed(props, ref) { + const { to, linkAs, href, replace, scroll, shallow, prefetch, locale, ...other } = props; + + return ( + + } {...other} /> + + ); + } +); + +// NextLinkComposed.propTypes = { +// href: PropTypes.any, +// linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), +// locale: PropTypes.string, +// passHref: PropTypes.bool, +// prefetch: PropTypes.bool, +// replace: PropTypes.bool, +// scroll: PropTypes.bool, +// shallow: PropTypes.bool, +// to: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired, +// }; + +export interface LinkProps extends MuiLinkProps { + activeClassName?: string; + as?: string | object; + noLinkStyle?: boolean; + role?: string; + href?: any; +} + +// A styled version of the Next.js Link component: +// https://nextjs.org/docs/api-reference/next/link +const Link = React.forwardRef(function Link(props, ref) { + const { + activeClassName = 'active', + as: linkAs, + className: classNameProps, + href, + noLinkStyle, + role, // Link don't have roles. + + ...other + } = props; + + const router = useRouter(); + const pathname = typeof href === 'string' ? href : href?.pathname; + const className = clsx(classNameProps, { + [activeClassName!]: router.pathname === pathname && activeClassName, + }); + + const isExternal = + typeof href === 'string' && (href.indexOf('http') === 0 || href.indexOf('mailto:') === 0); + + if (isExternal) { + if (noLinkStyle) { + return } {...other} />; + } + + return } {...other} />; + } + + if (noLinkStyle) { + return } to={href} {...other} />; + } + + return ( + } + to={href} + {...other} + /> + ); +}); + +// Link.propTypes = { +// activeClassName: PropTypes.string, +// as: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), +// className: PropTypes.string, +// href: PropTypes.any, +// linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), +// noLinkStyle: PropTypes.bool, +// role: PropTypes.string, +// }; + +export default Link; diff --git a/src/components/createEmotionCache.tsx b/src/components/createEmotionCache.tsx new file mode 100644 index 00000000..37fd756c --- /dev/null +++ b/src/components/createEmotionCache.tsx @@ -0,0 +1,5 @@ +import createCache from '@emotion/cache'; + +export default function createEmotionCache() { + return createCache({ key: 'css' }); +} diff --git a/src/components/layouts/FullLayout.tsx b/src/components/layouts/FullLayout.tsx new file mode 100644 index 00000000..a6158692 --- /dev/null +++ b/src/components/layouts/FullLayout.tsx @@ -0,0 +1,94 @@ +import React, { useState } from "react"; +import { + useMediaQuery, + Container, + Box, + ThemeProvider, + createTheme, + Theme, + styled, +} from "@mui/material"; +import Header from "./header/Header"; +import Sidebar from "./sidebar/Sidebar"; +import Footer from "./footer/Footer"; +import * as theme from '../theme/theme'; +import Dashboard from "@/pages/dashboard"; +import profile from "@/pages/profile"; +const MainWrapper = styled("div")(() => ({ + display: "flex", + minHeight: "100vh", + overflow: "hidden", + width: "100%", +})); + +const PageWrapper = styled("div")(({ theme }: { theme: Theme }) => ({ + display: "flex", + flex: "1 1 auto", + overflow: "hidden", + backgroundColor: theme.palette.background.default, + [theme.breakpoints.up("lg")]: { + paddingTop: "64px", + }, + [theme.breakpoints.down("lg")]: { + paddingTop: "64px", + }, +})); + +type RouteKey = '/' | '/manage-users' | '/course-planner' | '/cohorts'; + +const componentMapping: Record = { + "/": Dashboard, + "/manage-users": profile, + "/course-planner": Dashboard, + "/cohorts": Dashboard, +}; + +interface FullLayoutProps { + children?: React.ReactNode; +} + +const FullLayout: React.FC = () => { + const [isSidebarOpen, setSidebarOpen] = useState(true); + const [isMobileSidebarOpen, setMobileSidebarOpen] = useState(false); + const [activeComponent, setActiveComponent] = useState("/"); + + const lgUp = useMediaQuery((theme: any) => theme.breakpoints.up("lg")); + + const ActiveComponent = componentMapping[activeComponent]; + + return ( + + +
setMobileSidebarOpen(true)} + /> + setMobileSidebarOpen(false)} + onMenuItemClick={(href: RouteKey) => setActiveComponent(href)} + /> + + + + + +