feat(header): implement basic header

need to implement setting / search later

implement #8

src/App.svelte

@@ -1,4 +1,6 @@
 <script>
+  import Header from './container/Header.svelte';
+
   let name;
 </script>
 
@@ -24,6 +26,7 @@
   }
 </style>
 
+<Header />
 <main>
   <h1>Hello {name}!</h1>
   <p>

src/container/Header.svelte

@@ -0,0 +1,76 @@
+<script>
+</script>
+
+<style>
+  .header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    font-family: Helvetica;
+  }
+
+  .container {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    text-align: center;
+  }
+
+  .title {
+    font-size: 64px;
+    font-weight: 700;
+    margin: auto 0;
+  }
+
+  .search,
+  .settings {
+    font-size: 24px;
+    font-weight: 300;
+    color: rgba(0, 0, 0, 0.3);
+    margin: auto 0;
+  }
+
+  @media (max-width: 759px) {
+    .container {
+      display: block;
+    }
+
+    .search,
+    .settings {
+      display: none;
+    }
+  }
+
+  @media (min-width: 760px) {
+    .container {
+      width: 700px;
+      margin: 0 auto;
+    }
+  }
+
+  @media (min-width: 1020px) {
+    .container {
+      width: 1000px;
+      margin: 0 auto;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .container {
+      width: 1200px;
+      margin: 0 auto;
+    }
+  }
+</style>
+
+<div data-testid="header" class="header">
+  <div data-testid="container" class="container">
+    <!-- <slot name="search" /> -->
+    <div data-testid="search" class="search">Search</div>
+    <div data-testid="title" class="title">Panoptes</div>
+    <!-- <slot name="settings" /> -->
+    <div data-testid="settings" class="settings">Settings</div>
+  </div>
+</div>

test/container/Header.test.js

@@ -0,0 +1,66 @@
+import { render } from '@testing-library/svelte';
+import Header from '../../src/container/Header.svelte';
+
+describe('Render Header', () => {
+  it('should render search, title, setting', async () => {
+    const { getByTestId } = render(Header);
+
+    const title = getByTestId('title');
+    const search = getByTestId('search');
+    const settings = getByTestId('settings');
+
+    expect(title).toBeVisible();
+    expect(search).toBeVisible();
+    expect(settings).toBeVisible();
+  });
+
+  it('should render search, title, setting sequentially', async () => {
+    const { getByTestId } = render(Header);
+
+    const title = getByTestId('title');
+    const search = getByTestId('search');
+    const settings = getByTestId('settings');
+
+    expect(search.nextElementSibling).toEqual(title);
+    expect(title.nextElementSibling).toEqual(settings);
+  });
+
+  it('should render title w/ 64px bold, others w/ 24px light', async () => {
+    const { getByTestId } = render(Header);
+
+    const title = getByTestId('title');
+    const search = getByTestId('search');
+    const settings = getByTestId('settings');
+
+    expect(title).toHaveStyle({
+      'font-size': '64px',
+      'font-weight': 700,
+    });
+    expect(search).toHaveStyle({
+      'font-size': '24px',
+      'font-weight': 300,
+    });
+    expect(settings).toHaveStyle({
+      'font-size': '24px',
+      'font-weight': 300,
+    });
+  });
+
+  it('should render search, title, settings at vertically center', async () => {
+    const { getByTestId } = render(Header);
+
+    const title = getByTestId('title');
+    const search = getByTestId('search');
+    const settings = getByTestId('settings');
+
+    expect(title).toHaveStyle({
+      margin: 'auto 0',
+    });
+    expect(search).toHaveStyle({
+      margin: 'auto 0',
+    });
+    expect(settings).toHaveStyle({
+      margin: 'auto 0',
+    });
+  });
+});