Chap03 -> Creating function-based component -> Adding elements to the Header component

QandA/frontend/src/Header.tsx

@@ -1,3 +1,13 @@
 import React from 'react';
+import { UserIcon } from './Icons';
 
-export const Header = () => <div>header</div>;
+export const Header = () => (
+  <div>
+    <a href="./">Q & A</a>
+    <input type="text" placeholder="Search ..." />
+    <a href="./signin">
+      <UserIcon />
+      <span>Sign In</span>
+    </a>
+  </div>
+);

QandA/frontend/src/Icons.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+import user from './user.svg';
+export const UserIcon = () => <img src={user} alt="User" width="12px" />;

QandA/frontend/src/user.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px">
+  <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
+</svg>