feat: create HomeHeader component

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
@@ -79,7 +80,6 @@
 @import 'scss/components/subtitle';
 @import 'scss/components/location-new';
 @import 'scss/components/location-select';
-@import 'scss/components/place-new';
 
 // =====================================================================
 // 7. Vendors

src/components/HomeHeader.tsx

@@ -0,0 +1,25 @@
+import Subtitle from './Subtitle';
+import LocationSelect from './LocationSelect';
+import { Location } from '../types/sparkeats';
+
+type HomeHeaderProps = {
+  locations: Location[];
+};
+
+function HomeHeader({ locations }: HomeHeaderProps) {
+  return (
+    <div className="home-header">
+      <Subtitle />
+
+      <LocationSelect locations={locations} />
+
+      <div className="home-header__button">
+        <a className="button__header-primary" href="/places/new">
+          Add a Review
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export default HomeHeader;

src/components/home/HomePage.tsx

@@ -1,10 +1,11 @@
+import HomeHeader from '../HomeHeader';
 import { LocationCards } from './LocationCards';
 import type { Location } from '../../types/sparkeats';
 
 export function HomePage({ locations }: { locations: Location[] }) {
   return (
     <div className="homepage">
-      <header>Home Header</header>
+      <HomeHeader locations={locations} />
       <LocationCards locations={locations} />
     </div>
   );

src/scss/objects/_home-header.scss

@@ -0,0 +1,12 @@
+.home-header {
+  margin: 4rem auto 5rem auto;
+  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%;