├── src ├── container │ ├── landing │ │ ├── index.css │ │ └── index.js │ ├── createUser │ │ ├── index.css │ │ └── index.js │ ├── changePassword │ │ ├── index.css │ │ └── index.js │ ├── createTeam │ │ ├── index.css │ │ └── index.js │ ├── profile │ │ ├── index.css │ │ └── index.js │ ├── createCampaign │ │ ├── index.css │ │ └── index.js │ ├── qrcodes │ │ ├── index.css │ │ └── index.js │ ├── forgotpwd │ │ ├── index.css │ │ └── index.js │ ├── selectPlan │ │ ├── index.css │ │ └── index.js │ ├── users │ │ ├── index.css │ │ └── index.js │ ├── signup │ │ ├── index.css │ │ └── index.js │ ├── signin │ │ ├── index.css │ │ └── index.js │ └── paymentInfo │ │ ├── index.css │ │ └── index.js ├── setupTests.js ├── App.test.js ├── component │ ├── header │ │ ├── index.css │ │ └── index.js │ ├── table │ │ ├── index.css │ │ └── index.js │ └── planCard │ │ ├── index.css │ │ └── index.js ├── index.css ├── reportWebVitals.js ├── index.js ├── App.css ├── App.js └── logo.svg ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── assets │ └── img │ │ ├── logo.PNG │ │ └── img_default_avatar.png ├── manifest.json └── index.html ├── .gitignore ├── package.json └── README.md /src/container/landing/index.css: -------------------------------------------------------------------------------- 1 | .content { 2 | margin: 0 60px; 3 | } -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rampagekiller0725/chuck_frontend/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rampagekiller0725/chuck_frontend/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rampagekiller0725/chuck_frontend/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/assets/img/logo.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rampagekiller0725/chuck_frontend/HEAD/public/assets/img/logo.PNG -------------------------------------------------------------------------------- /src/container/createUser/index.css: -------------------------------------------------------------------------------- 1 | .create-user-content { 2 | max-width: 500px; 3 | margin: auto; 4 | margin-top: 100px; 5 | } 6 | -------------------------------------------------------------------------------- /public/assets/img/img_default_avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rampagekiller0725/chuck_frontend/HEAD/public/assets/img/img_default_avatar.png -------------------------------------------------------------------------------- /src/container/changePassword/index.css: -------------------------------------------------------------------------------- 1 | .change-password-content { 2 | max-width: 300px; 3 | margin: auto; 4 | margin-top: 50px; 5 | } 6 | -------------------------------------------------------------------------------- /src/container/createTeam/index.css: -------------------------------------------------------------------------------- 1 | .create-team-content { 2 | max-width: 350px; 3 | margin: auto; 4 | } 5 | 6 | .create-team-content img{ 7 | width: 40px; 8 | } -------------------------------------------------------------------------------- /src/container/profile/index.css: -------------------------------------------------------------------------------- 1 | .profile-content { 2 | max-width: 500px; 3 | margin: auto; 4 | } 5 | 6 | .profile-img img{ 7 | margin: auto; 8 | width: 150px; 9 | } -------------------------------------------------------------------------------- /src/container/createCampaign/index.css: -------------------------------------------------------------------------------- 1 | .create-campaign-content { 2 | max-width: 350px; 3 | margin: auto; 4 | } 5 | 6 | .create-campaign-content img{ 7 | width: 40px; 8 | } -------------------------------------------------------------------------------- /src/container/qrcodes/index.css: -------------------------------------------------------------------------------- 1 | .campaigns-content { 2 | margin: 0 30px; 3 | padding: 20px; 4 | background-color: rgb(243, 244, 246); 5 | } 6 | 7 | .btn-group { 8 | text-align: center; 9 | } -------------------------------------------------------------------------------- /src/container/forgotpwd/index.css: -------------------------------------------------------------------------------- 1 | .forgotpwd-page { 2 | padding: 50px 10vw; 3 | max-width: 400px; 4 | text-align: center; 5 | margin: auto; 6 | } 7 | 8 | .forgotpwd-page p { 9 | font-size: 0.7em; 10 | } -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/container/selectPlan/index.css: -------------------------------------------------------------------------------- 1 | .selectplan-page { 2 | max-width: 600px; 3 | margin: auto; 4 | margin-top: 50px; 5 | } 6 | 7 | .selectplan-page h1 { 8 | text-align: center; 9 | } 10 | .next-btn { 11 | text-align: center; 12 | margin: 10px; 13 | } -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/container/users/index.css: -------------------------------------------------------------------------------- 1 | .users-content { 2 | margin: 0 30px; 3 | padding: 20px; 4 | background-color: rgb(243, 244, 246); 5 | } 6 | .teams-content { 7 | margin: 0 30px; 8 | padding: 20px; 9 | background-color: rgb(243, 244, 246); 10 | } 11 | .btn-group { 12 | text-align: center; 13 | } -------------------------------------------------------------------------------- /src/component/header/index.css: -------------------------------------------------------------------------------- 1 | .user-avatar { 2 | /* background-color: white; */ 3 | border-radius: 100%; 4 | } 5 | 6 | .user-avatar > img { 7 | width: 40px; 8 | border-radius: 100%; 9 | cursor: pointer; 10 | } 11 | 12 | .header button>div::before, .header button>div::after, .header button>div { 13 | background-color: white; 14 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/container/signup/index.css: -------------------------------------------------------------------------------- 1 | .signup-page { 2 | padding: 100px 10vw; 3 | } 4 | .signup-page p { 5 | font-size: 0.7em; 6 | text-align: center; 7 | } 8 | .signup-page h1 { 9 | margin-bottom: 60px; 10 | text-align: center; 11 | } 12 | .signup-form { 13 | padding: 0 5vw; 14 | text-align: left; 15 | } 16 | 17 | 18 | 19 | @media only screen and (max-width: 768px) { 20 | .signup-page { 21 | padding: 20px; 22 | } 23 | .logo > img { 24 | width: 100%; 25 | } 26 | } -------------------------------------------------------------------------------- /src/container/signin/index.css: -------------------------------------------------------------------------------- 1 | .signin-page { 2 | padding: 100px 10vw; 3 | } 4 | .signin-page p { 5 | font-size: 0.7em; 6 | } 7 | .signin-form { 8 | padding: 0 5vw; 9 | text-align: left; 10 | } 11 | .primary-text { 12 | color: #2F73D7; 13 | } 14 | .forgot-password { 15 | text-align: right; 16 | color: #2F73D7; 17 | padding: 10px 0; 18 | } 19 | 20 | @media only screen and (max-width: 768px) { 21 | .signin-page { 22 | padding: 20px; 23 | } 24 | .logo > img { 25 | width: 100%; 26 | } 27 | } -------------------------------------------------------------------------------- /src/container/paymentInfo/index.css: -------------------------------------------------------------------------------- 1 | .paymentinfo-page { 2 | padding: 100px 5vw; 3 | } 4 | .paymentinfo-page p { 5 | font-size: 0.7em; 6 | text-align: center; 7 | } 8 | .paymentinfo-page h1 { 9 | margin: 0; 10 | margin-bottom: 10px; 11 | text-align: center; 12 | } 13 | .paymentinfo-form { 14 | padding: 0 5vw; 15 | text-align: left; 16 | } 17 | .logo > img{ 18 | width: 540px; 19 | } 20 | 21 | 22 | @media only screen and (max-width: 768px) { 23 | .paymentinfo-page { 24 | padding: 20px; 25 | } 26 | .logo > img { 27 | width: 100%; 28 | } 29 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/container/landing/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Header from "../../component/header"; 3 | import './index.css'; 4 | 5 | export default function Landing(props) { 6 | const links = [ 7 | { 8 | link: "/dashboard", 9 | label: "Dashboard", 10 | }, 11 | { 12 | link: "/qrcodes", 13 | label: "QR Codes", 14 | }, 15 | { 16 | link: "/users", 17 | label: "Users", 18 | }, 19 | ]; 20 | return ( 21 |
22 |
23 |
{props.content}
24 |
25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/container/selectPlan/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import PlanCard from "../../component/planCard"; 4 | import { Button } from "@mantine/core"; 5 | 6 | import "./index.css"; 7 | 8 | function SelectPlan() { 9 | return ( 10 |
11 |

Select your plan

12 | 13 | 14 | 15 |
16 | 17 | 27 | 28 |
29 |
30 | ); 31 | } 32 | 33 | export default SelectPlan; 34 | -------------------------------------------------------------------------------- /src/component/table/index.css: -------------------------------------------------------------------------------- 1 | a { 2 | text-decoration: none!important; 3 | } 4 | .create-campaign { 5 | text-align: right; 6 | } 7 | .table { 8 | background-color: white; 9 | } 10 | .table img { 11 | width: 30px; 12 | transform: translate(0, 2px); 13 | margin-right: 5px; 14 | } 15 | thead { 16 | background-color: rgb(249,250,251); 17 | } 18 | th { 19 | text-align: center!important; 20 | } 21 | td { 22 | color: #333333!important; 23 | text-align: center!important; 24 | } 25 | .th-description { 26 | width: 300px; 27 | } 28 | .description { 29 | max-width: 300px; 30 | } 31 | .description-content { 32 | white-space: nowrap; 33 | overflow: hidden; 34 | text-overflow: ellipsis; 35 | max-width: 100%; 36 | width: 300px; 37 | line-height: 1.2em; 38 | margin: 0; 39 | color: #333333; 40 | } 41 | 42 | .three-dots { 43 | transform: translate(-10px, 2px); 44 | display: inline-block; 45 | } 46 | 47 | .users-name { 48 | text-align: left!important; 49 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@mantine/core": "^5.6.3", 7 | "@mantine/dates": "^5.6.4", 8 | "@mantine/hooks": "^5.6.3", 9 | "@testing-library/jest-dom": "^5.16.5", 10 | "@testing-library/react": "^13.4.0", 11 | "@testing-library/user-event": "^13.5.0", 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0", 14 | "react-router-dom": "^6.4.2", 15 | "react-scripts": "5.0.1", 16 | "web-vitals": "^2.1.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/component/planCard/index.css: -------------------------------------------------------------------------------- 1 | .plan-card { 2 | border-radius: 3px; 3 | border: 1px solid #afafaf; 4 | margin: 10px; 5 | } 6 | 7 | .payment-card { 8 | background-color: rgb(222, 226, 230); 9 | height: 100%; 10 | text-align: center; 11 | } 12 | .payment-card h2 { 13 | margin: 0; 14 | padding: 50px 20px; 15 | } 16 | .plan-card-title { 17 | text-align: center; 18 | } 19 | .plan-card-description { 20 | height: 50px; 21 | } 22 | .line { 23 | width: 50%; 24 | border-top: 1px solid #acd5fb; 25 | margin-bottom: 5px; 26 | margin-left: 20px; 27 | display: inline-block; 28 | } 29 | .payment-card p { 30 | font-size: 0.7em; 31 | } 32 | .member-ship1 { 33 | height: fit-content; 34 | } 35 | .payment-card-title { 36 | text-align: center; 37 | } 38 | 39 | .grey { 40 | color: #afafaf; 41 | } 42 | .check { 43 | background: rgb(142, 229, 146); 44 | border-radius: 100%; 45 | width: 18px; 46 | height: 18px; 47 | font-size: 0.8em; 48 | display: inline-block; 49 | text-align: center; 50 | color: white; 51 | margin-right: 15px; 52 | } 53 | 54 | @media only screen and (max-width: 768px) { 55 | .plan-card { 56 | margin: 10px; 57 | } 58 | } -------------------------------------------------------------------------------- /src/component/planCard/index.js: -------------------------------------------------------------------------------- 1 | import { Grid, Container, Button } from "@mantine/core"; 2 | import "./index.css"; 3 | export default function PlanCard() { 4 | return ( 5 |
6 | 7 | 8 | 9 |

Trial Membership

10 |

11 |

12 | What's included 13 |

14 |

15 | ✔Private forum access 16 |

17 |

18 | ✔Entry to annual conference 19 |

20 | 21 | 22 |
23 |

No payment required

24 | 37 |

38 | Get a free sample(20MB) 39 |

40 |
41 | 42 | 43 | 44 |
45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /src/container/forgotpwd/index.js: -------------------------------------------------------------------------------- 1 | import React, {useRef, useState} from "react"; 2 | import { Autocomplete, Button, Loader } from "@mantine/core"; 3 | import "./index.css"; 4 | 5 | export default function Forgotpwd() { 6 | const timeoutRef = useRef(-1); 7 | const [value, setValue] = useState(""); 8 | const [loading, setLoading] = useState(false); 9 | const [data, setData] = useState([]); 10 | 11 | const handleChange = (val) => { 12 | window.clearTimeout(timeoutRef.current); 13 | setValue(val); 14 | setData([]); 15 | 16 | if (val.trim().length === 0 || val.includes("@")) { 17 | setLoading(false); 18 | } else { 19 | setLoading(true); 20 | timeoutRef.current = window.setTimeout(() => { 21 | setLoading(false); 22 | setData( 23 | ["gmail.com", "outlook.com", "yahoo.com"].map( 24 | (provider) => `${val}@${provider}` 25 | ) 26 | ); 27 | }, 1000); 28 | } 29 | }; 30 | return ( 31 |
32 |

Reset your password

33 |

Enter your email and we'll send you a link to reset your password

34 | : null} 40 | label="Email address" 41 | placeholder="Your email" 42 | sx={{ 43 | paddingTop: "20px", 44 | width: "80%", 45 | textAlign: "left", 46 | margin: "auto", 47 | }} 48 | /> 49 | 59 |
60 | ); 61 | } 62 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 2 | 3 | import "./App.css"; 4 | 5 | import Signin from "./container/signin"; 6 | import Forgotpwd from "./container/forgotpwd"; 7 | import Signup from "./container/signup"; 8 | import SelectPlan from "./container/selectPlan"; 9 | import PaymentInfo from "./container/paymentInfo"; 10 | import Landing from "./container/landing"; 11 | 12 | import QRCodes from "./container/qrcodes"; 13 | import Users from "./container/users"; 14 | import CreateCampaign from "./container/createCampaign"; 15 | import CreateTeam from "./container/createTeam"; 16 | import CreateUser from "./container/createUser"; 17 | import Profile from "./container/profile"; 18 | import ChangePassword from "./container/changePassword"; 19 | 20 | function App() { 21 | return ( 22 | 23 | 24 | } /> 25 | } /> 26 | } /> 27 | } /> 28 | } /> 29 | } /> 30 | } /> 31 | 32 | }/>} /> 33 | }/>}/> 34 | 35 | } />} /> 36 | }/>} /> 37 | } />} /> 38 | } />} /> 39 | } />} /> 40 | 41 | 42 | ); 43 | } 44 | 45 | export default App; 46 | -------------------------------------------------------------------------------- /src/container/changePassword/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { PasswordInput, Button, Grid } from "@mantine/core"; 4 | import "./index.css"; 5 | 6 | export default function ChangePassword() { 7 | return ( 8 |
9 |

Change my password

10 |
11 | 12 | 13 | 21 | 22 | 23 | 24 | 25 | 33 | 34 | 35 | 36 | 37 | 45 | 46 | 47 | 48 | 49 | 59 | 60 | 61 |
62 |
63 | ); 64 | } 65 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/container/signin/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef } from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { 4 | Autocomplete, 5 | Loader, 6 | SimpleGrid, 7 | Button, 8 | PasswordInput, 9 | } from "@mantine/core"; 10 | import "./index.css"; 11 | 12 | function Signin() { 13 | const timeoutRef = useRef(-1); 14 | const [value, setValue] = useState(""); 15 | const [loading, setLoading] = useState(false); 16 | const [data, setData] = useState([]); 17 | 18 | const handleChange = (val) => { 19 | window.clearTimeout(timeoutRef.current); 20 | setValue(val); 21 | setData([]); 22 | 23 | if (val.trim().length === 0 || val.includes("@")) { 24 | setLoading(false); 25 | } else { 26 | setLoading(true); 27 | timeoutRef.current = window.setTimeout(() => { 28 | setLoading(false); 29 | setData( 30 | ["gmail.com", "outlook.com", "yahoo.com"].map( 31 | (provider) => `${val}@${provider}` 32 | ) 33 | ); 34 | }, 1000); 35 | } 36 | }; 37 | return ( 38 |
39 | 46 |
47 |

Sign in to your account

48 |

49 | Or{" "} 50 | Login with an existing account 51 |

52 | : null} 58 | label="Email address" 59 | placeholder="Your email" 60 | sx={{ 61 | paddingTop: "20px", 62 | textAlign: "left", 63 | }} 64 | /> 65 | 73 | 74 |

Forgot your password?

75 | 76 | 77 | 86 | 87 | 88 |

Create an account

89 | 90 |
91 |
92 | logo 93 |
94 | 95 |
96 | ); 97 | } 98 | 99 | export default Signin; 100 | -------------------------------------------------------------------------------- /src/container/createTeam/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { TextInput, Button, Grid, Textarea, Divider } from "@mantine/core"; 4 | import "./index.css"; 5 | 6 | export default function CreateTeam() { 7 | const teamMembers = [ 8 | { 9 | name: "Nikita Semenchenko", 10 | img: "/assets/img/img_default_avatar.png", 11 | mail: "nikitasemenchenko06@gmail.com", 12 | }, 13 | { 14 | name: "Nikita Semenchenko", 15 | img: "/assets/img/img_default_avatar.png", 16 | mail: "nikitasemenchenko06@gmail.com", 17 | }, 18 | { 19 | name: "Nikita Semenchenko", 20 | img: "/assets/img/img_default_avatar.png", 21 | mail: "nikitasemenchenko06@gmail.com", 22 | }, 23 | ]; 24 | return ( 25 |
26 |

Create Team

27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |