Updated old-versions scrimba-5-vanlife-v2

old-versions/scrimba-5-vanlife-v2/src/index.css

@@ -36,7 +36,7 @@
 body {
   line-height: 1.5;
   font-family: system-ui, sans-serif;
-  font-size: 1.6rem;
+  font-size: clamp(1.6rem, 1.4783rem + 0.6957vw, 2rem);
   position: relative;
 }
 
@@ -45,14 +45,24 @@ body {
   outline-offset: 0.2rem;
 }
 
+input {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+h1 {
+  text-align: center;
+  text-wrap: balance;
+}
+
 h1,
 h2,
 h3 {
   font-weight: normal;
 }
-p,
-ul {
-  font-size: clamp(1.6rem, 1.4783rem + 0.6957vw, 2rem);
+
+h2 {
+  font-size: clamp(2rem, 1.8478rem + 0.8696vw, 2.5rem);
 }
 
 h1,
@@ -275,7 +285,7 @@ img {
   place-items: center;
   min-height: 60rem;
   color: white;
-  & h1,
+
   & p {
     text-align: center;
     text-wrap: balance;
@@ -300,7 +310,7 @@ img {
   display: grid;
   gap: 3rem;
   padding-block: 3rem;
-  & h1,
+
   & h2,
   & p {
     text-align: center;
@@ -311,10 +321,6 @@ img {
     line-height: 1.3;
   }
 
-  & p {
-    font-size: clamp(1.6rem, 1.4783rem + 0.6957vw, 2rem);
-  }
-
   & .link-button {
     width: fit-content;
     margin-inline: auto;
@@ -373,7 +379,6 @@ img {
 
   & li {
     a {
-      /* display: flex; */
       gap: 2rem;
       padding: 2rem 2.5rem;
       box-shadow: var(--shadow);
@@ -392,6 +397,70 @@ img {
   }
 }
 
+.hosts-container {
+  padding-block-end: 5rem;
+
+  & h2 {
+    text-align: center;
+  }
+  & .graph {
+    background-color: #ccc;
+    padding: 2rem;
+    border-radius: 1rem;
+    border: 0.5rem solid white;
+  }
+
+  /** Income */
+  table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    width: fit-content;
+    border: 0;
+    margin-inline: auto;
+    background-color: var(--bg);
+
+    & caption {
+      text-wrap: balance;
+      padding-block-end: 1rem;
+    }
+
+    & th {
+      font-weight: 600;
+    }
+
+    & th,
+    & td {
+      border: 0.1rem solid var(--fg);
+      padding: 0.5rem 1rem;
+    }
+  }
+
+  &.hosts-income p {
+    text-align: center;
+  }
+
+  /** Reviews */
+
+  & .review {
+    &:first-of-type p {
+      padding-block-end: 2rem;
+      border-bottom: 0.2rem solid var(--fg);
+    }
+
+    & ul {
+      padding-left: 0;
+      list-style: none;
+
+      & li:first-child {
+        font-weight: 600;
+      }
+    }
+  }
+  & .review-star {
+    fill: orange;
+  }
+}
+
 .host-vans-container {
   & li {
     a {
@@ -456,7 +525,6 @@ img {
   flex-wrap: wrap;
   gap: 1.5rem;
   align-items: center;
-  font-size: clamp(1.6rem, 1.4783rem + 0.6957vw, 2rem);
 
   & button {
     font-size: inherit;
@@ -551,32 +619,6 @@ img {
   }
 }
 
-.skip-link {
-  color: var(--body-txt);
-  text-decoration: none;
-  font-weight: 600;
-  padding: 0.5rem 1rem;
-
-  &::after {
-    content: " \2193";
-  }
-}
-.element-invisible {
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 200;
-  &.element-focusable:active,
-  &.element-focusable:focus {
-    clip: auto;
-    height: auto;
-    overflow: visible;
-  }
-}
-
 /** Hosts */
 .hosts-nav {
   margin-bottom: 3rem;
@@ -606,6 +648,33 @@ img {
   }
 }
 
+/** Skip link */
+.skip-link {
+  color: var(--body-txt);
+  text-decoration: none;
+  font-weight: 600;
+  padding: 0.5rem 1rem;
+
+  &::after {
+    content: " \2193";
+  }
+}
+.element-invisible {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 200;
+  &.element-focusable:active,
+  &.element-focusable:focus {
+    clip: auto;
+    height: auto;
+    overflow: visible;
+  }
+}
+
 /* Screenreader only */
 .visually-hidden {
   position: absolute;

old-versions/scrimba-5-vanlife-v2/src/pages/host/Income.jsx

@@ -1,8 +1,44 @@
+import incomeGraph from "../../assets/images/income-graph.png"
 function Income() {
+  const transactionsData = [
+    { amount: "720.00", date: "03.01.24", id: "1" },
+    { amount: "1,650.00", date: "11.12.23", id: "2" },
+    { amount: "2,725.00", date: "18.11.23", id: "3" },
+    { amount: "3,000.00", date: "05.10.23", id: "4" },
+    { amount: "1,285.00", date: "07.09.23", id: "5" },
+    { amount: "4,000.00", date: "30.08.23", id: "36" },
+  ]
   return (
-    <div className="hosts-container  content-container hosts-income">
-      <h1>Income</h1>
-    </div>
+    <section className="hosts-container  content-container hosts-income">
+      <h2>Income</h2>
+      <p>
+        Last 6 months: <b>&#36;9,780.00</b>
+      </p>
+      <img
+        className="graph"
+        src={incomeGraph}
+        alt="Income graph"
+        width="986"
+        loading="lazy"
+      />
+      <table>
+        <caption>Transaction history</caption>
+        <thead>
+          <tr>
+            <th>Date</th>
+            <th>Amount (&#36;)</th>
+          </tr>
+        </thead>
+        <tbody>
+          {transactionsData.map((item) => (
+            <tr key={item.id}>
+              <td>{item.date}</td>
+              <td>{item.amount}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </section>
   )
 }
 

old-versions/scrimba-5-vanlife-v2/src/pages/host/Reviews.jsx

@@ -1,8 +1,57 @@
+import reviewsGraph from "../../assets/images/reviews-graph.png"
+import { BsStarFill } from "react-icons/bs"
 function Reviews() {
+  const reviewsData = [
+    {
+      rating: 5,
+      name: "Elliot",
+      date: "January 3, 2024",
+      text: "The beach bum is such an awesome van! Such a comfortable trip. We had it for 2 weeks and there was not a single issue. Super clean when we picked it up and the host is very comfortable and understanding. Highly recommend!",
+      id: "1",
+    },
+    {
+      rating: 5,
+      name: "Sandy",
+      date: "December 12, 2023",
+      text: "This is our third time using the Modest Explorer for our travels and we love it! No complaints, absolutely perfect!",
+      id: "2",
+    },
+  ]
   return (
-    <div className="hosts-container  content-container hosts-reviews">
-      <h1>Reviews</h1>
-    </div>
+    <section className="hosts-container  content-container hosts-reviews">
+      <h2>Reviews</h2>
+      <p>
+        Last <span>30 days</span>
+      </p>
+      <img
+        className="graph"
+        src={reviewsGraph}
+        alt="Review graph"
+        width="986"
+        loading="lazy"
+      />
+      <h3>Reviews (2)</h3>
+      {reviewsData.map((review) => (
+        <div
+          key={review.id}
+          className="review"
+        >
+          {[...Array(review.rating)].map((_, i) => (
+            <BsStarFill
+              className="review-star"
+              key={i}
+              aria-hidden="true"
+            />
+          ))}
+          <p className="visually-hidden">Rating: {review.rating} stars</p>
+          <ul>
+            <li>{review.name}</li>
+            <li>{review.date}</li>
+          </ul>
+          <p className="review-text">{review.text}</p>
+        </div>
+      ))}
+    </section>
   )
 }
 

old-versions/scrimba-5-vanlife-v2/src/pages/host/hostVanDetailSections/HostVanPricing.jsx

@@ -7,7 +7,7 @@ function HostVanPricing() {
       <h2 className="visually-hidden">Prices</h2>
       <ul>
         <li>
-          <p>&pound;{van.price}/day</p>
+          <p>&#36;{van.price}/day</p>
         </li>
       </ul>
     </section>

old-versions/scrimba-5-vanlife-v2/src/server.js

@@ -89,6 +89,7 @@ createServer({
   routes() {
     // changed from "/api":
     this.namespace = "/vanlife/api"
+    this.logging = false
 
     // eslint-disable-next-line no-unused-vars
     this.get("/vans", (schema, request) => {