Pulled Ombase's changes till now.
This commit is contained in:
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
# React + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import react from 'eslint-plugin-react'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
files: ['**/*.{js,jsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
ecmaFeatures: { jsx: true },
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
settings: { react: { version: '18.3' } },
|
||||||
|
plugins: {
|
||||||
|
react,
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...js.configs.recommended.rules,
|
||||||
|
...react.configs.recommended.rules,
|
||||||
|
...react.configs['jsx-runtime'].rules,
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react/jsx-no-target-blank': 'off',
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + React</title>
|
||||||
|
<link
|
||||||
|
href="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Generated
+5598
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "frontend",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@reduxjs/toolkit": "^2.2.7",
|
||||||
|
"flowbite": "^2.5.1",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"react-icons": "^5.3.0",
|
||||||
|
"react-player": "^2.16.0",
|
||||||
|
"react-redux": "^9.1.2",
|
||||||
|
"react-router-dom": "^6.26.1",
|
||||||
|
"socket.io-client": "^4.7.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.9.0",
|
||||||
|
"@types/react": "^18.3.3",
|
||||||
|
"@types/react-dom": "^18.3.0",
|
||||||
|
"@vitejs/plugin-react": "^4.3.1",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"eslint": "^9.9.0",
|
||||||
|
"eslint-plugin-react": "^7.35.0",
|
||||||
|
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.9",
|
||||||
|
"globals": "^15.9.0",
|
||||||
|
"postcss": "^8.4.45",
|
||||||
|
"tailwindcss": "^3.4.10",
|
||||||
|
"vite": "^5.4.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 143 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 510 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 510 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 779 KiB |
@@ -0,0 +1,73 @@
|
|||||||
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
import "./App.css";
|
||||||
|
import Navbar from "./components/Navbar";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import { userSliceActions } from "./store/userSlice";
|
||||||
|
|
||||||
|
import { Outlet } from "react-router-dom";
|
||||||
|
import { BACKEND_URL } from "./constants";
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const user = useSelector((store) => store.user);
|
||||||
|
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
const loader = useSelector((store) => store.loader);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function initialiseUser() {
|
||||||
|
if (user.role == "unloggeduser") {
|
||||||
|
const responce = await fetch(`${BACKEND_URL}/api/v1/getuser`, {
|
||||||
|
method: "GET",
|
||||||
|
credentials: "include",
|
||||||
|
});
|
||||||
|
|
||||||
|
const userData = await responce.json();
|
||||||
|
|
||||||
|
//console.log("User Datae is ", userData);
|
||||||
|
|
||||||
|
dispatch(userSliceActions.addUser(userData.data));
|
||||||
|
|
||||||
|
//console.log("Updated User is : ", user);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
initialiseUser();
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="w-full h-auto flex-col relative">
|
||||||
|
<Navbar />
|
||||||
|
<Outlet />
|
||||||
|
<div
|
||||||
|
className={`${
|
||||||
|
loader ? "block" : "hidden"
|
||||||
|
} absolute w-full h-full bg-black opacity-50 top-0 left-0`}
|
||||||
|
>
|
||||||
|
<div class="text-center my-96">
|
||||||
|
<div role="status">
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="inline w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-blue-900"
|
||||||
|
viewBox="0 0 100 101"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||||
|
fill="currentFill"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span class="sr-only">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Container = ({ children }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="w-full h-auto">{children}</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Container;
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Message = ({ message }) => {
|
||||||
|
const date = new Date();
|
||||||
|
return (
|
||||||
|
<div className="w-auto h-auto bg-gray-200 rounded-md text-start p-3 mx-4">
|
||||||
|
<p className="">{message}</p>
|
||||||
|
<p className="text-end text-sm ">
|
||||||
|
{date.getDate()}/{date.getMonth()}/{date.getFullYear()}{" "}
|
||||||
|
{date.toLocaleTimeString()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Message;
|
||||||
@@ -0,0 +1,206 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { BACKEND_URL } from "../constants";
|
||||||
|
|
||||||
|
const Navbar = () => {
|
||||||
|
const user = useSelector((store) => store.user);
|
||||||
|
|
||||||
|
//console.log("User is : ", user);
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const handleLogOut = async () => {
|
||||||
|
const responce = await fetch(`${BACKEND_URL}/api/v1/logout`, {
|
||||||
|
method: "Get",
|
||||||
|
credentials: "include",
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await responce.json();
|
||||||
|
|
||||||
|
//console.log("User Logged out data is : ", data);
|
||||||
|
|
||||||
|
if (data.success == true) {
|
||||||
|
navigate("/user/login");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<nav className="bg-white border-gray-200 dark:bg-gray-900">
|
||||||
|
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
className="flex items-center space-x-3 rtl:space-x-reverse"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/images/logo.jpg"
|
||||||
|
className="h-9 rounded-full"
|
||||||
|
alt="Flowbite Logo"
|
||||||
|
/>
|
||||||
|
<span className="self-center text-xl font-bold whitespace-nowrap dark:text-white">
|
||||||
|
MentorFlux
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<div className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex text-sm bg-gray-800 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
|
||||||
|
id="user-menu-button"
|
||||||
|
aria-expanded="false"
|
||||||
|
data-dropdown-toggle="user-dropdown"
|
||||||
|
data-dropdown-placement="bottom"
|
||||||
|
>
|
||||||
|
<span className="sr-only">Open user menu</span>
|
||||||
|
<img
|
||||||
|
className="w-8 h-8 rounded-full"
|
||||||
|
src={`${user?.avatar}`}
|
||||||
|
alt="user photo"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
{/* <!-- Dropdown menu --> */}
|
||||||
|
<div
|
||||||
|
className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600 cursor-pointer"
|
||||||
|
id="user-dropdown"
|
||||||
|
>
|
||||||
|
{user?.name !== "Unloggedin User" && (
|
||||||
|
<div className="px-4 py-3">
|
||||||
|
<span className="block text-sm text-gray-900 dark:text-white">
|
||||||
|
{user?.name}
|
||||||
|
</span>
|
||||||
|
<span className="block text-sm text-gray-500 truncate dark:text-gray-400">
|
||||||
|
{user?.email}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<ul className="py-2" aria-labelledby="user-menu-button">
|
||||||
|
{user?.name !== "Unloggedin User" && (
|
||||||
|
<>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to={"/user/dashboard"}
|
||||||
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
Dashboard
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to={"/user/dashboard/settings"}
|
||||||
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
Settings
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
Earnings
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{user?.name === "Unloggedin User" ? (
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to={"/user/login"}
|
||||||
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
Sign In
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
) : (
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
onClick={handleLogOut}
|
||||||
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
Sign out
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
data-collapse-toggle="navbar-user"
|
||||||
|
type="button"
|
||||||
|
className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
||||||
|
aria-controls="navbar-user"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
|
<span className="sr-only">Open main menu</span>
|
||||||
|
<svg
|
||||||
|
className="w-5 h-5"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 17 14"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M1 1h15M1 7h15M1 13h15"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
|
||||||
|
id="navbar-user"
|
||||||
|
>
|
||||||
|
<ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to={"/"}
|
||||||
|
className="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
|
||||||
|
aria-current="page"
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||||
|
>
|
||||||
|
About
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||||
|
>
|
||||||
|
Services
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||||
|
>
|
||||||
|
Pricing
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||||
|
>
|
||||||
|
Contact
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navbar;
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Notification = ({ notification }) => {
|
||||||
|
let timeStringToDayName = (dateStr) => {
|
||||||
|
// for getting day name by time string
|
||||||
|
// const dateStr = "2024-09-26T04:31:50.646+00:00";
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
const dayName = date.toLocaleDateString("en-US", { weekday: "long" });
|
||||||
|
//console.log(dayName);
|
||||||
|
return dayName;
|
||||||
|
};
|
||||||
|
|
||||||
|
let timeStringtoRealTime = (utcDateStr) => {
|
||||||
|
// for converting the to get time in am or pm
|
||||||
|
//const utcDateStr = "2024-09-26T04:31:50.646+00:00";
|
||||||
|
const date = new Date(utcDateStr);
|
||||||
|
// India TimeZone is Asia/Kolkata, which is UTC+5:30
|
||||||
|
const options = {
|
||||||
|
timeZone: "Asia/Kolkata",
|
||||||
|
hour: "numeric",
|
||||||
|
minute: "numeric",
|
||||||
|
second: "numeric",
|
||||||
|
hour12: true,
|
||||||
|
year: "numeric",
|
||||||
|
month: "long",
|
||||||
|
day: "numeric",
|
||||||
|
};
|
||||||
|
|
||||||
|
const istDate = date.toLocaleString("en-US", options);
|
||||||
|
//console.log(istDate); // Output: "September 26, 2024, 10:01:50 AM"
|
||||||
|
return istDate;
|
||||||
|
};
|
||||||
|
|
||||||
|
let { message, timestamp, isRead } = notification;
|
||||||
|
|
||||||
|
const realTimeString = timeStringtoRealTime(timestamp);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="flex items-center justify-between p-4 bg-white shadow rounded-lg"
|
||||||
|
onClick={() => {
|
||||||
|
isRead = true;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<img
|
||||||
|
src="https://placehold.co/40x40"
|
||||||
|
alt="Profile picture of the user who followed you"
|
||||||
|
className="w-10 h-10 rounded-full mr-3"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-900">{message}</p>
|
||||||
|
<p className="text-gray-500">
|
||||||
|
{timeStringToDayName(timestamp)},
|
||||||
|
{realTimeString.substring(21, 26) +
|
||||||
|
" " +
|
||||||
|
realTimeString.substring(30)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<p className="text-gray-500 mr-3">{realTimeString.substring(0, 18)}</p>
|
||||||
|
<span
|
||||||
|
className={`w-3 h-3 bg-blue-600 rounded-full ${isRead && "hidden"}`}
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Notification;
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export const BACKEND_URL = "http://localhost:8000";
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import React, { createContext, useMemo, useContext } from "react";
|
||||||
|
import { io } from "socket.io-client";
|
||||||
|
import { BACKEND_URL } from "../constants";
|
||||||
|
|
||||||
|
const SocketContext = createContext(null);
|
||||||
|
|
||||||
|
export const useSocket = () => {
|
||||||
|
const socket = useContext(SocketContext);
|
||||||
|
return socket;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SocketProvider = (props) => {
|
||||||
|
const socket = useMemo(
|
||||||
|
() =>
|
||||||
|
io(`${BACKEND_URL}`, {
|
||||||
|
withCredentials: true,
|
||||||
|
}),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SocketContext.Provider value={socket}>
|
||||||
|
{props.children}
|
||||||
|
</SocketContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
import { StrictMode } from "react";
|
||||||
|
import { createRoot } from "react-dom/client";
|
||||||
|
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||||
|
import App from "./App.jsx";
|
||||||
|
import "./index.css";
|
||||||
|
import { SocketProvider } from "./context/SocketProvider.jsx";
|
||||||
|
|
||||||
|
import { Provider } from "react-redux";
|
||||||
|
import MentifyStore from "./store/index.js";
|
||||||
|
|
||||||
|
import LoginPage from "./pages/Login/LoginPage.jsx";
|
||||||
|
import SignupPage from "./pages/Login/SignupPage.jsx";
|
||||||
|
import MainUserPanel from "./pages/UserPanel/MainUserPanel.jsx";
|
||||||
|
import ForgetPassword from "./pages/Password/ForgetPassword.jsx";
|
||||||
|
import ResetPassword from "./pages/Password/ResetPassword.jsx";
|
||||||
|
|
||||||
|
import HomePage from "./pages/Home/HomePage.jsx";
|
||||||
|
import Dashboard from "./pages/UserPanel/Dashboard.jsx";
|
||||||
|
import History from "./pages/UserPanel/History.jsx";
|
||||||
|
import Notifications from "./pages/UserPanel/Notifications.jsx";
|
||||||
|
import Settings from "./pages/UserPanel/Settings.jsx";
|
||||||
|
import ScheduleMeeting from "./pages/UserPanel/ScheduleMeeting.jsx";
|
||||||
|
import Support from "./pages/UserPanel/Support.jsx";
|
||||||
|
import FeedBackAndRatings from "./pages/UserPanel/FeedBackAndRatings.jsx";
|
||||||
|
|
||||||
|
createRoot(document.getElementById("root")).render(
|
||||||
|
<StrictMode>
|
||||||
|
<Provider store={MentifyStore}>
|
||||||
|
<SocketProvider>
|
||||||
|
<BrowserRouter>
|
||||||
|
<Routes>
|
||||||
|
{/* Routes for the main App */}
|
||||||
|
<Route path="/" element={<App />}>
|
||||||
|
<Route index element={<HomePage />} />
|
||||||
|
<Route path="home" element={<HomePage />} />
|
||||||
|
</Route>
|
||||||
|
|
||||||
|
{/* User related routes */}
|
||||||
|
<Route path="user" element={<App />}>
|
||||||
|
<Route path="login" element={<LoginPage />} />
|
||||||
|
<Route path="signup" element={<SignupPage />} />
|
||||||
|
<Route path="forgetpassword" element={<ForgetPassword />} />
|
||||||
|
<Route
|
||||||
|
path="api/v1/password/reset/:token"
|
||||||
|
element={<ResetPassword />}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Route path="dashboard" element={<MainUserPanel />}>
|
||||||
|
<Route index element={<Dashboard />} />
|
||||||
|
<Route path="history" element={<History />} />
|
||||||
|
<Route path="notifications" element={<Notifications />} />
|
||||||
|
<Route path="settings" element={<Settings />} />
|
||||||
|
<Route path="scheduledmeetings" element={<ScheduleMeeting />} />
|
||||||
|
<Route path="support" element={<Support />} />
|
||||||
|
<Route path="feedback" element={<FeedBackAndRatings />} />
|
||||||
|
</Route>
|
||||||
|
</Route>
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
</SocketProvider>
|
||||||
|
</Provider>
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
|
d;
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const About = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section className="bg-white py-12 w-full flex justify-center">
|
||||||
|
<div className="flex flex-col md:flex-row justify-between w-10/12 h-auto">
|
||||||
|
<div className="w-full md:w-4/5 object-contain flex justify-center items-center">
|
||||||
|
<img src="/images/calender.png" className="w-full h-auto" alt="" />
|
||||||
|
</div>
|
||||||
|
<div className="container mx-auto flex flex-col justify-around h-full w-full md:py-10">
|
||||||
|
<div className="text-center md:text-start flex flex-col justify-around h-full">
|
||||||
|
<h2 className="text-xl font-bold mb-4 text-yellow-600">
|
||||||
|
CUSTOMIZE WITH YOUR SCHEDULE
|
||||||
|
</h2>
|
||||||
|
<h1 className="text-2xl md:text-4xl md:font-extrabold font-bold mb-4">
|
||||||
|
Personalized Professional Online Mentor on Your Schedule
|
||||||
|
</h1>
|
||||||
|
<p className="text-base mb-8">
|
||||||
|
Our scheduling system allows you to select based on free time.
|
||||||
|
Lorem ipsum demo text for template. Keep track of your students
|
||||||
|
class and mentoring schedules, and never miss your Session. The
|
||||||
|
best online class scheduling system with easy accessibility.
|
||||||
|
Lorem ipsum is a placeholder text commonly used to demonstrate
|
||||||
|
the visual form
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-4 justify-center md:justify-start">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
|
||||||
|
>
|
||||||
|
Get started
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default About;
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Customization = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section
|
||||||
|
className="bg-gray-100 py-12 w-full flex justify-center"
|
||||||
|
style={{ backgroundColor: "#f0f0f0" }}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col-reverse md:flex-row justify-between w-10/12 h-auto">
|
||||||
|
<div className="container mx-auto flex flex-col justify-around h-full w-full md:py-10">
|
||||||
|
<div className="text-center md:text-start flex flex-col justify-around h-full">
|
||||||
|
<h2 className="text-xl font-bold mb-4 text-yellow-600">
|
||||||
|
CUSTOMIZE WITH YOUR SCHEDULE
|
||||||
|
</h2>
|
||||||
|
<h1 className="text-2xl md:text-4xl md:font-extrabold font-bold mb-4">
|
||||||
|
Talented and Qualified Tutors to Serve You for Help
|
||||||
|
</h1>
|
||||||
|
<p className="text-base mb-8">
|
||||||
|
Our scheduling system allows you to select based on free time.
|
||||||
|
Lorem ipsum demo text for template. Keep track of your students
|
||||||
|
class and tutoring schedules, and never miss your lectures. The
|
||||||
|
best online class scheduling system with easy accessibility.
|
||||||
|
Lorem ipsum is a placeholder text commonly used to demonstrate
|
||||||
|
the visual form
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-4 justify-center md:justify-start">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
|
||||||
|
>
|
||||||
|
Get started
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full md:w-4/5 object-contain flex justify-center items-center">
|
||||||
|
<img
|
||||||
|
src="/images/interaction2.png"
|
||||||
|
className="w-full h-auto"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Customization;
|
||||||
@@ -0,0 +1,190 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<footer className="bg-white dark:bg-gray-900">
|
||||||
|
<div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
|
||||||
|
<div className="md:flex md:justify-between">
|
||||||
|
<div className="mb-6 md:mb-0">
|
||||||
|
<a href="https://flowbite.com/" class="flex items-center gap-2">
|
||||||
|
<img
|
||||||
|
src="/images/logo.jpg"
|
||||||
|
className="h-9 rounded-full"
|
||||||
|
alt="Flowbite Logo"
|
||||||
|
/>
|
||||||
|
<span className="self-center text-xl font-bold whitespace-nowrap dark:text-white">
|
||||||
|
MentorFlux
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
|
||||||
|
<div>
|
||||||
|
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
|
||||||
|
Resources
|
||||||
|
</h2>
|
||||||
|
<ul className="text-gray-500 dark:text-gray-400 font-medium">
|
||||||
|
<li className="mb-4">
|
||||||
|
<a href="https://flowbite.com/" class="hover:underline">
|
||||||
|
Flowbite
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://tailwindcss.com/" class="hover:underline">
|
||||||
|
Tailwind CSS
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
|
||||||
|
Follow us
|
||||||
|
</h2>
|
||||||
|
<ul className="text-gray-500 dark:text-gray-400 font-medium">
|
||||||
|
<li className="mb-4">
|
||||||
|
<a
|
||||||
|
href="https://github.com/themesberg/flowbite"
|
||||||
|
className="hover:underline "
|
||||||
|
>
|
||||||
|
Github
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://discord.gg/4eeurUVvTy"
|
||||||
|
className="hover:underline"
|
||||||
|
>
|
||||||
|
Discord
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
|
||||||
|
Legal
|
||||||
|
</h2>
|
||||||
|
<ul className="text-gray-500 dark:text-gray-400 font-medium">
|
||||||
|
<li className="mb-4">
|
||||||
|
<a href="#" className="hover:underline">
|
||||||
|
Privacy Policy
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" className="hover:underline">
|
||||||
|
Terms & Conditions
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
|
||||||
|
<div className="sm:flex sm:items-center sm:justify-between">
|
||||||
|
<span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
|
||||||
|
© 2024{" "}
|
||||||
|
<a href="https://flowbite.com/" class="hover:underline">
|
||||||
|
MentorFlux™
|
||||||
|
</a>
|
||||||
|
. All Rights Reserved.
|
||||||
|
</span>
|
||||||
|
<div className="flex mt-4 sm:justify-center sm:mt-0">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-gray-500 hover:text-gray-900 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 8 19"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="sr-only">Facebook page</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 21 16"
|
||||||
|
>
|
||||||
|
<path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" />
|
||||||
|
</svg>
|
||||||
|
<span className="sr-only">Discord community</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 17"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="sr-only">Twitter page</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="sr-only">GitHub account</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="sr-only">Dribbble account</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
@@ -0,0 +1,118 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
const Hero = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section className="bg-white py-12 w-full flex justify-center">
|
||||||
|
<div className="flex flex-col-reverse md:flex-row justify-between w-10/12 h-auto">
|
||||||
|
<div className="container mx-auto flex flex-col justify-between h-full w-full">
|
||||||
|
<div className="text-center md:text-start flex flex-col gap-5 justify-around h-full">
|
||||||
|
<h2 className="text-xl font-bold mb-4 text-yellow-600">
|
||||||
|
100% SATISFACTION GUARANTEE
|
||||||
|
</h2>
|
||||||
|
<h1 className="text-6xl md:text-8xl md:font-extrabold font-bold mb-4">
|
||||||
|
Find Your Perfect Mentor
|
||||||
|
</h1>
|
||||||
|
<div className="flex gap-4 justify-center md:justify-start">
|
||||||
|
<form class="w-full md:w-3/5">
|
||||||
|
<label
|
||||||
|
for="default-search"
|
||||||
|
class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
|
||||||
|
>
|
||||||
|
Search
|
||||||
|
</label>
|
||||||
|
<div class="relative">
|
||||||
|
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 text-gray-500 dark:text-gray-400"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
id="default-search"
|
||||||
|
class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
|
placeholder="Search for mentors"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
to={"/mentor"}
|
||||||
|
type="button"
|
||||||
|
class="text-white absolute end-2.5 bottom-2.5 bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800"
|
||||||
|
>
|
||||||
|
Find your Mentor
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{/*
|
||||||
|
<Link
|
||||||
|
to={"/mentor"}
|
||||||
|
type="button"
|
||||||
|
className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
|
||||||
|
>
|
||||||
|
Find your Mentor
|
||||||
|
</Link>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
|
||||||
|
>
|
||||||
|
Contact Us
|
||||||
|
</button> */}
|
||||||
|
</div>
|
||||||
|
<p className="text-lg mb-8 my-6">
|
||||||
|
Find guidance, support, and industry insights from seasoned
|
||||||
|
professionals. Achieve your goals with our mentorship
|
||||||
|
platform.Our platform bridges the gap between students and
|
||||||
|
experienced mentors.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full md:w-4/5 object-contain flex justify-center items-center">
|
||||||
|
<img src="/images/student.png" className="w-full h-auto" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 mt-8">
|
||||||
|
<div className="w-full p-4">
|
||||||
|
<div className="bg-blue-500 rounded-lg p-6 text-center">
|
||||||
|
<h3 className="text-white font-bold text-3xl mb-2">870</h3>
|
||||||
|
<p className="text-white font-bold">Expert tutors</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full p-4">
|
||||||
|
<div className="bg-blue-500 rounded-lg p-6 text-center">
|
||||||
|
<h3 className="text-white font-bold text-3xl mb-2">20,000+</h3>
|
||||||
|
<p className="text-white font-bold">Hours tutored</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full p-4">
|
||||||
|
<div className="bg-blue-500 rounded-lg p-6 text-center">
|
||||||
|
<h3 className="text-white font-bold text-3xl mb-2">298</h3>
|
||||||
|
<p className="text-white font-bold">Subjects and courses</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full p-4">
|
||||||
|
<div className="bg-blue-500 rounded-lg p-6 text-center">
|
||||||
|
<h3 className="text-white font-bold text-3xl mb-2">72,920</h3>
|
||||||
|
<p className="text-white font-bold">Active students</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Hero;
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import React from "react";
|
||||||
|
import Navbar from "../../components/Navbar";
|
||||||
|
import Hero from "./Hero";
|
||||||
|
import Testimonial from "./Testimonial";
|
||||||
|
import About from "./About";
|
||||||
|
import Customization from "./Customization";
|
||||||
|
import SubjectSection from "./SubjectSection";
|
||||||
|
import ReviewSection from "./ReviewSection";
|
||||||
|
import Footer from "./Footer";
|
||||||
|
|
||||||
|
const HomePage = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Hero />
|
||||||
|
<Testimonial />
|
||||||
|
<About />
|
||||||
|
<Customization />
|
||||||
|
<SubjectSection />
|
||||||
|
<ReviewSection />
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HomePage;
|
||||||
@@ -0,0 +1,289 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Reviews = [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
src: "/images/Review1.jpeg",
|
||||||
|
alt: "Bonnie image",
|
||||||
|
name: "Bonnie",
|
||||||
|
occupation: "Student",
|
||||||
|
review:
|
||||||
|
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "/images/Review1.jpeg",
|
||||||
|
alt: "Bonnie image",
|
||||||
|
name: "Bonnie",
|
||||||
|
occupation: "Student",
|
||||||
|
review:
|
||||||
|
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "/images/Review1.jpeg",
|
||||||
|
alt: "Bonnie image",
|
||||||
|
name: "Bonnie",
|
||||||
|
occupation: "Student",
|
||||||
|
review:
|
||||||
|
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
src: "/images/Review1.jpeg",
|
||||||
|
alt: "Bonnie image",
|
||||||
|
name: "Bonnie",
|
||||||
|
occupation: "Student",
|
||||||
|
review:
|
||||||
|
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "/images/Review1.jpeg",
|
||||||
|
alt: "Bonnie image",
|
||||||
|
name: "Bonnie",
|
||||||
|
occupation: "Student",
|
||||||
|
review:
|
||||||
|
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "/images/Review1.jpeg",
|
||||||
|
alt: "Bonnie image",
|
||||||
|
name: "Bonnie",
|
||||||
|
occupation: "Student",
|
||||||
|
review:
|
||||||
|
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
src: "/images/Review1.jpeg",
|
||||||
|
alt: "Bonnie image",
|
||||||
|
name: "Bonnie",
|
||||||
|
occupation: "Student",
|
||||||
|
review:
|
||||||
|
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "/images/Review1.jpeg",
|
||||||
|
alt: "Bonnie image",
|
||||||
|
name: "Bonnie",
|
||||||
|
occupation: "Student",
|
||||||
|
review:
|
||||||
|
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "/images/Review1.jpeg",
|
||||||
|
alt: "Bonnie image",
|
||||||
|
name: "Bonnie",
|
||||||
|
occupation: "Student",
|
||||||
|
review:
|
||||||
|
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
[
|
||||||
|
{
|
||||||
|
src: "/images/Review1.jpeg",
|
||||||
|
alt: "Bonnie image",
|
||||||
|
name: "Bonnie",
|
||||||
|
occupation: "Student",
|
||||||
|
review:
|
||||||
|
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "/images/Review1.jpeg",
|
||||||
|
alt: "Bonnie image",
|
||||||
|
name: "Bonnie",
|
||||||
|
occupation: "Student",
|
||||||
|
review:
|
||||||
|
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "/images/Review1.jpeg",
|
||||||
|
alt: "Bonnie image",
|
||||||
|
name: "Bonnie",
|
||||||
|
occupation: "Student",
|
||||||
|
review:
|
||||||
|
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
[
|
||||||
|
{
|
||||||
|
src: "/images/Review1.jpeg",
|
||||||
|
alt: "Bonnie image",
|
||||||
|
name: "Bonnie",
|
||||||
|
occupation: "Student",
|
||||||
|
review:
|
||||||
|
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "/images/Review1.jpeg",
|
||||||
|
alt: "Bonnie image",
|
||||||
|
name: "Bonnie",
|
||||||
|
occupation: "Student",
|
||||||
|
review:
|
||||||
|
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "/images/Review1.jpeg",
|
||||||
|
alt: "Bonnie image",
|
||||||
|
name: "Bonnie",
|
||||||
|
occupation: "Student",
|
||||||
|
review:
|
||||||
|
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
|
const ReviewSection = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section className="bg-gray-100 py-12">
|
||||||
|
<div className="container mx-auto">
|
||||||
|
<div className="text-center">
|
||||||
|
<h2 className=" text-2xl md:text-4xl font-bold mb-4">OUR TESTIMONIALS</h2>
|
||||||
|
<h1 className="text-3xl md:text-6xl font-bold mb-4">
|
||||||
|
What Our Students Say About Us
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="default-carousel"
|
||||||
|
className="relative w-full"
|
||||||
|
data-carousel="slide"
|
||||||
|
>
|
||||||
|
{/* <!-- Carousel wrapper --> */}
|
||||||
|
<div className="relative h-64 overflow-hidden rounded-lg md:h-96">
|
||||||
|
{/* <!-- Item 1 --> */}
|
||||||
|
{Reviews.map((reviewList) => (
|
||||||
|
<div
|
||||||
|
className="hidden duration-700 ease-in-out w-full"
|
||||||
|
data-carousel-item
|
||||||
|
>
|
||||||
|
<div className="flex w-full items-center justify-center h-full gap-8">
|
||||||
|
{/* Review no 1 */}
|
||||||
|
|
||||||
|
{reviewList.map((review) => (
|
||||||
|
<div className="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 md:py-2">
|
||||||
|
<div className="flex flex-col items-center pb-10 p-2">
|
||||||
|
<img
|
||||||
|
className="w-20 h-20 md:w-24 md:h-24 mb-3 rounded-full shadow-lg"
|
||||||
|
src={`${review.src}`}
|
||||||
|
alt={`${review.alt}`}
|
||||||
|
/>
|
||||||
|
<h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">
|
||||||
|
{review.name}
|
||||||
|
</h5>
|
||||||
|
<span className="text-base font-semibold text-gray-500 dark:text-gray-400">
|
||||||
|
{review.occupation}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<p className="md:hidden text-sm text-gray-600 text-center">
|
||||||
|
{review.review.substring(0, 35)}....
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p className="hidden md:block text-sm text-gray-600 text-center">
|
||||||
|
{review.review.substring(0,200)}...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{/* <!-- Slider indicators --> */}
|
||||||
|
<div className="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="w-3 h-3 rounded-full"
|
||||||
|
aria-current="true"
|
||||||
|
aria-label="Slide 1"
|
||||||
|
data-carousel-slide-to="0"
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="w-3 h-3 rounded-full"
|
||||||
|
aria-current="false"
|
||||||
|
aria-label="Slide 2"
|
||||||
|
data-carousel-slide-to="1"
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="w-3 h-3 rounded-full"
|
||||||
|
aria-current="false"
|
||||||
|
aria-label="Slide 3"
|
||||||
|
data-carousel-slide-to="2"
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="w-3 h-3 rounded-full"
|
||||||
|
aria-current="false"
|
||||||
|
aria-label="Slide 4"
|
||||||
|
data-carousel-slide-to="3"
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="w-3 h-3 rounded-full"
|
||||||
|
aria-current="false"
|
||||||
|
aria-label="Slide 5"
|
||||||
|
data-carousel-slide-to="4"
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
{/* <!-- Slider controls --> */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
|
||||||
|
data-carousel-prev
|
||||||
|
>
|
||||||
|
<span className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 6 10"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M5 1 1 5l4 4"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="sr-only">Previous</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
|
||||||
|
data-carousel-next
|
||||||
|
>
|
||||||
|
<span className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 6 10"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="m1 9 4-4-4-4"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="sr-only">Next</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ReviewSection;
|
||||||
@@ -0,0 +1,179 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { MdEngineering } from "react-icons/md";
|
||||||
|
import { FaLaptopCode } from "react-icons/fa";
|
||||||
|
import { LiaLanguageSolid } from "react-icons/lia";
|
||||||
|
import { MdScience } from "react-icons/md";
|
||||||
|
import { MdHistoryEdu } from "react-icons/md";
|
||||||
|
import { MdPsychology } from "react-icons/md";
|
||||||
|
import { CgWebsite } from "react-icons/cg";
|
||||||
|
import { FaReplyAll } from "react-icons/fa";
|
||||||
|
|
||||||
|
const SubjectList = [
|
||||||
|
{
|
||||||
|
icon: "FaLaptopCode",
|
||||||
|
title: "Programming",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "MdEngineering",
|
||||||
|
title: "Engineering",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "LiaLanguageSolid",
|
||||||
|
title: "Languages",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "MdScience",
|
||||||
|
title: "Science",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "MdHistoryEdu",
|
||||||
|
title: "History",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "MdPsychology",
|
||||||
|
title: "Psychology",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "CgWebsite",
|
||||||
|
title: "Web Design",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "FaReplyAll",
|
||||||
|
title: "See all",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const SubjectSection = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section className="bg-white py-12 flex justify-center">
|
||||||
|
<div className="w-11/12">
|
||||||
|
<div className="container mx-auto">
|
||||||
|
<div className="text-center">
|
||||||
|
<h2 className="text-xl md:text-4xl font-bold mb-4">
|
||||||
|
OUR TUTOR SUBJECTS
|
||||||
|
</h2>
|
||||||
|
<h1 className="text-4xl md:text-6xl font-bold mb-4">
|
||||||
|
Find Online Tutor in Any Subject
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-3 md:gap-4 mt-10 md:grid-cols-3 lg:grid-cols-4">
|
||||||
|
<div
|
||||||
|
id="toast-success"
|
||||||
|
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 "
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
|
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
|
||||||
|
<FaLaptopCode className="text-base sm:text-xl" />
|
||||||
|
<span className="sr-only">Check icon</span>
|
||||||
|
</div>
|
||||||
|
<div className="ms-3 text-sm sm:text-xl font-bold text-black font-sans">
|
||||||
|
Programming
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="toast-success"
|
||||||
|
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
|
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
|
||||||
|
<MdEngineering className="text-base sm:text-xl" />
|
||||||
|
<span className="sr-only">Check icon</span>
|
||||||
|
</div>
|
||||||
|
<div className="ms-3 text-sm sm:text-xl font-bold text-black font-sans">
|
||||||
|
Engineering
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="toast-success"
|
||||||
|
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
|
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-pink-500 bg-pink-100 rounded-lg dark:bg-pink-800 dark:text-pink-200">
|
||||||
|
<LiaLanguageSolid className="text-base sm:text-xl" />
|
||||||
|
<span className="sr-only">Check icon</span>
|
||||||
|
</div>
|
||||||
|
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||||
|
Languages
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="toast-success"
|
||||||
|
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
|
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-purple-500 bg-purple-100 rounded-lg dark:bg-purple-800 dark:text-purple-200">
|
||||||
|
<MdScience className="text-base sm:text-xl" />
|
||||||
|
<span className="sr-only">Check icon</span>
|
||||||
|
</div>
|
||||||
|
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||||
|
Science
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="toast-success"
|
||||||
|
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
|
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-yellow-500 bg-yellow-100 rounded-lg dark:bg-yellow-800 dark:text-yellow-200">
|
||||||
|
<MdHistoryEdu className="text-base sm:text-xl" />
|
||||||
|
<span className="sr-only">Check icon</span>
|
||||||
|
</div>
|
||||||
|
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||||
|
History
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="toast-success"
|
||||||
|
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
|
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
|
||||||
|
<MdPsychology className="text-base sm:text-xl" />
|
||||||
|
<span className="sr-only">Check icon</span>
|
||||||
|
</div>
|
||||||
|
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||||
|
Psychology
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="toast-success"
|
||||||
|
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 md:hidden lg:flex"
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
|
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-800 dark:text-orange-200 ">
|
||||||
|
<CgWebsite className="text-base sm:text-xl" />
|
||||||
|
<span className="sr-only">Check icon</span>
|
||||||
|
</div>
|
||||||
|
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||||
|
Web Design
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="toast-success"
|
||||||
|
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 md:hidden lg:flex"
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
|
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-gray-500 bg-gray-100 rounded-lg dark:bg-gray-800 dark:text-gray-200">
|
||||||
|
<FaReplyAll className="text-base sm:text-xl" />
|
||||||
|
<span class="sr-only">Check icon</span>
|
||||||
|
</div>
|
||||||
|
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||||
|
See all
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SubjectSection;
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { IoMdContacts } from "react-icons/io";
|
||||||
|
import { FaClock } from "react-icons/fa";
|
||||||
|
import { FaMessage } from "react-icons/fa6";
|
||||||
|
|
||||||
|
const Testimonial = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section className="bg-gray-100 py-12 px-2 md:px-32">
|
||||||
|
<div className="container mx-auto">
|
||||||
|
<div className="text-center">
|
||||||
|
<h2 className="text-xl sm:text-4xl font-bold mb-4">WHY CHOOSE US</h2>
|
||||||
|
<h1 className="text-3xl sm:text-6xl font-bold mb-4">
|
||||||
|
Benefits of online tutoring services with us
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col sm:flex-row justify-center mt-8 h-auto">
|
||||||
|
<div className="w-full h-full md:w-1/3 p-4">
|
||||||
|
<div className="bg-white rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
|
||||||
|
<IoMdContacts className=" text-4xl p-1 rounded-lg text-white bg-blue-600 " />
|
||||||
|
|
||||||
|
<h3 className="text-xl font-bold mb-2">One-on-One Mentoring</h3>
|
||||||
|
<p className="text-gray-600 text-sm">
|
||||||
|
All of our special education experts have a degree in special
|
||||||
|
education
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full h-full md:w-1/3 p-4">
|
||||||
|
<div className="bg-white rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
|
||||||
|
<FaClock className=" text-4xl p-1.5 rounded-lg text-white bg-green-600 " />
|
||||||
|
|
||||||
|
<h3 className="text-xl font-bold mb-2">24/7 Mentor Availability</h3>
|
||||||
|
<p className="text-gray-600 text-sm">
|
||||||
|
Our Mentors are always available to respond as quick as
|
||||||
|
possible for you
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full h-full md:w-1/3 p-4">
|
||||||
|
<div className="bg-white rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
|
||||||
|
<FaMessage className=" text-4xl p-2 rounded-lg text-white bg-orange-600 " />
|
||||||
|
|
||||||
|
<h3 className="text-xl font-bold mb-2">Interactive Session</h3>
|
||||||
|
<p className="text-gray-600 text-sm">
|
||||||
|
Our digital messaging with audio and video chat features give interactiveness.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* <div class="w-full md:w-1/3 p-4">
|
||||||
|
<div class="bg-white rounded-lg p-6 text-center shadow-md">
|
||||||
|
<img
|
||||||
|
src="https://cdn-icons-png.flaticon.com/512/2768/2768851.png"
|
||||||
|
alt="Icon"
|
||||||
|
class="w-12 h-12 mb-4"
|
||||||
|
/>
|
||||||
|
<h3 class="text-2xl font-bold mb-2">Interactive Whiteboard</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
Our digital whiteboard equipped with audio and video chat
|
||||||
|
features
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full md:w-1/3 p-4">
|
||||||
|
<div class="bg-white rounded-lg p-6 text-center shadow-md">
|
||||||
|
<img
|
||||||
|
src="https://cdn-icons-png.flaticon.com/512/2768/2768851.png"
|
||||||
|
alt="Icon"
|
||||||
|
class="w-12 h-12 mb-4"
|
||||||
|
/>
|
||||||
|
<h3 class="text-2xl font-bold mb-2">Affordable Prices</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
Choose an expert tutor based on your budget and per hour
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Testimonial;
|
||||||
@@ -0,0 +1,147 @@
|
|||||||
|
import React, { useRef } from "react";
|
||||||
|
import { useDispatch } from "react-redux";
|
||||||
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
|
import { userSliceActions } from "../../store/userSlice";
|
||||||
|
import { BACKEND_URL } from "../../constants";
|
||||||
|
|
||||||
|
const LoginPage = () => {
|
||||||
|
const emailElement = useRef();
|
||||||
|
const passwordElement = useRef();
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
const handleLogin = async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const responce = await fetch(`${BACKEND_URL}/api/v1/login`, {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "include",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
email: emailElement.current.value,
|
||||||
|
password: passwordElement.current.value,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const user = await responce.json();
|
||||||
|
|
||||||
|
//console.log("User Login Data is here : ", user);
|
||||||
|
|
||||||
|
dispatch(userSliceActions.addUser(user.data));
|
||||||
|
|
||||||
|
emailElement.current.value = "";
|
||||||
|
passwordElement.current.value = "";
|
||||||
|
|
||||||
|
if (user.success == true) {
|
||||||
|
navigate("/");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<section className="bg-gray-100 font-sans h-[91vh] flex flex-col justify-center md:p-5">
|
||||||
|
<div className="container mx-auto p-4 ">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<div className="bg-gradient-to-br from-purple-300 to-pink-200 overflow-hidden rounded-lg shadow-md min-h-40 object-center">
|
||||||
|
<div className="flex flex-col items-center justify-center h-full relative">
|
||||||
|
<img
|
||||||
|
src="/images/background1.jpg"
|
||||||
|
alt=""
|
||||||
|
className="absolute order-3 w-full h-full"
|
||||||
|
/>
|
||||||
|
<h1 className="text-6xl font-bold text-white mb-4 md:text-6xl lg:text-9xl relative ml-8">
|
||||||
|
Welcome Back!
|
||||||
|
</h1>
|
||||||
|
{/* <img src="/images/background.jpg" alt="" className="absolute order-3"/> */}
|
||||||
|
{/* <img
|
||||||
|
src="https://cdn.pixabay.com/photo/2017/02/21/15/19/arrow-2074591_960_720.png"
|
||||||
|
alt="Arrow"
|
||||||
|
className="w-16 h-16 text-white"
|
||||||
|
/> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white p-8 rounded-lg shadow-md h-full lg:p-36">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-800 mb-4">Login</h1>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
Welcome back! Please login to your account.
|
||||||
|
</p>
|
||||||
|
<form className="space-y-6" onSubmit={handleLogin}>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="username"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="username"
|
||||||
|
ref={emailElement}
|
||||||
|
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
|
placeholder="username@gmail.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="password"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
ref={passwordElement}
|
||||||
|
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
|
placeholder="********"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<input
|
||||||
|
id="remember_me"
|
||||||
|
type="checkbox"
|
||||||
|
value=""
|
||||||
|
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
for="remember_me"
|
||||||
|
className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||||
|
>
|
||||||
|
Remember Me
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
to={"/user/forgetpassword"}
|
||||||
|
className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
|
||||||
|
>
|
||||||
|
Forget Password?
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="text-white bg-purple-500 hover:bg-purple-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||||
|
>
|
||||||
|
Login
|
||||||
|
</button>
|
||||||
|
<p className="text-gray-600 text-center mt-4">
|
||||||
|
New User?{" "}
|
||||||
|
<Link
|
||||||
|
to={"/user/signup"}
|
||||||
|
className="text-blue-600 hover:underline"
|
||||||
|
>
|
||||||
|
Signup
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoginPage;
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import React from "react";
|
||||||
|
import Navbar from "../../components/Navbar.jsx";
|
||||||
|
import { Outlet } from "react-router-dom";
|
||||||
|
import Container from "../../components/Container.jsx";
|
||||||
|
|
||||||
|
const MainLoginPage = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Container>
|
||||||
|
<Outlet />
|
||||||
|
</Container>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MainLoginPage;
|
||||||
@@ -0,0 +1,233 @@
|
|||||||
|
import React, { useRef } from "react";
|
||||||
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
|
import { BACKEND_URL } from "../../constants";
|
||||||
|
|
||||||
|
const SignupPage = () => {
|
||||||
|
const firstNameElement = useRef();
|
||||||
|
const lastNameElement = useRef();
|
||||||
|
const emailElement = useRef();
|
||||||
|
const roleElement = useRef();
|
||||||
|
const passwordElement = useRef();
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const handleRegisteration = async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
let userRole;
|
||||||
|
if (roleElement.current.value == "Student") {
|
||||||
|
userRole = "user";
|
||||||
|
} else {
|
||||||
|
userRole = "mentor";
|
||||||
|
}
|
||||||
|
const user = {
|
||||||
|
name:
|
||||||
|
firstNameElement.current.value + " " + lastNameElement.current.value,
|
||||||
|
email: emailElement.current.value,
|
||||||
|
password: passwordElement.current.value,
|
||||||
|
role: userRole,
|
||||||
|
};
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
const responce = await fetch(`${BACKEND_URL}/api/v1/register`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(user),
|
||||||
|
credentials: "include",
|
||||||
|
});
|
||||||
|
const data = await responce.json();
|
||||||
|
|
||||||
|
//console.log("Our user data is : ", data);
|
||||||
|
|
||||||
|
firstNameElement.current.value = "";
|
||||||
|
lastNameElement.current.value = "";
|
||||||
|
emailElement.current.value = "";
|
||||||
|
passwordElement.current.value = "";
|
||||||
|
roleElement.current.value = "";
|
||||||
|
|
||||||
|
if (data.success == true) {
|
||||||
|
navigate("/user/login");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="bg-gray-100 font-sans h-[91vh] flex flex-col justify-center md:p-5 ">
|
||||||
|
<div className="container mx-auto p-4 mt-64 sm:mt-32 md:mt-0">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<div className="bg-gradient-to-br from-purple-300 to-pink-200 overflow-hidden rounded-lg shadow-md min-h-40 object-center md:hidden">
|
||||||
|
<div className="flex flex-col items-center justify-center h-full relative">
|
||||||
|
<img
|
||||||
|
src="/images/background1.jpg"
|
||||||
|
alt=""
|
||||||
|
className="absolute order-3 w-full h-full"
|
||||||
|
/>
|
||||||
|
<h1 className="text-6xl font-bold text-white mb-4 md:text-6xl lg:text-9xl relative ml-8">
|
||||||
|
Welcome to MentorFlux!
|
||||||
|
</h1>
|
||||||
|
{/* <img src="./images/background.jpg" alt="" className="absolute order-3"/> */}
|
||||||
|
{/* <img
|
||||||
|
src="https://cdn.pixabay.com/photo/2017/02/21/15/19/arrow-2074591_960_720.png"
|
||||||
|
alt="Arrow"
|
||||||
|
className="w-16 h-16 text-white"
|
||||||
|
/> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white p-8 rounded-lg shadow-md h-full lg:p-16">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-800 mb-4">
|
||||||
|
Register Your account
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
Welcome to MentorFlux. Please register your new account.
|
||||||
|
</p>
|
||||||
|
<form
|
||||||
|
action="#"
|
||||||
|
className="space-y-6"
|
||||||
|
onSubmit={handleRegisteration}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-5 sm:flex-row">
|
||||||
|
<div className="w-full">
|
||||||
|
<label
|
||||||
|
htmlFor="username"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
First Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="firstName"
|
||||||
|
ref={firstNameElement}
|
||||||
|
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
|
placeholder="Enter your First name here..."
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="w-full">
|
||||||
|
<label
|
||||||
|
htmlFor="username"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
Last Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="LastName"
|
||||||
|
ref={lastNameElement}
|
||||||
|
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
|
placeholder="Enter your Last name here..."
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="username"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
ref={emailElement}
|
||||||
|
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
|
placeholder="Please Enter your Email here..."
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="w-full">
|
||||||
|
<label
|
||||||
|
htmlFor="countries"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
Select your Role
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="role"
|
||||||
|
ref={roleElement}
|
||||||
|
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
|
>
|
||||||
|
<option>Student</option>
|
||||||
|
<option>Mentor</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="password"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
ref={passwordElement}
|
||||||
|
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
|
placeholder="Please enter password having at least 6 unique letters.. "
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<input
|
||||||
|
id="remember_me"
|
||||||
|
type="checkbox"
|
||||||
|
value=""
|
||||||
|
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="remember_me"
|
||||||
|
className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||||
|
>
|
||||||
|
Remember Me
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
|
||||||
|
></a>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="text-white bg-purple-500 hover:bg-purple-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||||
|
>
|
||||||
|
Register your Account
|
||||||
|
</button>
|
||||||
|
<p className="text-gray-600 text-center mt-4">
|
||||||
|
Already have an Account ?{" "}
|
||||||
|
<Link
|
||||||
|
to={"/user/login"}
|
||||||
|
className="text-blue-600 hover:underline"
|
||||||
|
>
|
||||||
|
Login
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gradient-to-br from-purple-300 to-pink-200 overflow-hidden rounded-lg shadow-md min-h-40 object-center hidden md:block">
|
||||||
|
<div className="flex flex-col items-center justify-center h-full relative text-center">
|
||||||
|
<img
|
||||||
|
src="/images/background1.jpg"
|
||||||
|
alt=""
|
||||||
|
className="absolute order-3 w-full h-full"
|
||||||
|
/>
|
||||||
|
<h1 className="text-5xl font-bold text-white mb-4 md:text-5xl lg:text-8xl relative ml-8 text-center">
|
||||||
|
Welcome to MentorFlux!
|
||||||
|
</h1>
|
||||||
|
{/* <img src="./images/background.jpg" alt="" className="absolute order-3"/> */}
|
||||||
|
{/* <img
|
||||||
|
src="https://cdn.pixabay.com/photo/2017/02/21/15/19/arrow-2074591_960_720.png"
|
||||||
|
alt="Arrow"
|
||||||
|
className="w-16 h-16 text-white"
|
||||||
|
/> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SignupPage;
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
import { IoIosKey } from "react-icons/io";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { FaArrowLeft } from "react-icons/fa6";
|
||||||
|
import { BACKEND_URL } from "../../constants";
|
||||||
|
|
||||||
|
const ForgetPassword = () => {
|
||||||
|
const emailElement = useRef();
|
||||||
|
|
||||||
|
const [status, setStatus] = useState(false);
|
||||||
|
|
||||||
|
const handleForgetPassword = async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
const responce = await fetch(`${BACKEND_URL}/api/v1//password/forgot`, {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "include",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
email: emailElement.current.value,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await responce.json();
|
||||||
|
|
||||||
|
if (data.success === true) {
|
||||||
|
setStatus(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="w-full h-[78vh] flex justify-center items-center">
|
||||||
|
<div className="">
|
||||||
|
<div className="flex flex-col items-center gap-12">
|
||||||
|
<div className="flex flex-col items-center gap-3">
|
||||||
|
<IoIosKey className="text-5xl bg-purple-200 p-2 rounded-full text-purple-500" />
|
||||||
|
<h2 className="text-3xl font-bold font-sans">Forget Password?</h2>
|
||||||
|
<p className="text-gray-500">
|
||||||
|
No worries, we'll send you resent instructions.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
className="flex flex-col w-full gap-5"
|
||||||
|
onSubmit={handleForgetPassword}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email"></label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
placeholder="Enter your email"
|
||||||
|
className="w-full rounded-md border-gray-400 border-2"
|
||||||
|
ref={emailElement}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
|
||||||
|
>
|
||||||
|
{status === false ? "Send Email" : "Email Sent to your Mail"}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
to={"/user/login"}
|
||||||
|
className="text-center text-gray-600 inline-flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<FaArrowLeft className="text-lg" /> Back to Login Page
|
||||||
|
</Link>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ForgetPassword;
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
import { RiLockPasswordFill } from "react-icons/ri";
|
||||||
|
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||||
|
import { FaArrowLeft } from "react-icons/fa6";
|
||||||
|
import { BACKEND_URL } from "../../constants";
|
||||||
|
|
||||||
|
const ResetPassword = () => {
|
||||||
|
const [secure, setSecure] = useState(true);
|
||||||
|
|
||||||
|
const newPassworElement = useRef();
|
||||||
|
const confirmPassworElement = useRef();
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const { token } = useParams();
|
||||||
|
|
||||||
|
// console.log("So our Token is : ", token);
|
||||||
|
|
||||||
|
const handleResetPassword = async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
if (
|
||||||
|
confirmPassworElement.current.value !== newPassworElement.current.value
|
||||||
|
) {
|
||||||
|
setSecure(false);
|
||||||
|
} else {
|
||||||
|
const responce = await fetch(
|
||||||
|
`${BACKEND_URL}/api/v1/password/reset/${token}`,
|
||||||
|
{
|
||||||
|
method: "PUT",
|
||||||
|
credentials: "include",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
password: newPassworElement.current.value,
|
||||||
|
confirmPassword: confirmPassworElement.current.value,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const data = await responce.json();
|
||||||
|
|
||||||
|
//console.log("Status of the Reset password", data);
|
||||||
|
|
||||||
|
if (data.success === true) {
|
||||||
|
navigate("/user/login");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="w-full h-[78vh] flex justify-center items-center">
|
||||||
|
<div className="">
|
||||||
|
<div className="flex flex-col items-center gap-10">
|
||||||
|
<div className="flex flex-col items-center gap-3">
|
||||||
|
<RiLockPasswordFill className="text-5xl bg-purple-200 p-2 rounded-full text-purple-500" />
|
||||||
|
<h2 className="text-3xl font-bold font-sans">
|
||||||
|
Create New Password
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-500">
|
||||||
|
Create your new, unique and secure password here.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
className="flex flex-col w-full gap-5"
|
||||||
|
onSubmit={handleResetPassword}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label
|
||||||
|
htmlFor="passwordNew"
|
||||||
|
className="text-gray-500 font-semibold"
|
||||||
|
>
|
||||||
|
New Password :
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="passwordNew"
|
||||||
|
ref={newPassworElement}
|
||||||
|
placeholder="Enter your New Password"
|
||||||
|
className="w-full rounded-md border-gray-400 border-2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label
|
||||||
|
htmlFor="passwordConfirm"
|
||||||
|
className="text-gray-500 font-semibold"
|
||||||
|
>
|
||||||
|
Confirm Password :
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="passwordConfirm"
|
||||||
|
ref={confirmPassworElement}
|
||||||
|
placeholder="Enter your Confirm Password"
|
||||||
|
className="w-full rounded-md border-gray-400 border-2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p
|
||||||
|
className={`text-red-800 text-sm underline w-96 text-center ${
|
||||||
|
secure && "hidden"
|
||||||
|
} `}
|
||||||
|
>
|
||||||
|
Password and confirm Password is not same.Please Enter new
|
||||||
|
password and confirm Password same
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
|
||||||
|
>
|
||||||
|
Reset Password
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
to={"/user/login"}
|
||||||
|
className="text-center text-gray-600 inline-flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<FaArrowLeft className="text-lg" /> Back to Login Page
|
||||||
|
</Link>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ResetPassword;
|
||||||
@@ -0,0 +1,202 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Dashboard = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
|
||||||
|
<div className="w-full bg-white rounded-lg shadow p-4">
|
||||||
|
<div className="flex flex-col justify-center items-center mb-4">
|
||||||
|
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||||
|
Upcoming Sessions{" "}
|
||||||
|
</h2>
|
||||||
|
<div className="bg-gray-300 w-full h-52 rounded-lg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-4">
|
||||||
|
<h3 className="text-lg font-medium">Recent Activity</h3>
|
||||||
|
<p className="text-gray-500 text-sm mt-2">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-1 gap-4 mt-4">
|
||||||
|
<input type="range" className="w-full h-auto" readOnly:true/>
|
||||||
|
<div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
|
||||||
|
|
||||||
|
<div className="flex items-center">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="h-6 w-6 text-green-500"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="ml-2 font-medium">Topup</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span className="text-gray-500 text-sm">06:24:45 AM</span>
|
||||||
|
<span className="ml-2 text-green-500 text-sm">+$5,553</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-4">
|
||||||
|
<h3 className="text-lg font-medium">Weekly Summary</h3>
|
||||||
|
<div className="grid grid-cols-8 gap-2 mt-4">
|
||||||
|
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
||||||
|
<span className="text-gray-500 text-xs">Sun</span>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
||||||
|
<span className="text-gray-500 text-xs">Mon</span>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
||||||
|
<span className="text-gray-500 text-xs">Tue</span>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
||||||
|
<span className="text-gray-500 text-xs">Wed</span>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
||||||
|
<span className="text-gray-500 text-xs">Thu</span>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
||||||
|
<span className="text-gray-500 text-xs">Fri</span>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
||||||
|
<span className="text-gray-500 text-xs">Sat</span>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
||||||
|
<span className="text-gray-500 text-xs">Completed</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-8 gap-2 mt-2">
|
||||||
|
<div
|
||||||
|
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
||||||
|
style={{ height: "100px" }}
|
||||||
|
>
|
||||||
|
<div className="bg-green-500 rounded-t-lg h-16"></div>
|
||||||
|
<div className="bg-gray-300 h-4"></div>
|
||||||
|
<div className="bg-red-500 rounded-b-lg h-16"></div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
||||||
|
style={{ height: "100px" }}
|
||||||
|
>
|
||||||
|
<div className="bg-green-500 rounded-t-lg h-20"></div>
|
||||||
|
<div className="bg-gray-300 h-8"></div>
|
||||||
|
<div className="bg-red-500 rounded-b-lg h-12"></div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
||||||
|
style={{ height: "100px" }}
|
||||||
|
>
|
||||||
|
<div className="bg-green-500 rounded-t-lg h-12"></div>
|
||||||
|
<div className="bg-gray-300 h-12"></div>
|
||||||
|
<div className="bg-red-500 rounded-b-lg h-20"></div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
||||||
|
style={{ height: "100px" }}
|
||||||
|
>
|
||||||
|
<div className="bg-green-500 rounded-t-lg h-24"></div>
|
||||||
|
<div className="bg-gray-300 h-4"></div>
|
||||||
|
<div className="bg-red-500 rounded-b-lg h-8"></div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
||||||
|
style={{ height: "100px" }}
|
||||||
|
>
|
||||||
|
<div className="bg-green-500 rounded-t-lg h-16"></div>
|
||||||
|
<div className="bg-gray-300 h-12"></div>
|
||||||
|
<div className="bg-red-500 rounded-b-lg h-16"></div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
||||||
|
style={{ height: "100px" }}
|
||||||
|
>
|
||||||
|
<div className="bg-green-500 rounded-t-lg h-16"></div>
|
||||||
|
<div className="bg-gray-300 h-4"></div>
|
||||||
|
<div className="bg-red-500 rounded-b-lg h-24"></div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
||||||
|
style={{ height: "100px" }}
|
||||||
|
>
|
||||||
|
<div className="bg-green-500 rounded-t-lg h-8"></div>
|
||||||
|
<div className="bg-gray-300 h-16"></div>
|
||||||
|
<div className="bg-red-500 rounded-b-lg h-20"></div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
||||||
|
style={{ height: "100px" }}
|
||||||
|
>
|
||||||
|
<div className="bg-gray-300 h-24"></div>
|
||||||
|
<div className="bg-gray-300 h-24"></div>
|
||||||
|
<div className="bg-gray-300 h-24"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-4">
|
||||||
|
<h3 className="text-lg font-medium">Notifications</h3>
|
||||||
|
<div className="grid grid-cols-1 gap-4 mt-4">
|
||||||
|
<div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="h-6 w-6 text-green-500"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="ml-2 font-medium">Topup</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span className="text-gray-500 text-sm">06:24:45 AM</span>
|
||||||
|
<span className="ml-2 text-green-500 text-sm">+$5,553</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-4 mt-4">
|
||||||
|
<div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="h-6 w-6 text-green-500"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="ml-2 font-medium">Topup</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span className="text-gray-500 text-sm">06:24:45 AM</span>
|
||||||
|
<span className="ml-2 text-green-500 text-sm">+$5,553</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Dashboard;
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const FeedBackAndRatings = () => {
|
||||||
|
return (
|
||||||
|
<></>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FeedBackAndRatings
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const History = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className=""></div></>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default History
|
||||||
@@ -0,0 +1,261 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Link, Outlet, useNavigate } from "react-router-dom";
|
||||||
|
import { BsThreeDotsVertical } from "react-icons/bs";
|
||||||
|
import { RiLogoutBoxLine } from "react-icons/ri";
|
||||||
|
import { IoMdSettings } from "react-icons/io";
|
||||||
|
import { FaHome } from "react-icons/fa";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { MdHistory } from "react-icons/md";
|
||||||
|
import { IoIosNotifications } from "react-icons/io";
|
||||||
|
import { MdFeedback } from "react-icons/md";
|
||||||
|
import { MdOutlineSupportAgent } from "react-icons/md";
|
||||||
|
import { IoSettings } from "react-icons/io5";
|
||||||
|
import { RiCalendarScheduleLine } from "react-icons/ri";
|
||||||
|
import { IoIosHome } from "react-icons/io";
|
||||||
|
import { BACKEND_URL } from "../../constants";
|
||||||
|
|
||||||
|
const MainUserPanel = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const handleLogOut = async () => {
|
||||||
|
const responce = await fetch(`${BACKEND_URL}/api/v1/logout`, {
|
||||||
|
method: "Get",
|
||||||
|
credentials: "include",
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await responce.json();
|
||||||
|
|
||||||
|
//console.log("User Logged out data is : ", data);
|
||||||
|
|
||||||
|
if (data.success == true) {
|
||||||
|
navigate("/user/login");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const user = useSelector((store) => store.user);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="container mx-auto p-4 ">
|
||||||
|
<div className="flex items-center mb-4 md:hidden">
|
||||||
|
<img
|
||||||
|
src={`${user.avatar}`}
|
||||||
|
alt="Profile Picture"
|
||||||
|
className="rounded-full w-10 h-10 mr-2"
|
||||||
|
/>
|
||||||
|
<span className="text-lg font-medium">Hello, {user.name}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row gap-4">
|
||||||
|
<div className="w-1.5/12 md:w-3/12 bg-white rounded-lg shadow p-4">
|
||||||
|
<div className="hidden md:flex items-center mb-4">
|
||||||
|
<img
|
||||||
|
src={`${user.avatar}`}
|
||||||
|
alt="Profile Picture"
|
||||||
|
className="rounded-full w-10 h-10 mr-2"
|
||||||
|
/>
|
||||||
|
<span className="text-lg font-medium">Hello, {user.name}</span>
|
||||||
|
</div>
|
||||||
|
<ul className="list-none">
|
||||||
|
<li className="py-2 border-b border-gray-200">
|
||||||
|
<Link to={"/user/dashboard"} className="flex items-center">
|
||||||
|
<IoIosHome className="text-xl font-bold text-gray-700" />
|
||||||
|
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
||||||
|
Dashboard
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="py-2 border-b border-gray-200">
|
||||||
|
<Link
|
||||||
|
to={"/user/dashboard/scheduledmeetings"}
|
||||||
|
className="flex items-center"
|
||||||
|
>
|
||||||
|
<RiCalendarScheduleLine className="text-xl text-gray-700" />
|
||||||
|
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
||||||
|
Scheduled Meeting
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="py-2 border-b border-gray-200">
|
||||||
|
<Link
|
||||||
|
to={"/user/dashboard/history"}
|
||||||
|
className="flex items-center"
|
||||||
|
>
|
||||||
|
<MdHistory className="text-xl text-gray-700" />
|
||||||
|
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
||||||
|
History
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="py-2 border-b border-gray-200">
|
||||||
|
<Link
|
||||||
|
to={"/user/dashboard/notifications"}
|
||||||
|
className="flex items-center"
|
||||||
|
>
|
||||||
|
<IoIosNotifications className="text-xl text-gray-700" />
|
||||||
|
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
||||||
|
Notifications
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="py-2 border-b border-gray-200">
|
||||||
|
<Link
|
||||||
|
to={"/user/dashboard/feedback"}
|
||||||
|
className="flex items-center"
|
||||||
|
>
|
||||||
|
<MdFeedback className="text-xl text-gray-700" />
|
||||||
|
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
||||||
|
Feedback and Ratings
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="py-2 border-b border-gray-200">
|
||||||
|
<Link
|
||||||
|
to={"/user/dashboard/support"}
|
||||||
|
className="flex items-center"
|
||||||
|
>
|
||||||
|
<MdOutlineSupportAgent className="text-xl text-gray-700" />
|
||||||
|
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
||||||
|
Support
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="py-2 border-b border-gray-200">
|
||||||
|
<Link
|
||||||
|
to={"/user/dashboard/settings"}
|
||||||
|
className="flex items-center"
|
||||||
|
>
|
||||||
|
<IoSettings className="text-xl text-gray-700" />
|
||||||
|
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
||||||
|
Settings
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<Outlet />
|
||||||
|
<div className="hidden md:block w-3/12 bg-white rounded-lg shadow p-4 h-96">
|
||||||
|
<div className="flex justify-between items-center mb-4">
|
||||||
|
<h3 className="text-lg font-medium">My Profile</h3>
|
||||||
|
<div className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex text-sm rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
|
||||||
|
id="user-menu-button"
|
||||||
|
aria-expanded="false"
|
||||||
|
data-dropdown-toggle="user-dropdown"
|
||||||
|
data-dropdown-placement="bottom"
|
||||||
|
>
|
||||||
|
<span className="sr-only">Open user menu</span>
|
||||||
|
<BsThreeDotsVertical className="text-lg" />
|
||||||
|
</button>
|
||||||
|
{/* <!-- Dropdown menu --> */}
|
||||||
|
<div
|
||||||
|
className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600"
|
||||||
|
id="user-dropdown"
|
||||||
|
>
|
||||||
|
<div className="px-4 py-3">
|
||||||
|
<span className="block text-sm text-gray-900 dark:text-white">
|
||||||
|
Bonnie Green
|
||||||
|
</span>
|
||||||
|
<span className="block text-sm text-gray-500 truncate dark:text-gray-400">
|
||||||
|
name@flowbite.com
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ul className="py-2" aria-labelledby="user-menu-button">
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to={"/user/dashboard"}
|
||||||
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
Dashboard
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
Earnings
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
onClick={handleLogOut}
|
||||||
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
Sign out
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
data-collapse-toggle="navbar-user"
|
||||||
|
type="button"
|
||||||
|
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
||||||
|
aria-controls="navbar-user"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
|
<span className="sr-only">Open main menu</span>
|
||||||
|
<svg
|
||||||
|
className="w-5 h-5"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 17 14"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M1 1h15M1 7h15M1 13h15"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-4">
|
||||||
|
<img
|
||||||
|
src={`${user.avatar}`}
|
||||||
|
alt="Profile Picture"
|
||||||
|
class="rounded-full w-24 h-24 mx-auto"
|
||||||
|
/>
|
||||||
|
<h4 class="text-lg font-medium mt-2">{user.name}</h4>
|
||||||
|
{/* <span class="text-gray-500 text-sm">@thomasdox</span> */}
|
||||||
|
<p class="text-gray-500 text-sm mt-2">
|
||||||
|
Join on {user.createdAt && user.createdAt.substring(0, 10)}
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 text-sm mt-2">
|
||||||
|
{user.description == null &&
|
||||||
|
"I am a Senior Software Engineer at Google and also mentored 50+ students to get there dream job."}
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-center mt-4">
|
||||||
|
<button class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
|
||||||
|
<FaHome className="text-lg font-extrabold" />
|
||||||
|
</button>
|
||||||
|
<button class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
|
||||||
|
<IoMdSettings className="text-lg font-extrabold" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded"
|
||||||
|
onClick={handleLogOut}
|
||||||
|
>
|
||||||
|
<RiLogoutBoxLine className="text-lg font-extrabold" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MainUserPanel;
|
||||||
@@ -0,0 +1,100 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
|
const MentorSessionCard = ({ session }) => {
|
||||||
|
const {
|
||||||
|
id,
|
||||||
|
mentorName,
|
||||||
|
mentorMail,
|
||||||
|
mentorAvatar,
|
||||||
|
studentName,
|
||||||
|
studentMail,
|
||||||
|
studentAvatar,
|
||||||
|
roomid,
|
||||||
|
schduledTime,
|
||||||
|
createdAt,
|
||||||
|
updatedAt,
|
||||||
|
amountPaid,
|
||||||
|
status,
|
||||||
|
} = session;
|
||||||
|
|
||||||
|
const user = useSelector((store) => store.user);
|
||||||
|
|
||||||
|
//console.log("User in the Dashborde : ");
|
||||||
|
|
||||||
|
let timeStringToDayName = (dateStr) => {
|
||||||
|
// for getting day name by time string
|
||||||
|
// const dateStr = "2024-09-26T04:31:50.646+00:00";
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
const dayName = date.toLocaleDateString("en-US", { weekday: "long" });
|
||||||
|
//console.log(dayName);
|
||||||
|
return dayName;
|
||||||
|
};
|
||||||
|
|
||||||
|
let timeStringtoRealTime = (utcDateStr) => {
|
||||||
|
// for converting the to get time in am or pm
|
||||||
|
//const utcDateStr = "2024-09-26T04:31:50.646+00:00";
|
||||||
|
const date = new Date(utcDateStr);
|
||||||
|
// India TimeZone is Asia/Kolkata, which is UTC+5:30
|
||||||
|
const options = {
|
||||||
|
timeZone: "Asia/Kolkata",
|
||||||
|
hour: "numeric",
|
||||||
|
minute: "numeric",
|
||||||
|
second: "numeric",
|
||||||
|
hour12: true,
|
||||||
|
year: "numeric",
|
||||||
|
month: "long",
|
||||||
|
day: "numeric",
|
||||||
|
};
|
||||||
|
|
||||||
|
const istDate = date.toLocaleString("en-US", options);
|
||||||
|
console.log(istDate); // Output: "September 26, 2024, 10:01:50 AM"
|
||||||
|
return istDate;
|
||||||
|
};
|
||||||
|
|
||||||
|
const realTimeString = timeStringtoRealTime(schduledTime);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<li class="flex flex-col gap-5 w-full h-auto max-h-28 px-3 py-1 rounded-md hover:bg-slate-100 border-b-2">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<img
|
||||||
|
class="w-8 h-8 rounded-full"
|
||||||
|
src="/images/profile.jpeg"
|
||||||
|
alt="Neil image"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0 ms-4">
|
||||||
|
<p class="text-sm font-medium text-gray-900 truncate dark:text-white">
|
||||||
|
{user.role === "user" ? mentorName : studentName}
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-gray-500 truncate dark:text-gray-400">
|
||||||
|
{user.role === "user" ? mentorMail : studentMail}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
|
||||||
|
₹{amountPaid}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">
|
||||||
|
{timeStringToDayName(schduledTime)},
|
||||||
|
{realTimeString.substring(21, 26) +
|
||||||
|
" " +
|
||||||
|
realTimeString.substring(30)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<p className="text-gray-500">{realTimeString.substring(0, 18)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MentorSessionCard;
|
||||||
@@ -0,0 +1,120 @@
|
|||||||
|
import React from "react";
|
||||||
|
import Notification from "../../components/Notification";
|
||||||
|
|
||||||
|
const Notifications = () => {
|
||||||
|
let notifications = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
type: "success",
|
||||||
|
message: "Your profile has been updated successfully.",
|
||||||
|
timestamp: "2024-09-26T10:00:00Z",
|
||||||
|
isRead: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
type: "warning",
|
||||||
|
message: "Your subscription is about to expire in 3 days.",
|
||||||
|
timestamp: "2024-09-25T09:30:00Z",
|
||||||
|
isRead: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
type: "info",
|
||||||
|
message: "New mentor has joined your network.",
|
||||||
|
timestamp: "2024-09-24T15:45:00Z",
|
||||||
|
isRead: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
type: "error",
|
||||||
|
message: "Failed to connect to the video call. Please try again.",
|
||||||
|
timestamp: "2024-09-26T08:20:00Z",
|
||||||
|
isRead: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
type: "error",
|
||||||
|
message: "Failed to connect to the video call. Please try again.",
|
||||||
|
timestamp: "2024-09-26T08:20:00Z",
|
||||||
|
isRead: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
type: "error",
|
||||||
|
message: "Failed to connect to the video call. Please try again.",
|
||||||
|
timestamp: "2024-09-26T08:20:00Z",
|
||||||
|
isRead: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
type: "error",
|
||||||
|
message: "Failed to connect to the video call. Please try again.",
|
||||||
|
timestamp: "2024-09-26T08:20:00Z",
|
||||||
|
isRead: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
type: "error",
|
||||||
|
message: "Failed to connect to the video call. Please try again.",
|
||||||
|
timestamp: "2024-09-26T08:20:00Z",
|
||||||
|
isRead: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
type: "error",
|
||||||
|
message: "Failed to connect to the video call. Please try again.",
|
||||||
|
timestamp: "2024-09-26T08:20:00Z",
|
||||||
|
isRead: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
type: "error",
|
||||||
|
message: "Failed to connect to the video call. Please try again.",
|
||||||
|
timestamp: "2024-09-26T08:20:00Z",
|
||||||
|
isRead: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// for getting day name by time string
|
||||||
|
// const dateStr = '2024-09-26T04:31:50.646+00:00';
|
||||||
|
// const date = new Date(dateStr);
|
||||||
|
// const dayName = date.toLocaleDateString('en-US', { weekday: 'long' });
|
||||||
|
// console.log(dayName); // Output: "Thursday"
|
||||||
|
|
||||||
|
// for converting the to get time in am or pm
|
||||||
|
// const utcDateStr = '2024-09-26T04:31:50.646+00:00';
|
||||||
|
// const date = new Date(utcDateStr);
|
||||||
|
// India TimeZone is Asia/Kolkata, which is UTC+5:30
|
||||||
|
// const options = {
|
||||||
|
// timeZone: 'Asia/Kolkata',
|
||||||
|
// hour: 'numeric',
|
||||||
|
// minute: 'numeric',
|
||||||
|
// second: 'numeric',
|
||||||
|
// hour12: true,
|
||||||
|
// year: 'numeric',
|
||||||
|
// month: 'long',
|
||||||
|
// day: 'numeric'
|
||||||
|
// };
|
||||||
|
|
||||||
|
// const istDate = date.toLocaleString('en-US', options);
|
||||||
|
// console.log(istDate); // Output: "September 26, 2024, 10:01:50 AM"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="w-full bg-white rounded-lg shadow p-4 min-h-[85vh]">
|
||||||
|
<div className="flex flex-col justify-center items-center mb-4">
|
||||||
|
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||||
|
Notifications
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col w-full gap-2">
|
||||||
|
{notifications.map((notification) => (
|
||||||
|
<Notification key={notification.id} notification={notification} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Notifications;
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
import React from "react";
|
||||||
|
import MentorSessionCard from "./MentorSessionCard";
|
||||||
|
|
||||||
|
const ScheduleMeeting = () => {
|
||||||
|
let meetingInfo = [
|
||||||
|
{
|
||||||
|
id: "7K6dU5qLpF9tS4",
|
||||||
|
mentorName: "mentor",
|
||||||
|
mentorMail: "mentor4@gmail.com",
|
||||||
|
mentorAvatar: "/images/profile4.jpeg",
|
||||||
|
studentName: "student",
|
||||||
|
studentMail: "student4@gmail.com",
|
||||||
|
studentAvatar: "/images/profile4.jpeg",
|
||||||
|
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||||
|
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
amountPaid: "550",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "7K6dU5qLpF9tS4",
|
||||||
|
mentorName: "mentor",
|
||||||
|
mentorMail: "mentor4@gmail.com",
|
||||||
|
mentorAvatar: "/images/profile4.jpeg",
|
||||||
|
studentName: "student",
|
||||||
|
studentMail: "student4@gmail.com",
|
||||||
|
studentAvatar: "/images/profile4.jpeg",
|
||||||
|
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||||
|
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
amountPaid: "550",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "7K6dU5qLpF9tS4",
|
||||||
|
mentorName: "mentor",
|
||||||
|
mentorMail: "mentor4@gmail.com",
|
||||||
|
mentorAvatar: "/images/profile4.jpeg",
|
||||||
|
studentName: "student",
|
||||||
|
studentMail: "student4@gmail.com",
|
||||||
|
studentAvatar: "/images/profile4.jpeg",
|
||||||
|
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||||
|
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
amountPaid: "550",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "7K6dU5qLpF9tS4",
|
||||||
|
mentorName: "mentor",
|
||||||
|
mentorMail: "mentor4@gmail.com",
|
||||||
|
mentorAvatar: "/images/profile4.jpeg",
|
||||||
|
studentName: "student",
|
||||||
|
studentMail: "student4@gmail.com",
|
||||||
|
studentAvatar: "/images/profile4.jpeg",
|
||||||
|
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||||
|
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
amountPaid: "550",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "7K6dU5qLpF9tS4",
|
||||||
|
mentorName: "mentor",
|
||||||
|
mentorMail: "mentor4@gmail.com",
|
||||||
|
mentorAvatar: "/images/profile4.jpeg",
|
||||||
|
studentName: "student",
|
||||||
|
studentMail: "student4@gmail.com",
|
||||||
|
studentAvatar: "/images/profile4.jpeg",
|
||||||
|
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||||
|
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
amountPaid: "550",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "7K6dU5qLpF9tS4",
|
||||||
|
mentorName: "mentor",
|
||||||
|
mentorMail: "mentor4@gmail.com",
|
||||||
|
mentorAvatar: "/images/profile4.jpeg",
|
||||||
|
studentName: "student",
|
||||||
|
studentMail: "student4@gmail.com",
|
||||||
|
studentAvatar: "/images/profile4.jpeg",
|
||||||
|
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||||
|
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
amountPaid: "550",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "7K6dU5qLpF9tS4",
|
||||||
|
mentorName: "mentor",
|
||||||
|
mentorMail: "mentor4@gmail.com",
|
||||||
|
mentorAvatar: "/images/profile4.jpeg",
|
||||||
|
studentName: "student",
|
||||||
|
studentMail: "student4@gmail.com",
|
||||||
|
studentAvatar: "/images/profile4.jpeg",
|
||||||
|
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||||
|
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||||
|
amountPaid: "550",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="w-full bg-white rounded-lg shadow p-4 min-h-[85vh]">
|
||||||
|
<div className="flex flex-col justify-center items-center mb-4">
|
||||||
|
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||||
|
Scheduled Meetings
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div className="flex w-full flex-col gap-5">
|
||||||
|
{meetingInfo.map((session) => (
|
||||||
|
<MentorSessionCard session={session} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ScheduleMeeting;
|
||||||
@@ -0,0 +1,273 @@
|
|||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
import { loaderSliceActions } from "../../store/loaderSlice";
|
||||||
|
import { userSliceActions } from "../../store/userSlice";
|
||||||
|
import { BACKEND_URL } from "../../constants";
|
||||||
|
|
||||||
|
const Settings = () => {
|
||||||
|
const nameElement = useRef();
|
||||||
|
const emailElement = useRef();
|
||||||
|
const passwordElement = useRef();
|
||||||
|
const confirmPassElement = useRef();
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
|
||||||
|
const [avatar, setAvatar] = useState();
|
||||||
|
|
||||||
|
const user = useSelector((store) => store.user);
|
||||||
|
|
||||||
|
const loader = useSelector((store) => store.loader);
|
||||||
|
|
||||||
|
//console.log("Before the user is : ", user);
|
||||||
|
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
// Optimise the call for the database here you are refreshing the page again and again which makes read and write operation
|
||||||
|
const handleAvatar = async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
formData.append("avatar", avatar);
|
||||||
|
|
||||||
|
//console.log("forma daata is : ", formData);
|
||||||
|
|
||||||
|
if (avatar) {
|
||||||
|
dispatch(loaderSliceActions.showLoader());
|
||||||
|
//console.log("The loader values is : ", loader);
|
||||||
|
const responce = await fetch(`${BACKEND_URL}/api/v1/user/avatar`, {
|
||||||
|
method: "PUT",
|
||||||
|
credentials: "include",
|
||||||
|
body: formData,
|
||||||
|
});
|
||||||
|
|
||||||
|
const finalResponce = await responce.json();
|
||||||
|
|
||||||
|
//console.log("Our final responce is : ", finalResponce);
|
||||||
|
|
||||||
|
if (finalResponce.success) {
|
||||||
|
dispatch(loaderSliceActions.hideLoader());
|
||||||
|
//console.log("The loader values is : ", loader);
|
||||||
|
dispatch(userSliceActions.addUser(finalResponce.data));
|
||||||
|
// console.log("Updated User is : ", user);
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLogin = async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const responce = await fetch(`${BACKEND_URL}/api/v1/login`, {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "include",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
email: emailElement.current.value,
|
||||||
|
password: passwordElement.current.value,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const user = await responce.json();
|
||||||
|
|
||||||
|
//console.log("User Login Data is here : ", user);
|
||||||
|
|
||||||
|
dispatch(userSliceActions.addUser(user.data));
|
||||||
|
|
||||||
|
emailElement.current.value = "";
|
||||||
|
passwordElement.current.value = "";
|
||||||
|
|
||||||
|
if (user.success == true) {
|
||||||
|
navigate("/");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<>
|
||||||
|
<div className="w-full bg-white rounded-lg shadow p-4 min-h-[85vh]">
|
||||||
|
<div className="flex flex-col justify-center items-center mb-4">
|
||||||
|
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||||
|
Update Your Avatar
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="w-full h-auto flex items-center justify-center py-7">
|
||||||
|
<div className="w-[9rem] h-[9rem] overflow-hidden rounded-full object-center">
|
||||||
|
<img src={`${user.avatar}`} alt="Avatar" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form onSubmit={handleAvatar}>
|
||||||
|
<div class="flex items-center justify-center w-full">
|
||||||
|
<img src={formData.avatar && `${formData.avatar}`} alt="" />
|
||||||
|
<label
|
||||||
|
for="dropzone-file"
|
||||||
|
class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col items-center justify-center pt-5 pb-6 ">
|
||||||
|
<svg
|
||||||
|
class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 20 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
{avatar ? (
|
||||||
|
<span class="font-semibold">
|
||||||
|
Avatar uploaded successfulky
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span class="font-semibold">
|
||||||
|
Click to upload and press Upload button
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
SVG, PNG, JPG or GIF (MAX. 800x400px)
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="bg-gray-600 px-4 py-1 rounded-lg text-white font-semibold my-4"
|
||||||
|
>
|
||||||
|
Upload
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
id="dropzone-file"
|
||||||
|
type="file"
|
||||||
|
class="hidden"
|
||||||
|
onChange={(e) => {
|
||||||
|
setAvatar(e.target.files[0]);
|
||||||
|
//console.log(e.target.files[0]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="flex flex-col justify-center items-center mb-4">
|
||||||
|
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||||
|
Update Your Details
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form className="space-y-6" onSubmit={handleLogin}>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="password"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
Name :
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="password"
|
||||||
|
ref={nameElement}
|
||||||
|
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
|
placeholder="Enter your Updated Name here.."
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="username"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
Email :
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="username"
|
||||||
|
ref={emailElement}
|
||||||
|
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
|
placeholder="Enter your Updated Email here.."
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* <div>
|
||||||
|
<label
|
||||||
|
for="password"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
ref={passwordElement}
|
||||||
|
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
|
placeholder="********"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div> */}
|
||||||
|
<div className="flex justify-center items-center">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="text-white bg-purple-500 hover:bg-purple-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||||
|
>
|
||||||
|
Change the Details
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="flex flex-col justify-center items-center my-10">
|
||||||
|
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||||
|
Update Your Password
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form className="space-y-6" onSubmit={handleLogin}>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="password"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
New Password :
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
ref={passwordElement}
|
||||||
|
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
|
placeholder="Enter your New Password to update.."
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="password"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
Confirm Password :
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
ref={confirmPassElement}
|
||||||
|
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
|
placeholder="Enter your New Password to update.."
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-center items-center">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="text-white bg-purple-500 hover:bg-purple-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||||
|
>
|
||||||
|
Change the Password
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Settings;
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Support = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className=""></div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Support;
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
class PeerService {
|
||||||
|
constructor() {
|
||||||
|
if (!this.peer) {
|
||||||
|
this.peer = new RTCPeerConnection({
|
||||||
|
iceServers: [
|
||||||
|
{
|
||||||
|
urls: [
|
||||||
|
"stun:stun.l.google.com:19302",
|
||||||
|
"stun:global.stun.twilio.com:3478",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async getAnswer(offer) {
|
||||||
|
if (this.peer) {
|
||||||
|
await this.peer.setRemoteDescription(offer);
|
||||||
|
const ans = await this.peer.createAnswer();
|
||||||
|
await this.peer.setLocalDescription(new RTCSessionDescription(ans));
|
||||||
|
return ans;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async setLocalDescription(ans) {
|
||||||
|
if (this.peer) {
|
||||||
|
await this.peer.setRemoteDescription(new RTCSessionDescription(ans));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async getOffer() {
|
||||||
|
if (this.peer) {
|
||||||
|
const offer = await this.peer.createOffer();
|
||||||
|
await this.peer.setLocalDescription(new RTCSessionDescription(offer));
|
||||||
|
return offer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new PeerService();
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import { configureStore } from "@reduxjs/toolkit";
|
||||||
|
import userSlice from "./userSlice";
|
||||||
|
import messageSlice from "./messageSlice";
|
||||||
|
import loaderSlice from "./loaderSlice";
|
||||||
|
|
||||||
|
const MentifyStore = configureStore({
|
||||||
|
reducer: {
|
||||||
|
user: userSlice.reducer,
|
||||||
|
messages: messageSlice.reducer,
|
||||||
|
loader: loaderSlice.reducer,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default MentifyStore;
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { createSlice } from "@reduxjs/toolkit";
|
||||||
|
|
||||||
|
const loaderSlice = createSlice({
|
||||||
|
name: "loader",
|
||||||
|
initialState: false,
|
||||||
|
reducers: {
|
||||||
|
showLoader: (state) => {
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
hideLoader: (state) => {
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const loaderSliceActions = loaderSlice.actions;
|
||||||
|
|
||||||
|
export default loaderSlice;
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import { createSlice } from "@reduxjs/toolkit";
|
||||||
|
|
||||||
|
const messageSlice = createSlice({
|
||||||
|
name: "messages",
|
||||||
|
initialState: [],
|
||||||
|
reducers: {
|
||||||
|
addMessage: (state, action) => {
|
||||||
|
return [...state, action.payload];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const messageActions = messageSlice.actions;
|
||||||
|
|
||||||
|
export default messageSlice;
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import { createSlice } from "@reduxjs/toolkit";
|
||||||
|
const userSlice = createSlice({
|
||||||
|
name: "user",
|
||||||
|
initialState: {
|
||||||
|
name: "Unloggedin User",
|
||||||
|
email: "Unlogged@gmail.com",
|
||||||
|
avatar: "/images/default1.png",
|
||||||
|
role: "unloggeduser",
|
||||||
|
mainInterest: [],
|
||||||
|
},
|
||||||
|
reducers: {
|
||||||
|
addUser: (state, action) => {
|
||||||
|
return (state = action.payload);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const userSliceActions = userSlice.actions;
|
||||||
|
|
||||||
|
export default userSlice;
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
darkMode: 'selector',
|
||||||
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"rewrites": [
|
||||||
|
{
|
||||||
|
"source": "/(.*)",
|
||||||
|
"destination": "/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user