diff --git a/index.html b/index.html
index e0d1c84..520ed5f 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
-
Vite + React + TS
+ My-Event-App
diff --git a/package-lock.json b/package-lock.json
index 48fce48..a8e14ac 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index ba5e30a..5fadd89 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/App.tsx b/src/App.tsx
deleted file mode 100644
index 4f98802..0000000
--- a/src/App.tsx
+++ /dev/null
@@ -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 (
-
-
-
-
- );
-}
-
-export default App;
diff --git a/src/assets/coffee.jpg b/src/assets/coffee.jpg
new file mode 100644
index 0000000..5bc9251
Binary files /dev/null and b/src/assets/coffee.jpg differ
diff --git a/src/assets/leaves.jpg b/src/assets/leaves.jpg
new file mode 100644
index 0000000..545e2b6
Binary files /dev/null and b/src/assets/leaves.jpg differ
diff --git a/src/assets/react.svg b/src/assets/react.svg
deleted file mode 100644
index 6c87de9..0000000
--- a/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/assets/workspace.jpg b/src/assets/workspace.jpg
new file mode 100644
index 0000000..1f4cab5
Binary files /dev/null and b/src/assets/workspace.jpg differ
diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
deleted file mode 100644
index 79a5f13..0000000
--- a/src/components/Alert.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ReactNode } from "react";
-
-interface AlertProps {
- children: ReactNode;
-}
-
-const Alert = ({ children }: AlertProps) => {
- return {children}
;
-};
-
-export default Alert;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 0000000..06a321c
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,21 @@
+interface CardProps {
+ title: string;
+ image: string;
+ text: string;
+}
+
+function Card({ title, image, text }: CardProps) {
+ return (
+ <>
+
+
+
+
+ >
+ );
+}
+
+export default Card;
diff --git a/src/components/ListGroup.tsx b/src/components/ListGroup.tsx
index 7fd4632..43a0378 100644
--- a/src/components/ListGroup.tsx
+++ b/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 (
<>
- {heading}
+ {heading}
{items.length === 0 && No Events Found.
}
-
+
{items.map((item, index) => (
{
setSelectedIndex(index);
- onSelectItem(item);
}}
>
{item}
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index bb95f4e..eaa5835 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,11 +1,57 @@
-import "./Navbar.css";
-
const Navbar = () => {
return (
-
-
Navbar
-
+
+
+
);
};
+function displayName() {
+ const localData = localStorage.getItem("currentUser");
+ if (localData) {
+ const userData = JSON.parse(localData);
+ return userData.email;
+ }
+ return "Log In";
+}
+
export default Navbar;
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main.tsx b/src/main.tsx
index ec16199..bbb9746 100644
--- a/src/main.tsx
+++ b/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: ,
+ errorElement: ,
+ },
+ {
+ path: "/events",
+ element: ,
+ },
+ {
+ path: "/showcase",
+ element: ,
+ },
+ {
+ path: "/login",
+ element: ,
+ },
+]);
+
+localStorage.setItem(
+ "currentUser",
+ JSON.stringify({
+ email: "apple@sixmail.com",
+ password: "checkmate",
+ loggedIn: false,
+ })
+);
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-
- ,
-)
+
+
+);
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
new file mode 100644
index 0000000..16bf591
--- /dev/null
+++ b/src/pages/App.tsx
@@ -0,0 +1,27 @@
+import Navbar from "../components/Navbar";
+import leaves from "../assets/leaves.jpg";
+
+function App() {
+ return (
+
+
+
+
Welcome to my website!
+
+
+ This website contains a list of events and a showcase.
+
+
You can also log in to the website.
+
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/src/pages/EventPage.tsx b/src/pages/EventPage.tsx
new file mode 100644
index 0000000..7759fe0
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+ Add a Business Event:
+
+
+ Add Event
+
+
+
+
+
+
+
+ Add an Other Event:
+
+
+ Add Event
+
+
+
+
+ );
+}
+
+export default EventPage;
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..54a08ec
--- /dev/null
+++ b/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 (
+
+ );
+}
+
+function handleSubmit() {}
+
+export default LoginPage;
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
new file mode 100644
index 0000000..1df840f
--- /dev/null
+++ b/src/pages/NotFound.tsx
@@ -0,0 +1,17 @@
+import Navbar from "../components/Navbar";
+
+function NotFound() {
+ return (
+
+
+
+
Error 404: Page Not Found
+
+
+ Use the navbar at the top of the screen to go back to the website.
+
+
+ );
+}
+
+export default NotFound;
diff --git a/src/pages/Showcase.tsx b/src/pages/Showcase.tsx
new file mode 100644
index 0000000..44ecb6a
--- /dev/null
+++ b/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 (
+
+
+
+
Showcase
+
+
+
+
+
+
+
+ );
+}
+
+export default Showcase;