frontend completed
This commit is contained in:
parent
d884f0737f
commit
c8016b04a9
77
package-lock.json
generated
77
package-lock.json
generated
|
|
@ -12,7 +12,9 @@
|
|||
"framer-motion": "^12.0.6",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router": "^7.1.3",
|
||||
"react-router-dom": "^7.1.3",
|
||||
"react-toastify": "^11.0.3",
|
||||
"swiper": "^11.2.1",
|
||||
"tailwindcss": "^4.0.0"
|
||||
},
|
||||
|
|
@ -36,6 +38,7 @@
|
|||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -52,6 +55,7 @@
|
|||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -68,6 +72,7 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -84,6 +89,7 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -100,6 +106,7 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -116,6 +123,7 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -132,6 +140,7 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -148,6 +157,7 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -164,6 +174,7 @@
|
|||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -180,6 +191,7 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -196,6 +208,7 @@
|
|||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -212,6 +225,7 @@
|
|||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -228,6 +242,7 @@
|
|||
"cpu": [
|
||||
"mips64el"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -244,6 +259,7 @@
|
|||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -260,6 +276,7 @@
|
|||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -276,6 +293,7 @@
|
|||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -292,6 +310,7 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -308,6 +327,7 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -324,6 +344,7 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -340,6 +361,7 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -356,6 +378,7 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -372,6 +395,7 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -388,6 +412,7 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -404,6 +429,7 @@
|
|||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -420,6 +446,7 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -643,6 +670,7 @@
|
|||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -656,6 +684,7 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -669,6 +698,7 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -682,6 +712,7 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -695,6 +726,7 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -708,6 +740,7 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -721,6 +754,7 @@
|
|||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -734,6 +768,7 @@
|
|||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -747,6 +782,7 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -760,6 +796,7 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -773,6 +810,7 @@
|
|||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -786,6 +824,7 @@
|
|||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -799,6 +838,7 @@
|
|||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -812,6 +852,7 @@
|
|||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -825,6 +866,7 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -838,6 +880,7 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -851,6 +894,7 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -864,6 +908,7 @@
|
|||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -877,6 +922,7 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -1343,6 +1389,7 @@
|
|||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
|
||||
"integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
|
|
@ -1713,6 +1760,15 @@
|
|||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
|
|
@ -2114,6 +2170,7 @@
|
|||
"version": "0.24.2",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz",
|
||||
"integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
|
|
@ -2492,6 +2549,7 @@
|
|||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
|
|
@ -3609,6 +3667,7 @@
|
|||
"version": "3.3.8",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
|
||||
"integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
|
|
@ -3849,6 +3908,7 @@
|
|||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
||||
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/possible-typed-array-names": {
|
||||
|
|
@ -3865,6 +3925,7 @@
|
|||
"version": "8.5.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
|
||||
"integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
@ -3993,6 +4054,19 @@
|
|||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-toastify": {
|
||||
"version": "11.0.3",
|
||||
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.3.tgz",
|
||||
"integrity": "sha512-cbPtHJPfc0sGqVwozBwaTrTu1ogB9+BLLjd4dDXd863qYLj7DGrQ2sg5RAChjFUB4yc3w8iXOtWcJqPK/6xqRQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18 || ^19",
|
||||
"react-dom": "^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/reflect.getprototypeof": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
|
||||
|
|
@ -4069,6 +4143,7 @@
|
|||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.32.0.tgz",
|
||||
"integrity": "sha512-JmrhfQR31Q4AuNBjjAX4s+a/Pu/Q8Q9iwjWBsjRH1q52SPFE2NqRMK6fUZKKnvKO6id+h7JIRf0oYsph53eATg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/estree": "1.0.6"
|
||||
|
|
@ -4335,6 +4410,7 @@
|
|||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
|
@ -4647,6 +4723,7 @@
|
|||
"version": "6.0.11",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.0.11.tgz",
|
||||
"integrity": "sha512-4VL9mQPKoHy4+FE0NnRE/kbY51TOfaknxAjt3fJbGJxhIpBZiqVzlZDEesWWsuREXHwNdAoOFZ9MkPEVXczHwg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"esbuild": "^0.24.2",
|
||||
|
|
|
|||
|
|
@ -14,7 +14,9 @@
|
|||
"framer-motion": "^12.0.6",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router": "^7.1.3",
|
||||
"react-router-dom": "^7.1.3",
|
||||
"react-toastify": "^11.0.3",
|
||||
"swiper": "^11.2.1",
|
||||
"tailwindcss": "^4.0.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
BIN
public/warning.png
Normal file
BIN
public/warning.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
26
src/App.jsx
26
src/App.jsx
|
|
@ -1,12 +1,36 @@
|
|||
import React from "react";
|
||||
import "./App.css";
|
||||
import AdminDashboard from "./pages/AdminDashboard";
|
||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
import Error from "./pages/Error";
|
||||
import Login from "./pages/Login";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
import "react-toastify/dist/ReactToastify.css";
|
||||
|
||||
function App() {
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
errorElement: <Error />,
|
||||
children: [
|
||||
{
|
||||
path: "/",
|
||||
element: <Login />,
|
||||
},
|
||||
{
|
||||
path: "/dashboard",
|
||||
element: <AdminDashboard />,
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<AdminDashboard />
|
||||
<RouterProvider router={router} />
|
||||
<ToastContainer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
|
|
@ -1,7 +1,60 @@
|
|||
import React from "react";
|
||||
|
||||
const Coach = () => {
|
||||
return <div></div>;
|
||||
const Coach = ({ coaches, newCoach, setNewCoach, addCoach, removeCoach }) => {
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-4">Manage Coaches</h2>
|
||||
<div className="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Coach Name"
|
||||
value={newCoach.name}
|
||||
onChange={(e) => setNewCoach({ ...newCoach, name: e.target.value })}
|
||||
className="px-4 py-2 border rounded-lg bg-gray-800 text-white focus:ring focus:ring-gray-500"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Coach Title"
|
||||
value={newCoach.title}
|
||||
onChange={(e) => setNewCoach({ ...newCoach, title: e.target.value })}
|
||||
className="px-4 py-2 border rounded-lg bg-gray-800 text-white focus:ring focus:ring-gray-500"
|
||||
/>
|
||||
<button
|
||||
onClick={addCoach}
|
||||
className="bg-white text-black px-4 py-2 rounded-lg hover:bg-gray-300 cursor-pointer"
|
||||
>
|
||||
Add Coach
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4">
|
||||
{coaches.map((coach, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-center justify-between bg-gray-800 p-4 rounded-lg shadow-md"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-white">{coach.name}</h3>
|
||||
<p className="text-gray-400">{coach.title}</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 cursor-pointer"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => removeCoach(index)}
|
||||
className="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 cursor-pointer"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Coach;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
import React from "react";
|
||||
|
||||
const Events = ({ events, newEvent, setNewEvent, addEvent }) => {
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-4">Events Calendar</h2>
|
||||
<div className="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Event Title"
|
||||
value={newEvent.title}
|
||||
onChange={(e) => setNewEvent({ ...newEvent, title: e.target.value })}
|
||||
className="px-4 py-2 border rounded-lg bg-gray-800 text-white focus:ring focus:ring-gray-500"
|
||||
/>
|
||||
<input
|
||||
type="date"
|
||||
value={newEvent.date}
|
||||
onChange={(e) => setNewEvent({ ...newEvent, date: e.target.value })}
|
||||
className="px-4 py-2 border rounded-lg bg-gray-800 text-white focus:ring focus:ring-gray-500"
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Description"
|
||||
value={newEvent.description}
|
||||
onChange={(e) =>
|
||||
setNewEvent({ ...newEvent, description: e.target.value })
|
||||
}
|
||||
className="col-span-2 px-4 py-2 border rounded-lg bg-gray-800 text-white focus:ring focus:ring-gray-500"
|
||||
rows="3"
|
||||
/>
|
||||
<button
|
||||
onClick={addEvent}
|
||||
className="bg-white text-black px-4 py-2 rounded-lg hover:bg-gray-300 cursor-pointer"
|
||||
>
|
||||
Add Event
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4">
|
||||
{events.map((event, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-center justify-between bg-gray-800 p-4 rounded-lg shadow-md"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-white">{event.title}</h3>
|
||||
<p className="text-gray-400 text-sm">{event.date}</p>
|
||||
<p className="text-gray-300">{event.description}</p>
|
||||
</div>
|
||||
<button
|
||||
className="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Events;
|
||||
|
|
@ -1,7 +1,45 @@
|
|||
import React from "react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import { Navigation } from "swiper/modules";
|
||||
|
||||
const Hero = () => {
|
||||
return <div></div>;
|
||||
const Hero = ({ images }) => {
|
||||
return (
|
||||
<div>
|
||||
<Swiper
|
||||
modules={[Navigation]}
|
||||
navigation
|
||||
loop={true}
|
||||
className="rounded-xl overflow-hidden shadow-lg mb-6"
|
||||
spaceBetween={10}
|
||||
slidesPerView={1}
|
||||
>
|
||||
{images.map((image, index) => (
|
||||
<SwiperSlide key={index} className="relative">
|
||||
<img
|
||||
src={image}
|
||||
alt={`Slide ${index + 1}`}
|
||||
className="w-full h-[600px] object-cover"
|
||||
/>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<button className="absolute top-4 right-4 bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 cursor-pointer">
|
||||
Update
|
||||
</button>
|
||||
|
||||
<button className="absolute top-4 right-30 bg-red-500 text-white px-4 py-2 rounded-full hover:bg-red-600 cursor-pointer">
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
<button className="bg-white text-black px-6 py-3 rounded-lg hover:bg-gray-300 cursor-pointer">
|
||||
Add Image
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
|
|
|
|||
70
src/components/LoginForm.jsx
Normal file
70
src/components/LoginForm.jsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import React, { useState } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const LoginForm = () => {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogin = () => {
|
||||
const validEmail = "test";
|
||||
const validPassword = "test@123";
|
||||
|
||||
if (email === validEmail && password === validPassword) {
|
||||
toast.success("Login successful!");
|
||||
navigate("/dashboard");
|
||||
} else {
|
||||
toast.error("Invalid credentials. Please try again.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white px-10 py-20 rounded-3xl border-2 border-gray-200 mx-2">
|
||||
<h1 className="text-5xl font-semibold">Login</h1>
|
||||
<p className="font-medium text-lg text-gray-500 mt-4">
|
||||
Please enter your login credentials!
|
||||
</p>
|
||||
<div className="mt-8">
|
||||
<div>
|
||||
<label htmlFor="email" className="text-lg font-medium">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full border-2 border-gray-100 rounded-xl p-4 mt-1 bg-transparent"
|
||||
id="email"
|
||||
placeholder="Enter Your Email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<label htmlFor="password" className="text-lg font-medium">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
className="w-full border-2 border-gray-100 rounded-xl p-4 mt-1 bg-transparent"
|
||||
id="password"
|
||||
placeholder="Enter Your Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex flex-col gap-y-4">
|
||||
<button
|
||||
className="bg-violet-500 text-white text-lg font-bold py-3 rounded-xl active:scale-[0.98] transition-all active:duration-100 hover:scale-[1.01] ease-in-out cursor-pointer"
|
||||
onClick={handleLogin}
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginForm;
|
||||
|
|
@ -1,18 +1,20 @@
|
|||
import React, { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import { Navigation } from "swiper/modules";
|
||||
import Hero from "../components/Hero";
|
||||
import Coach from "../components/Coach";
|
||||
import Events from "../components/Events";
|
||||
|
||||
const AdminDashboard = () => {
|
||||
const [activeTab, setActiveTab] = useState("hero");
|
||||
const [images, setImages] = useState([
|
||||
|
||||
// Hero state
|
||||
const [images, setImages] = useState([
|
||||
"https://vibra.qodeinteractive.com/wp-content/uploads/2019/02/h1-slider-3-background.jpg",
|
||||
"https://vibra.qodeinteractive.com/wp-content/uploads/2019/02/h1-slider-2-background.jpg",
|
||||
"https://vibra.qodeinteractive.com/wp-content/uploads/2019/02/h1-slider-1-background.jpg",
|
||||
]);
|
||||
|
||||
// Coach state
|
||||
const [coaches, setCoaches] = useState([
|
||||
{ name: "John Doe", title: "Head Coach" },
|
||||
{ name: "Jane Smith", title: "Assistant Coach" },
|
||||
|
|
@ -30,15 +32,35 @@ const AdminDashboard = () => {
|
|||
setCoaches(coaches.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
// Event state
|
||||
const [events, setEvents] = useState([
|
||||
{
|
||||
title: "Team Meeting",
|
||||
date: "2025-02-01",
|
||||
description: "Monthly meeting.",
|
||||
},
|
||||
{
|
||||
title: "Workshop",
|
||||
date: "2025-02-05",
|
||||
description: "Training workshop.",
|
||||
},
|
||||
]);
|
||||
const [newEvent, setNewEvent] = useState({
|
||||
title: "",
|
||||
date: "",
|
||||
description: "",
|
||||
});
|
||||
|
||||
const addEvent = () => {
|
||||
if (newEvent.title && newEvent.date && newEvent.description) {
|
||||
setEvents([...events, newEvent]);
|
||||
setNewEvent({ title: "", date: "", description: "" });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen w-full bg-black text-white">
|
||||
<motion.div
|
||||
className="w-full"
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
{/* Header */}
|
||||
<motion.div className="w-full">
|
||||
<div className="bg-gray-900 p-6 shadow-lg">
|
||||
<h1 className="text-3xl font-bold tracking-wide">Admin Dashboard</h1>
|
||||
</div>
|
||||
|
|
@ -65,117 +87,28 @@ const AdminDashboard = () => {
|
|||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="p-8"
|
||||
>
|
||||
{activeTab === "hero" && (
|
||||
<div>
|
||||
<Swiper
|
||||
modules={[Navigation]}
|
||||
navigation
|
||||
loop={true}
|
||||
className="rounded-xl overflow-hidden shadow-lg mb-6"
|
||||
spaceBetween={10}
|
||||
slidesPerView={1}
|
||||
>
|
||||
{images.map((image, index) => (
|
||||
<SwiperSlide key={index} className="relative">
|
||||
<img
|
||||
src={image}
|
||||
alt={`Slide ${index + 1}`}
|
||||
className="w-full h-72 object-cover"
|
||||
/>
|
||||
<button
|
||||
className="absolute top-4 right-4 bg-red-500 text-white px-4 py-2 rounded-full hover:bg-red-600"
|
||||
onClick={() =>
|
||||
setImages(images.filter((_, i) => i !== index))
|
||||
}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
|
||||
<button className="bg-white text-black px-6 py-3 rounded-lg hover:bg-gray-300">
|
||||
Add Image
|
||||
</button>
|
||||
|
||||
<p className="text-gray-400 mt-4">Manage hero section images.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<motion.div key={activeTab} className="p-8">
|
||||
{/* Hero Content */}
|
||||
{activeTab === "hero" && <Hero images={images} />}
|
||||
{/* Coach Content */}
|
||||
{activeTab === "coach" && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-4">Manage Coaches</h2>
|
||||
<div className="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Coach Name"
|
||||
value={newCoach.name}
|
||||
onChange={(e) =>
|
||||
setNewCoach({ ...newCoach, name: e.target.value })
|
||||
}
|
||||
className="px-4 py-3 border rounded-lg bg-gray-800 text-white focus:ring focus:ring-gray-500"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Coach Title"
|
||||
value={newCoach.title}
|
||||
onChange={(e) =>
|
||||
setNewCoach({ ...newCoach, title: e.target.value })
|
||||
}
|
||||
className="px-4 py-3 border rounded-lg bg-gray-800 text-white focus:ring focus:ring-gray-500"
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={addCoach}
|
||||
className="bg-white text-black px-6 py-3 rounded-lg hover:bg-gray-300"
|
||||
>
|
||||
Add Coach
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4">
|
||||
{coaches.map((coach, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-center justify-between bg-gray-800 p-4 rounded-lg shadow-md"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-white">
|
||||
{coach.name}
|
||||
</h3>
|
||||
<p className="text-gray-400">{coach.title}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => removeCoach(index)}
|
||||
className="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<p className="text-gray-400 mt-4">Manage the coaching team.</p>
|
||||
</div>
|
||||
<Coach
|
||||
coaches={coaches}
|
||||
newCoach={newCoach}
|
||||
setNewCoach={setNewCoach}
|
||||
addCoach={addCoach}
|
||||
removeCoach={removeCoach}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Events Content */}
|
||||
{activeTab === "calendar" && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-4">Events Calendar</h2>
|
||||
<button className="bg-gray-700 text-white px-6 py-3 rounded-lg hover:bg-gray-600">
|
||||
Add New Event
|
||||
</button>
|
||||
<p className="text-gray-400 mt-4">
|
||||
Schedule, edit, or remove events from the calendar.
|
||||
</p>
|
||||
</div>
|
||||
<Events
|
||||
events={events}
|
||||
newEvent={newEvent}
|
||||
setNewEvent={setNewEvent}
|
||||
addEvent={addEvent}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
|
|
|||
26
src/pages/Error.jsx
Normal file
26
src/pages/Error.jsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import React from "react";
|
||||
import { Link, useRouteError } from "react-router";
|
||||
|
||||
const Error = () => {
|
||||
const error = useRouteError();
|
||||
return (
|
||||
<div className="text-center mt-5">
|
||||
<img
|
||||
src="/warning.png"
|
||||
alt=""
|
||||
className="mb-3"
|
||||
style={{ height: "150px", width: "180px" }}
|
||||
/>
|
||||
<h1 className="text-lg">Oops! An error occured.</h1>
|
||||
<p>{error.data} </p>
|
||||
|
||||
<Link to="/">
|
||||
<button className="bg-black text-white px-6 py-3 rounded-lg">
|
||||
Go Home
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Error;
|
||||
18
src/pages/Login.jsx
Normal file
18
src/pages/Login.jsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import React from "react";
|
||||
import LoginForm from "../components/LoginForm";
|
||||
|
||||
const Login = () => {
|
||||
return (
|
||||
<div className="bg-[#f1f1f1] flex w-full h-screen">
|
||||
<div className="w-full flex items-center justify-center lg:w-1/2 ">
|
||||
<LoginForm/>
|
||||
</div>
|
||||
<div className="hidden relative lg:flex h-full w-1/2 items-center justify-center bg-gray-200">
|
||||
<div className="w-60 h-60 bg-gradient-to-tr from-violet-500 to-blue-200 rounded-full animate-bounce shadow-2xl"/>
|
||||
<div className="w-full absolute h-[38%] bg-white/10 backdrop-blur-3xl bottom-0"/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
Loading…
Reference in a new issue