From 1875e02a84e05c69fe6f978b560036071ee6792a Mon Sep 17 00:00:00 2001
From: Catherine Meade <cat@heysparkbox.com>
Date: Mon, 17 Oct 2022 15:11:39 -0400
Subject: [PATCH] feat: SiteHeader has been rebuilt

The SiteHeader component has been migrated from the old design.

Updated some scss file names for a more consistent naming convention.

Closes #401
---
 src/App.scss                                             | 2 +-
 src/App.tsx                                              | 3 ++-
 src/components/SiteHeader.tsx                            | 9 +++++++++
 .../{_sparkeats-header.scss => _site-header.scss}        | 2 +-
 4 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 src/components/SiteHeader.tsx
 rename src/scss/components/{_sparkeats-header.scss => _site-header.scss} (95%)

diff --git a/src/App.scss b/src/App.scss
index 55bdc984..fee2b8e0 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -67,7 +67,7 @@
 // 6. Components
 //    Specific UI components. This is where majority of our work takes place
 //    and our UI components are often composed of Objects and Components
-@import 'scss/components/sparkeats-header';
+@import 'scss/components/site-header';
 @import 'scss/components/buttons';
 @import 'scss/components/place-card';
 @import 'scss/components/stars';
diff --git a/src/App.tsx b/src/App.tsx
index 92f3687d..dc730620 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,11 @@
 import { Outlet } from 'react-router-dom'
 import './App.scss'
+import { SiteHeader } from './components/SiteHeader';
 
 function App() {
   return (
     <div>
-      <header>Site Header</header>
+      <SiteHeader />
       <Outlet />
     </div>
   )
diff --git a/src/components/SiteHeader.tsx b/src/components/SiteHeader.tsx
new file mode 100644
index 00000000..a48c7379
--- /dev/null
+++ b/src/components/SiteHeader.tsx
@@ -0,0 +1,9 @@
+export const SiteHeader = () => {
+  return (
+    <header className="site-header">
+      <h1 className="site-header__title">Sparkeats by Sparkbox</h1>
+      <a className="site-header__logo" href="/" aria-label="Return to Sparkeats Homepage" />
+    </header>
+  );
+};
+
diff --git a/src/scss/components/_sparkeats-header.scss b/src/scss/components/_site-header.scss
similarity index 95%
rename from src/scss/components/_sparkeats-header.scss
rename to src/scss/components/_site-header.scss
index 6b113c61..6a237c9c 100644
--- a/src/scss/components/_sparkeats-header.scss
+++ b/src/scss/components/_site-header.scss
@@ -1,4 +1,4 @@
-.sparkeats-header {
+.site-header {
   background-color: $primary-color;
   padding: 1em;
   box-sizing: border-box;