feat: rebuild Home Header

feat: create Subtitle component

feat: create LocationSelect component

feat: create HomeHeader component

style: fix linting errors

refactor: rename LocationSelect to LocationMenu

fix(a11y): select element must have an accessible name

fix(a11y): document does not have a main landmark

refactor: use consistent naming

Add a Review to Add a Location
All Places to All Locations

refactor: use React Router Link

refactor: move uniqueCities to locations data

refactor: rename Subtitle to SiteSubtitle

fix: update location data

src/App.scss

@@ -62,6 +62,7 @@
 //    for example media object known from OOCSS.
 @import 'scss/objects/review-page';
 @import 'scss/objects/homepage';
+@import 'scss/objects/home-header';
 
 // =====================================================================
 // 6. Components
@@ -76,9 +77,9 @@
 @import 'scss/components/review-header';
 @import 'scss/components/review-nav';
 @import 'scss/components/review-submission';
-@import 'scss/components/sparkeats-subtitle';
-@import 'scss/components/location-dropdown';
+@import 'scss/components/site-subtitle';
 @import 'scss/components/location-new';
+@import 'scss/components/location-select';
 
 // =====================================================================
 // 7. Vendors

src/App.tsx

@@ -4,9 +4,9 @@ import { SiteHeader } from './components/SiteHeader';
 
 export function App() {
   return (
-    <div>
+    <main>
       <SiteHeader />
       <Outlet />
-    </div>
+    </main>
   );
 }

src/components/HomeHeader.tsx

@@ -0,0 +1,21 @@
+import { Link } from 'react-router-dom';
+import SiteSubtitle from './SiteSubtitle';
+import LocationMenu from './LocationMenu';
+
+function HomeHeader() {
+  return (
+    <div className="home-header">
+      <SiteSubtitle />
+
+      <LocationMenu />
+
+      <div className="home-header__button">
+        <Link className="button__header-primary" to="/locations/new">
+          Add a Location
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default HomeHeader;

src/components/HomePage/index.tsx

@@ -1,3 +1,4 @@
+import HomeHeader from '../HomeHeader';
 import { LocationCards } from './LocationCards';
 import { useLocations } from '../../useLocations';
 
@@ -6,7 +7,7 @@ export function HomePage() {
 
   return (
     <div className="homepage">
-      <header>Home Header</header>
+      <HomeHeader />
       <LocationCards locations={locations} />
     </div>
   );

src/components/LocationMenu.tsx

@@ -0,0 +1,24 @@
+import { uniqueCities } from '../locations';
+
+function LocationMenu() {
+  return (
+    <div className="location-select">
+      <h2 className="location-select__title">
+        <label htmlFor="location">Select a Location</label>
+      </h2>
+
+      <select className="location-select__menu" name="location" id="location">
+        <option className="location-select__option" value="all">
+          All Cities
+        </option>
+        {uniqueCities.map((city: string) => (
+          <option key={city} value={city}>
+            {city}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+export default LocationMenu;

src/components/SiteSubtitle.tsx

@@ -0,0 +1,5 @@
+function SiteSubtitle() {
+  return <p className="site-subtitle">Food reviews and restaurant ratings</p>;
+}
+
+export default SiteSubtitle;

src/locations.ts

@@ -161,6 +161,13 @@ function transformLocations(legacyPlaces: LegacyPlace[]): Locations {
     .reduce(mapLocation, {});
 }
 
+function getUniqueCities(locations: Locations): string[] {
+  return Array.from(
+    new Set(Object.values(locations).map((location) => location.city))
+  );
+}
+
 const locations = transformLocations(legacyPlaces);
+const uniqueCities = getUniqueCities(locations);
 
-export { locations };
+export { locations, uniqueCities };

src/scss/components/_location-select.scss

@@ -0,0 +1,45 @@
+.location-select {
+  @media (min-width: $bp-grid-three-col) {
+    width: 33%;
+  }
+
+  &__title {
+    font-family: $roboto-stack;
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  &__menu {
+    appearance: none;
+    cursor: pointer;
+    box-sizing: border-box;
+    width: 100%;
+    border: 1px solid #4f4f4f;
+    padding: 0.5rem;
+    background-color: $tertiary-color;
+    font-family: $roboto-stack;
+    text-transform: capitalize;
+    letter-spacing: inherit;
+    word-spacing: inherit;
+    line-height: 120%;
+
+    // Custom select arrow
+    padding-right: 1.5rem;
+    background-repeat: no-repeat;
+    background-position: calc(100% - 0.5rem);
+    background-size: 1rem auto;
+    background-image: url("data:image/svg+xml,<svg viewBox='0 0 30 20' xmlns='http://www.w3.org/2000/svg'><path d='M4.5 1 15 11.3 25.5 1l3.8 3.9L15 19 .7 4.8 4.5.9Z' fill='%23C92400'/></svg>");
+  }
+
+  &__button .location-select {
+    &__button-arrow {
+      display: block;
+      float: right;
+      height: 0.5em;
+      width: 0.5em;
+      transform: rotate(135deg);
+      border: solid $accent-color;
+      border-width: 0.15rem 0.15rem 0 0;
+    }
+  }
+}

src/scss/components/_sparkeats-subtitle.scss → src/scss/components/_site-subtitle.scss

@@ -1,4 +1,4 @@
-.sparkeats-subtitle {
+.site-subtitle {
   font-family: $oswald-stack;
   font-size: 2rem;
   font-weight: $oswald-bold;

src/scss/objects/_home-header.scss

@@ -0,0 +1,12 @@
+.home-header {
+  margin: 4rem auto 5rem;
+  width: 80%;
+
+  &__button {
+    margin-top: 2rem;
+
+    @media (min-width: 64rem) {
+      width: 33%;
+    }
+  }
+}

src/scss/objects/_homepage.scss

@@ -1,11 +1,6 @@
 .homepage {
   padding-top: 1px;
 
-  &__header {
-    margin: 4rem auto 5rem;
-    width: 80%;
-  }
-
   &__cards {
     margin: 2rem auto 4rem;
     width: 80%;