diff --git a/src/App.scss b/src/App.scss index ac87c0b8..8b5680be 100644 --- a/src/App.scss +++ b/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 diff --git a/src/components/HomeHeader.tsx b/src/components/HomeHeader.tsx new file mode 100644 index 00000000..0951cd7a --- /dev/null +++ b/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 ( +
+ + + + +
+ + Add a Review + +
+
+ ); +} + +export default HomeHeader; diff --git a/src/components/home/HomePage.tsx b/src/components/home/HomePage.tsx index ddd2b887..ae93878e 100644 --- a/src/components/home/HomePage.tsx +++ b/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 (
-
Home Header
+
); diff --git a/src/scss/objects/_home-header.scss b/src/scss/objects/_home-header.scss new file mode 100644 index 00000000..23e51228 --- /dev/null +++ b/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%; + } + } +} diff --git a/src/scss/objects/_homepage.scss b/src/scss/objects/_homepage.scss index 67d2c206..f9e568ee 100644 --- a/src/scss/objects/_homepage.scss +++ b/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%;