3 files changed, 149 insertions, 0 deletions
diff --git a/src/components/header/__snapshots__/header.test.tsx.snap b/src/components/header/__snapshots__/header.test.tsx.snap
new file mode 100644
index 0000000..a490d2c
--- /dev/null
+++ b/src/components/header/__snapshots__/header.test.tsx.snap
@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header renders 1`] = `
+<header
+  class="jsx-4e1e8caf692508b2"
+>
+  <div
+    class="jsx-4e1e8caf692508b2 navbar"
+  >
+    <div
+      class="jsx-4e1e8caf692508b2 flex-1"
+    >
+      <a
+        class="btn btn-ghost text-primary-content normal-case text-xl"
+        href="/"
+      >
+        <svg
+          class="w-8 h-8"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title />
+          <path
+            d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+          />
+        </svg>
+          GitHub Socialify
+      </a>
+    </div>
+    <div
+      class="jsx-4e1e8caf692508b2 flex-0"
+    >
+      <a
+        class="invisible sm:visible mr-6"
+        href="https://www.producthunt.com/posts/socialify?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-socialify"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <img
+          alt="Socialify - 💞 Socialify your project. 🌐 Share with the world! | Product Hunt"
+          class="jsx-4e1e8caf692508b2"
+          height="54"
+          src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=271993&theme=dark"
+          width="250"
+        />
+      </a>
+      <a
+        aria-label="View source on GitHub"
+        href="https://github.com/wei/socialify"
+      >
+        <svg
+          class="jsx-4e1e8caf692508b2 github-svg w-16 h-16 scale-125 fill-gray-50 text-base-300"
+          viewBox="0 0 250 250"
+        >
+          <path
+            class="jsx-4e1e8caf692508b2"
+            d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"
+          />
+          <path
+            class="jsx-4e1e8caf692508b2 octo-arm"
+            d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+            fill="currentColor"
+            style="transform-origin: 130px 106px;"
+          />
+          <path
+            class="jsx-4e1e8caf692508b2 octo-body"
+            d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+            fill="currentColor"
+          />
+        </svg>
+      </a>
+    </div>
+  </div>
+</header>
+`;
diff --git a/src/components/header/header.test.tsx b/src/components/header/header.test.tsx
new file mode 100644
index 0000000..474e84d
--- /dev/null
+++ b/src/components/header/header.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react'
+
+import Header from './header'
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn()
+}))
+
+test('Header renders', () => {
+  const { container } = render(<Header />)
+  const header = container.firstElementChild!
+
+  expect(header).toMatchSnapshot()
+})
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
new file mode 100644
index 0000000..8177252
--- /dev/null
+++ b/src/components/header/header.tsx
@@ -0,0 +1,54 @@
+import Link from 'next/link'
+import { SiGithub } from 'react-icons/si'
+
+const Header = () => {
+  return (
+    <header>
+      <div className="navbar">
+        <div className="flex-1">
+          <Link
+            className="btn btn-ghost text-primary-content normal-case text-xl"
+            href="/">
+            <SiGithub className="w-8 h-8" />
+            &nbsp; Socialify
+          </Link>
+        </div>
+      </div>
+
+      <style jsx>{`
+        .github-svg:hover .octo-arm {
+          animation: octocat-wave 560ms ease-in-out;
+        }
+
+        @keyframes octocat-wave {
+          0%,
+          100% {
+            transform: rotate(0);
+          }
+
+          20%,
+          60% {
+            transform: rotate(-25deg);
+          }
+
+          40%,
+          80% {
+            transform: rotate(10deg);
+          }
+        }
+
+        @media (max-width: 500px) {
+          .github-svg:hover .octo-arm {
+            animation: none;
+          }
+
+          .github-svg .octo-arm {
+            animation: octocat-wave 560ms ease-in-out;
+          }
+        }
+      `}</style>
+    </header>
+  )
+}
+
+export default Header