From a574ddfda9d7ce7c5266d1f99acf351546f8857e Mon Sep 17 00:00:00 2001 From: rohan09-raj Date: Tue, 19 Jul 2022 13:47:16 +0530 Subject: Added routes, enrollment, update component --- package.json | 1 + public/assets/images/enrollment.svg | 9 +++++++++ public/assets/images/update.svg | 9 +++++++++ public/logo192.png | Bin 5347 -> 0 bytes public/logo512.png | Bin 9664 -> 0 bytes src/App.js | 4 ++-- src/components/Card/Card.jsx | 11 ++++++----- src/components/Card/Card.module.css | 26 ++++++++++++++++++++++++++ src/components/Header/Header.jsx | 4 ++-- src/components/Header/Header.module.css | 14 +++++++++++++- src/index.js | 17 ++++++++++------- src/pages/Enrollment/Enrollment.jsx | 7 +++++++ src/pages/Enrollment/Enrollment.module.css | 0 src/pages/Home/Home.jsx | 18 ++++++++++++++++++ src/pages/Home/Home.module.css | 4 ++++ src/pages/Update/Update.jsx | 7 +++++++ src/pages/Update/Update.module.css | 0 src/routes/index.js | 22 ++++++++++++++++++++++ src/styles/GlobalVariables.css | 6 ++++++ yarn.lock | 29 +++++++++++++++++++++++++++++ 20 files changed, 171 insertions(+), 17 deletions(-) create mode 100644 public/assets/images/enrollment.svg create mode 100644 public/assets/images/update.svg delete mode 100644 public/logo192.png delete mode 100644 public/logo512.png create mode 100644 src/pages/Enrollment/Enrollment.jsx create mode 100644 src/pages/Enrollment/Enrollment.module.css create mode 100644 src/pages/Home/Home.module.css create mode 100644 src/pages/Update/Update.jsx create mode 100644 src/pages/Update/Update.module.css create mode 100644 src/routes/index.js create mode 100644 src/styles/GlobalVariables.css diff --git a/package.json b/package.json index c3a6251..eb35d78 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/public/assets/images/enrollment.svg b/public/assets/images/enrollment.svg new file mode 100644 index 0000000..21b13c0 --- /dev/null +++ b/public/assets/images/enrollment.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/images/update.svg b/public/assets/images/update.svg new file mode 100644 index 0000000..ca318e2 --- /dev/null +++ b/public/assets/images/update.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/src/App.js b/src/App.js index f61c245..c39f14e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,10 @@ import React from 'react' -import Home from './pages/Home/Home' +import Index from './routes' const App = () => { return ( <> - + ) } diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx index 93e8102..3d66067 100644 --- a/src/components/Card/Card.jsx +++ b/src/components/Card/Card.jsx @@ -1,11 +1,12 @@ import React from 'react' +import styles from './Card.module.css' -const Card = (title, image) => { +const Card = ({ title, image }) => { return ( - <> - -

{title}

- +
+ +

{title}

+
) } diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css index e69de29..ff09072 100644 --- a/src/components/Card/Card.module.css +++ b/src/components/Card/Card.module.css @@ -0,0 +1,26 @@ +@import '../../styles/GlobalVariables.css'; + +.card { + height: 300px; + width: 300px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 3px solid var(--color-black); + border-radius: 10px; + margin: 30px; + transition: 0.2s all; + cursor: pointer; + color: var(--color-black); + text-decoration-line: none; +} + +.card:active { + transform: scale(0.98); + box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); +} + +.card__title { + margin: 15px 0px; +} diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 0cbe47f..d90aafe 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -4,8 +4,8 @@ import styles from './Header.module.css' const Header = ({ subheading }) => { return (
-

AADHAAR

-

{subheading}

+

AADHAAR

+

{subheading}

) } diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css index b30d5b7..8e6084f 100644 --- a/src/components/Header/Header.module.css +++ b/src/components/Header/Header.module.css @@ -1,8 +1,20 @@ +@import '../../styles/GlobalVariables.css'; + .header { - font-family: "Fredoka One", cursive; + font-family: 'Fredoka One', cursive; display: flex; flex-direction: column; align-items: center; margin: 20px; padding: 20px; } + +.header__heading { + font-size: var(--font-large); + font-weight: 400; +} + +.header__subheading { + font-size: var(--font-medium); + font-weight: 400; +} diff --git a/src/index.js b/src/index.js index 31508db..08cf3d2 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,14 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import App from "./App"; +import React from 'react' +import ReactDOM from 'react-dom/client' +import { BrowserRouter } from 'react-router-dom' +import './index.css' +import App from './App' -const root = ReactDOM.createRoot(document.getElementById("root")); +const root = ReactDOM.createRoot(document.getElementById('root')) root.render( - + + + -); +) diff --git a/src/pages/Enrollment/Enrollment.jsx b/src/pages/Enrollment/Enrollment.jsx new file mode 100644 index 0000000..2aad1de --- /dev/null +++ b/src/pages/Enrollment/Enrollment.jsx @@ -0,0 +1,7 @@ +import React from 'react' + +const Enrollment = () => { + return
Enrollment
+} + +export default Enrollment diff --git a/src/pages/Enrollment/Enrollment.module.css b/src/pages/Enrollment/Enrollment.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx index 17cf09d..b132f12 100644 --- a/src/pages/Home/Home.jsx +++ b/src/pages/Home/Home.jsx @@ -1,10 +1,28 @@ import React from 'react' +import { Link } from 'react-router-dom' + +import Card from '../../components/Card/Card' import Header from '../../components/Header/Header' +import styles from './Home.module.css' const Home = () => { return ( <>
+
+ + + + + + +
) } diff --git a/src/pages/Home/Home.module.css b/src/pages/Home/Home.module.css new file mode 100644 index 0000000..de1cead --- /dev/null +++ b/src/pages/Home/Home.module.css @@ -0,0 +1,4 @@ +.card__container { + display: flex; + justify-content: center; +} diff --git a/src/pages/Update/Update.jsx b/src/pages/Update/Update.jsx new file mode 100644 index 0000000..0b448cf --- /dev/null +++ b/src/pages/Update/Update.jsx @@ -0,0 +1,7 @@ +import React from 'react' + +const Update = () => { + return
Update
+} + +export default Update diff --git a/src/pages/Update/Update.module.css b/src/pages/Update/Update.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/index.js b/src/routes/index.js new file mode 100644 index 0000000..d6688c8 --- /dev/null +++ b/src/routes/index.js @@ -0,0 +1,22 @@ +import React from 'react' +import { Route, Routes } from 'react-router-dom' + +import Home from '../pages/Home/Home' +import Enrollment from '../pages/Enrollment/Enrollment' +import Update from '../pages/Update/Update' + +const Index = () => { + return ( + + } /> + + } /> + + + } /> + + + ) +} + +export default Index diff --git a/src/styles/GlobalVariables.css b/src/styles/GlobalVariables.css new file mode 100644 index 0000000..fd76120 --- /dev/null +++ b/src/styles/GlobalVariables.css @@ -0,0 +1,6 @@ +:root { + --color-black: #000; + + --font-large: 4rem; + --font-medium: 2rem; +} diff --git a/yarn.lock b/yarn.lock index 5cbf5f6..b82a8af 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1034,6 +1034,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.7.6": + version "7.18.9" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a" + integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.18.6", "@babel/template@^7.3.3": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.6.tgz#1283f4993e00b929d6e2d3c72fdc9168a2977a31" @@ -4714,6 +4721,13 @@ he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== +history@^5.2.0: + version "5.3.0" + resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b" + integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ== + dependencies: + "@babel/runtime" "^7.7.6" + hoopy@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d" @@ -7337,6 +7351,21 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== +react-router-dom@^6.3.0: + version "6.3.0" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d" + integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw== + dependencies: + history "^5.2.0" + react-router "6.3.0" + +react-router@6.3.0: + version "6.3.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557" + integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ== + dependencies: + history "^5.2.0" + react-scripts@5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003" -- cgit