-
Places
+
+
Accomodations
+
Select Accomodations to Reserve
+
+
+
+ {[...Array(Math.ceil(places.length / itemsPerPage)).keys()].map((pageNumber) => (
+
+ ))}
+
+
);
}
+const StarRating = ({ rating }) => {
+ const stars = Array.from({ length: 5 }, (_, index) => (
+
{index + 1 <= rating ? '\u2605' : '\u2606'}
+ ));
+
+ return
{stars}
;
+};
+
+// Prop types validation for StarRating component
+StarRating.propTypes = {
+ rating: PropTypes.number.isRequired,
+};
+
export default PlacesList;
diff --git a/src/Components/UserAuth.js b/src/Components/UserAuth.js
index 9de712d..7ffc2e4 100644
--- a/src/Components/UserAuth.js
+++ b/src/Components/UserAuth.js
@@ -35,7 +35,7 @@ function UserAuth({ setLoggedIn }) {
console.log('User ID from local storage:', userId);
setLoggedIn(true);
- navigate('/layout');
+ navigate('/layout/placelist');
} else {
console.error('Unexpected response status:', response.status);
setErrorMessage('Invalid Email or password.');
diff --git a/src/Navigation.css b/src/Navigation.css
index ec76457..3a9c339 100644
--- a/src/Navigation.css
+++ b/src/Navigation.css
@@ -1,12 +1,15 @@
.container {
display: flex;
-
- /* justify-content: center; */
align-items: center;
padding: 5px;
height: 90vh;
}
+#logo-img {
+ width: 200px;
+ height: 200px;
+}
+
.copyright {
font-size: 0.5rem;
cursor: pointer;
@@ -23,9 +26,9 @@
padding: 20px;
}
-img {
+/* img {
width: 50%;
-}
+} */
.left-sidebar {
display: flex;
@@ -61,12 +64,19 @@ img {
padding: 0;
}
+.tabs ul li img {
+ width: 20px;
+ height: 20px;
+}
+
.tabs ul li a {
text-decoration: none;
color: black;
padding: 10px;
font-size: 12px;
font-weight: 800;
+ display: flex;
+ align-items: center;
}
.social-icons {
@@ -75,20 +85,44 @@ img {
align-items: center;
}
-.social-icons ul {
- display: flex;
- justify-content: center;
- align-items: center;
+.right-sidebar ul li {
+ margin-bottom: 10px;
}
-.social-icons ul li:hover {
- opacity: 0.5;
+.main-content {
+ flex-grow: 1;
+ text-align: center;
+}
+
+.right-sidebar {
+ width: 200px;
+ padding: 20px;
+ background-color: rgba(255, 255, 255, 0.8);
+ border: 2px solid rgb(72, 255, 0);
+}
+
+.right-sidebar ul {
+ list-style-type: none;
+ padding: 0;
+}
+
+#social-img {
+ width: 20px;
+ height: 20px;
+ margin: 5px;
+}
+
+.tabs ul li a:hover {
+ background-color: rgb(168, 219, 25);
+ color: white;
+ border-radius: 5px;
+ transition: all 0.5s ease;
}
.tabs ul li {
margin-bottom: 10px;
- modify this to the professional level * {
+ * {
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-decoration: none;
list-style: none;
@@ -120,10 +154,10 @@ img {
align-items: center;
}
- .header img {
+ /* .header img {
width: 100%;
height: auto;
- }
+ } */
.left-sidebar {
/* Add specific styles for left sidebar here */
@@ -133,10 +167,6 @@ img {
gap: 110px;
}
- .right-sidebar {
- /* Add specific styles for right sidebar here */
- }
-
.tabs ul {
list-style-type: none;
}
@@ -154,17 +184,23 @@ img {
justify-content: center;
}
- .main-content img {
+ /* .main-content img {
width: 100%;
height: 50vh;
cursor: pointer;
- }
+ } */
.tabs {
display: flex;
margin-left: -30px;
}
+ .social-icons ul {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
.social-icons ul li a {
text-decoration: none;
color: black;
@@ -207,32 +243,8 @@ img {
}
}
-.tabs ul li a:hover {
- background-color: rgb(168, 219, 25);
- color: white;
- border-radius: 5px;
- transition: all 0.5s ease;
-}
-
-.main-content {
- flex-grow: 1;
- text-align: center;
-}
-
-.right-sidebar {
- width: 200px;
- padding: 20px;
- background-color: rgba(255, 255, 255, 0.8);
- border: 2px solid rgb(72, 255, 0);
-}
-
-.right-sidebar ul {
- list-style-type: none;
- padding: 0;
-}
-
-.right-sidebar ul li {
- margin-bottom: 10px;
+.social-icons ul li:hover {
+ opacity: 0.5;
}
.settings-button {
diff --git a/src/Placelist.css b/src/Placelist.css
new file mode 100644
index 0000000..33400d9
--- /dev/null
+++ b/src/Placelist.css
@@ -0,0 +1,135 @@
+h1 {
+ text-align: center;
+ font-size: 3rem;
+ color: #000;
+}
+
+h5 {
+ text-align: center;
+ font-size: 1rem;
+ color: #7e7e7e;
+}
+
+.center {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ gap: 10px;
+ width: 100%;
+}
+
+.place-img {
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ border-radius: 10rem;
+}
+
+.card {
+ transition: transform 2.5s ease;
+ padding: 1rem;
+}
+
+.card:hover {
+ border: solid 2px #e2dddd;
+ border-radius: 2rem;
+ transform: scale(1.04);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ cursor: pointer;
+}
+
+ul {
+ display: flex;
+ margin: 0;
+ justify-content: space-between;
+ padding: 0;
+ width: 100%;
+
+ li {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .social-icons {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .social-icons li img {
+ gap: 10px;
+ width: 20px;
+ height: 20px;
+ border: solid 2px #e2dddd;
+ border-radius: 3rem;
+ display: flex;
+ padding: 3px;
+ }
+}
+
+#previous {
+ background-color: rgb(151 191 17);
+ border: none;
+ border-radius: 0 50px 50px 0;
+ padding: 10px;
+ cursor: pointer;
+ font-size: 1rem;
+ color: #000;
+ display: flex;
+ align-self: center;
+
+ img {
+ width: 50px;
+ height: 50px;
+ }
+}
+
+#previous:hover {
+ transition: 1.5s;
+ background-color: rgb(211, 234, 159);
+ border-radius: 50px;
+}
+
+#next {
+ background-color: rgb(151 191 17);
+ border: none;
+ border-radius: 50px 0 0 50px;
+ padding: 10px;
+ cursor: pointer;
+ font-size: 1rem;
+ color: #000;
+ display: flex;
+ align-self: center;
+
+ img {
+ width: 50px;
+ height: 50px;
+ }
+}
+
+#next:hover {
+ transition: 1.5s;
+ background-color: rgb(211, 234, 159);
+ border-radius: 50px;
+}
+
+.pagination button {
+ gap: 10px;
+ margin: 10px;
+ padding: 10px;
+ background-color: rgb(151 191 17);
+ border: none;
+ border-radius: 5px;
+}
+
+.pagination button:hover {
+ background-color: rgb(219, 237, 171);
+ font-size: larger;
+ transition: 2.5s;
+ cursor: pointer;
+}
- Places
-
-
- 
- Reserve
-
-
- 
- My Reservations
-
-
- 
- Add Place
-
-
- 
- Delete Place
-
-
+ 
