Browse Source

Final commit, added home page, events page, showcase page, and not working login page

main
Colorful 3 weeks ago
parent
commit
f3ec3b83ca
  1. 2
      index.html
  2. 352
      package-lock.json
  3. 5
      package.json
  4. 0
      src/App.css
  5. 23
      src/App.tsx
  6. BIN
      src/assets/coffee.jpg
  7. BIN
      src/assets/leaves.jpg
  8. 1
      src/assets/react.svg
  9. BIN
      src/assets/workspace.jpg
  10. 11
      src/components/Alert.tsx
  11. 21
      src/components/Card.tsx
  12. 8
      src/components/ListGroup.tsx
  13. 0
      src/components/Navbar.css
  14. 56
      src/components/Navbar.tsx
  15. 0
      src/index.css
  16. 51
      src/main.tsx
  17. 27
      src/pages/App.tsx
  18. 73
      src/pages/EventPage.tsx
  19. 78
      src/pages/LoginPage.tsx
  20. 17
      src/pages/NotFound.tsx
  21. 31
      src/pages/Showcase.tsx

2
index.html

@ -4,7 +4,7 @@
<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 + TS</title>
<title>My-Event-App</title>
</head>
<body>
<div id="root"></div>

352
package-lock.json

@ -8,9 +8,12 @@
"name": "vite-project",
"version": "0.0.0",
"dependencies": {
"axios": "^1.9.0",
"bootstrap": "^5.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"react-hook-form": "^7.56.4",
"react-router-dom": "^7.6.0"
},
"devDependencies": {
"@types/react": "^18.0.27",
@ -792,6 +795,23 @@
"vite": "^4.1.0-beta.0"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"license": "MIT"
},
"node_modules/axios": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
"integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
"license": "MIT",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/bootstrap": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
@ -844,6 +864,19 @@
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
}
},
"node_modules/call-bind-apply-helpers": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
"function-bind": "^1.1.2"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001718",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001718.tgz",
@ -865,6 +898,18 @@
],
"license": "CC-BY-4.0"
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"license": "MIT",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/convert-source-map": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@ -872,6 +917,15 @@
"dev": true,
"license": "MIT"
},
"node_modules/cookie": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
"license": "MIT",
"engines": {
"node": ">=18"
}
},
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@ -897,6 +951,29 @@
}
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"license": "MIT",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/dunder-proto": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.1",
"es-errors": "^1.3.0",
"gopd": "^1.2.0"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/electron-to-chromium": {
"version": "1.5.155",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.155.tgz",
@ -904,6 +981,51 @@
"dev": true,
"license": "ISC"
},
"node_modules/es-define-property": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
"license": "MIT",
"engines": {
"node": ">= 0.4"
}
},
"node_modules/es-errors": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
"license": "MIT",
"engines": {
"node": ">= 0.4"
}
},
"node_modules/es-object-atoms": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/es-set-tostringtag": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
"get-intrinsic": "^1.2.6",
"has-tostringtag": "^1.0.2",
"hasown": "^2.0.2"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/esbuild": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@ -952,6 +1074,41 @@
"node": ">=6"
}
},
"node_modules/follow-redirects": {
"version": "1.15.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"license": "MIT",
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/form-data": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
"integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
"license": "MIT",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"es-set-tostringtag": "^2.1.0",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@ -967,6 +1124,15 @@
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/function-bind": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/gensync": {
"version": "1.0.0-beta.2",
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@ -977,6 +1143,43 @@
"node": ">=6.9.0"
}
},
"node_modules/get-intrinsic": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.2",
"es-define-property": "^1.0.1",
"es-errors": "^1.3.0",
"es-object-atoms": "^1.1.1",
"function-bind": "^1.1.2",
"get-proto": "^1.0.1",
"gopd": "^1.2.0",
"has-symbols": "^1.1.0",
"hasown": "^2.0.2",
"math-intrinsics": "^1.1.0"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/get-proto": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
"license": "MIT",
"dependencies": {
"dunder-proto": "^1.0.1",
"es-object-atoms": "^1.0.0"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/globals": {
"version": "11.12.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@ -987,6 +1190,57 @@
"node": ">=4"
}
},
"node_modules/gopd": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
"license": "MIT",
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/has-symbols": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
"license": "MIT",
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/has-tostringtag": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
"license": "MIT",
"dependencies": {
"has-symbols": "^1.0.3"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/hasown": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
"license": "MIT",
"dependencies": {
"function-bind": "^1.1.2"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -1054,6 +1308,36 @@
"node": ">=12"
}
},
"node_modules/math-intrinsics": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
"license": "MIT",
"engines": {
"node": ">= 0.4"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"license": "MIT",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@ -1123,6 +1407,12 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"license": "MIT"
},
"node_modules/react": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@ -1148,6 +1438,22 @@
"react": "^18.3.1"
}
},
"node_modules/react-hook-form": {
"version": "7.56.4",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.56.4.tgz",
"integrity": "sha512-Rob7Ftz2vyZ/ZGsQZPaRdIefkgOSrQSPXfqBdvOPwJfoGnjwRJUs7EM7Kc1mcoDv3NOtqBzPGbcMB8CGn9CKgw==",
"license": "MIT",
"engines": {
"node": ">=18.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-hook-form"
},
"peerDependencies": {
"react": "^16.8.0 || ^17 || ^18 || ^19"
}
},
"node_modules/react-refresh": {
"version": "0.14.2",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@ -1158,6 +1464,44 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "7.6.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.0.tgz",
"integrity": "sha512-GGufuHIVCJDbnIAXP3P9Sxzq3UUsddG3rrI3ut1q6m0FI6vxVBF3JoPQ38+W/blslLH4a5Yutp8drkEpXoddGQ==",
"license": "MIT",
"dependencies": {
"cookie": "^1.0.1",
"set-cookie-parser": "^2.6.0"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
}
}
},
"node_modules/react-router-dom": {
"version": "7.6.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.0.tgz",
"integrity": "sha512-DYgm6RDEuKdopSyGOWZGtDfSm7Aofb8CCzgkliTjtu/eDuB0gcsv6qdFhhi8HdtmA+KHkt5MfZ5K2PdzjugYsA==",
"license": "MIT",
"dependencies": {
"react-router": "7.6.0"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
}
},
"node_modules/rollup": {
"version": "3.29.5",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz",
@ -1194,6 +1538,12 @@
"semver": "bin/semver.js"
}
},
"node_modules/set-cookie-parser": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
"license": "MIT"
},
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",

5
package.json

@ -9,9 +9,12 @@
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.9.0",
"bootstrap": "^5.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"react-hook-form": "^7.56.4",
"react-router-dom": "^7.6.0"
},
"devDependencies": {
"@types/react": "^18.0.27",

0
src/App.css

23
src/App.tsx

@ -1,23 +0,0 @@
import ListGroup from "./components/ListGroup";
import Navbar from "./components/Navbar";
function App() {
let events = ["Event 1", "Event 2", "Event 3", "Event 4"];
const handleSelectedItem = (item: string) => {
console.log(item);
};
return (
<div>
<Navbar />
<ListGroup
items={events}
heading={"Events"}
onSelectItem={handleSelectedItem}
/>
</div>
);
}
export default App;

BIN
src/assets/coffee.jpg

After

Width: 960  |  Height: 640  |  Size: 154 KiB

BIN
src/assets/leaves.jpg

After

Width: 960  |  Height: 641  |  Size: 117 KiB

1
src/assets/react.svg

@ -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="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

BIN
src/assets/workspace.jpg

After

Width: 960  |  Height: 638  |  Size: 130 KiB

11
src/components/Alert.tsx

@ -1,11 +0,0 @@
import { ReactNode } from "react";
interface AlertProps {
children: ReactNode;
}
const Alert = ({ children }: AlertProps) => {
return <div className="alert alert-primary">{children}</div>;
};
export default Alert;

21
src/components/Card.tsx

@ -0,0 +1,21 @@
interface CardProps {
title: string;
image: string;
text: string;
}
function Card({ title, image, text }: CardProps) {
return (
<>
<div className="card w-25 ms-5">
<img src={image} className="card-img-top" alt={title} />
<div className="card-body">
<h5 className="card-title">{title}</h5>
<p className="card-text">{text}</p>
</div>
</div>
</>
);
}
export default Card;

8
src/components/ListGroup.tsx

@ -3,17 +3,16 @@ import { useState } from "react";
interface ListGroupProps {
items: string[];
heading: string;
onSelectItem: (item: string) => void;
}
function ListGroup({ items, heading, onSelectItem }: ListGroupProps) {
function ListGroup({ items, heading }: ListGroupProps) {
const [selectedIndex, setSelectedIndex] = useState(-1);
return (
<>
<h1>{heading}</h1>
<h1 className="mx-5">{heading}</h1>
{items.length === 0 && <p>No Events Found.</p>}
<ul className="list-group">
<ul className="list-group mx-5">
{items.map((item, index) => (
<li
className={
@ -24,7 +23,6 @@ function ListGroup({ items, heading, onSelectItem }: ListGroupProps) {
key={item}
onClick={() => {
setSelectedIndex(index);
onSelectItem(item);
}}
>
{item}

0
src/components/Navbar.css

56
src/components/Navbar.tsx

@ -1,11 +1,57 @@
import "./Navbar.css";
const Navbar = () => {
return (
<div>
<h1>Navbar</h1>
</div>
<nav className="navbar navbar-expand-lg bg-dark">
<div className="container-fluid">
<a className="navbar-brand text-light" href="/">
My-Event-App
</a>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link text-light" href="/">
Home
</a>
</li>
<li className="nav-item">
<a className="nav-link text-light" href="/events">
Events
</a>
</li>
<li className="nav-item">
<a className="nav-link text-light" href="/showcase">
Showcase
</a>
</li>
<li className="nav-item position-absolute top-25 end-0 me-2">
<a className="nav-link text-light" href="/login">
Log In
</a>
</li>
</ul>
</div>
</div>
</nav>
);
};
function displayName() {
const localData = localStorage.getItem("currentUser");
if (localData) {
const userData = JSON.parse(localData);
return userData.email;
}
return "Log In";
}
export default Navbar;

0
src/index.css

51
src/main.tsx

@ -1,11 +1,44 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import 'bootstrap/dist/css/bootstrap.css'
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./pages/App";
import EventPage from "./pages/EventPage";
import NotFound from "./pages/NotFound";
import "bootstrap/dist/css/bootstrap.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Showcase from "./pages/Showcase";
import LoginPage from "./pages/LoginPage";
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
const router = createBrowserRouter([
{
path: "/",
element: <App />,
errorElement: <NotFound />,
},
{
path: "/events",
element: <EventPage />,
},
{
path: "/showcase",
element: <Showcase />,
},
{
path: "/login",
element: <LoginPage />,
},
]);
localStorage.setItem(
"currentUser",
JSON.stringify({
email: "apple@sixmail.com",
password: "checkmate",
loggedIn: false,
})
);
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
<RouterProvider router={router} />
</React.StrictMode>
);

27
src/pages/App.tsx

@ -0,0 +1,27 @@
import Navbar from "../components/Navbar";
import leaves from "../assets/leaves.jpg";
function App() {
return (
<div>
<Navbar />
<br />
<h2 className="text-center">Welcome to my website!</h2>
<br />
<div className="text-center">
This website contains a list of events and a showcase.
</div>
<div className="text-center">You can also log in to the website.</div>
<br />
<div>
<img
src={leaves}
className="d-block w-80 mx-auto mb-2 c-img"
alt="Image of a book and leaves"
/>
</div>
</div>
);
}
export default App;

73
src/pages/EventPage.tsx

@ -0,0 +1,73 @@
import { useState } from "react";
import ListGroup from "../components/ListGroup";
import Navbar from "../components/Navbar";
function EventPage() {
const [businessEvents, updateBusinessEvents] = useState([
"Meeting @ 9am",
"Lunch with HR @ 1pm",
"Meeting @ 4pm",
]);
const [otherEvents, updateOtherEvents] = useState([
"Interview with Y Company @ 6pm",
"Company Christmas Party @ 7pm",
]);
// wait for document to load first
document.addEventListener("DOMContentLoaded", function (event) {
const eventButton = document.getElementById(
"eventBtn"
) as HTMLButtonElement;
eventButton.onclick = function () {
const val = (document.getElementById("eventInput") as HTMLInputElement)
.value;
if (val.length > 0) {
updateBusinessEvents([...businessEvents, val]);
(document.getElementById("eventInput") as HTMLInputElement).value = "";
}
};
const otherButton = document.getElementById(
"otherBtn"
) as HTMLButtonElement;
otherButton.onclick = function () {
const val = (document.getElementById("otherInput") as HTMLInputElement)
.value;
if (val.length > 0) {
updateOtherEvents([...otherEvents, val]);
(document.getElementById("otherInput") as HTMLInputElement).value = "";
}
};
});
return (
<div>
<Navbar />
<br />
<ListGroup items={businessEvents} heading={"Business Events"} />
<br />
<div className="mb-3">
<label className="ms-5">
Add a Business Event:
<input id="eventInput" className="ms-3" />
<button id="eventBtn" className="ms-3 btn btn-outline-primary">
Add Event
</button>
</label>
</div>
<ListGroup items={otherEvents} heading={"Other Events"} />
<br />
<div className="mb-3">
<label className="ms-5">
Add an Other Event:
<input id="otherInput" className="ms-3" />
<button id="otherBtn" className="ms-3 btn btn-outline-primary">
Add Event
</button>
</label>
</div>
</div>
);
}
export default EventPage;

78
src/pages/LoginPage.tsx

@ -0,0 +1,78 @@
import Navbar from "../components/Navbar";
import { useForm } from "react-hook-form";
// LOGIN NOT WORKING
function LoginPage() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const onSubmit = (data: any) => {
const localData = localStorage.getItem("currentUser");
if (localData) {
const userData = JSON.parse(localData);
if (
userData.password === data.password &&
userData.email === data.email
) {
localStorage.setItem(
"currentUser",
JSON.stringify({
email: "apple@sixmail.com",
password: "checkmate",
loggedIn: true,
})
);
console.log("You are now logged in.");
}
}
};
return (
<div>
<Navbar />
<br />
<div
className="container d-flex
align-items-center
justify-content-center"
>
<form className="w-50" onSubmit={handleSubmit(onSubmit)}>
<div className="mb-3">
<label htmlFor="emailInput" className="form-label">
Email Address
</label>
<input
type="email"
{...(register("email"), { required: true })}
className="form-control"
id="emailInput"
aria-describedby="emailHelp"
/>
</div>
<div className="mb-3">
<label htmlFor="pwdInput" className="form-label">
Password
</label>
<input
type="password"
{...register("password")}
className="form-control"
id="pwdInput"
/>
</div>
<button type="submit" className="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
);
}
function handleSubmit() {}
export default LoginPage;

17
src/pages/NotFound.tsx

@ -0,0 +1,17 @@
import Navbar from "../components/Navbar";
function NotFound() {
return (
<div>
<Navbar />
<br />
<h1 className="ms-2">Error 404: Page Not Found</h1>
<br />
<div className="ms-2">
Use the navbar at the top of the screen to go back to the website.
</div>
</div>
);
}
export default NotFound;

31
src/pages/Showcase.tsx

@ -0,0 +1,31 @@
import Navbar from "../components/Navbar";
import Card from "../components/Card";
import leaves from "../assets/leaves.jpg";
import coffee from "../assets/coffee.jpg";
import desk from "../assets/workspace.jpg";
function Showcase() {
const images = [leaves, coffee, desk];
const titles = ["Leaf & Book", "Coffee & Notes", "Desk"];
const texts = [
"A leaf on top of a book.",
"A cup of coffee paired with a notebook.",
"A pleasant image of a workspace.",
];
return (
<div>
<Navbar />
<br />
<h1 className="mx-3">Showcase</h1>
<br />
<div className="row">
<Card image={images[0]} title={titles[0]} text={texts[0]} />
<Card image={images[1]} title={titles[1]} text={texts[1]} />
<Card image={images[2]} title={titles[2]} text={texts[2]} />
</div>
</div>
);
}
export default Showcase;
Loading…
Cancel
Save