Better print style + base tabs

src/components/app.tsx

@@ -20,7 +20,7 @@ const App: FunctionalComponent = () => {
 
     return (
         <div id="app">
-            <Header />
+            <Header class="noPrint" />
             <Router onChange={handleRoute}>
                 <Route path="/" component={Home} />
                 <Route path="/p/:projectId" component={Project} />

src/components/header/index.tsx

@@ -2,9 +2,13 @@ import { FunctionalComponent, h } from "preact";
 import { Link } from "preact-router/match";
 import * as style from "./style.css";
 
-const Header: FunctionalComponent = () => {
+export interface HeaderProps {
+    class?: string
+}
+
+const Header: FunctionalComponent<HeaderProps> = ({ ...props}) => {
     return (
-        <div class="container">
+        <div class={`container ${props.class ? props.class : ''}`}>
             <div class="columns">
                 <div class="column">
                     <nav class="navbar" role="navigation" aria-label="main navigation">

src/components/tabs/index.tsx

@@ -0,0 +1,50 @@
+import { FunctionalComponent, h, ComponentChild } from "preact";
+import * as style from "./style.css";
+import { useState } from "preact/hooks";
+
+export interface TabItem {
+    label: string
+    icon?: string
+    render: () => ComponentChild
+}
+
+export interface TabsProps {
+    class?: string
+    items: TabItem[]
+}
+
+const Tabs: FunctionalComponent<TabsProps> = ({ items, ...props }) => {
+    const [ selectedTabIndex, setSelectedTabIndex ] = useState(0);
+
+    const onTabClick = (tabIndex: number) => {
+        setSelectedTabIndex(tabIndex);
+    };
+
+    const selectedTab = items[selectedTabIndex];
+
+    return (
+        <div class={`${style.tabs} ${props.class}`}>
+            <div class="tabs">
+                <ul class={`noPrint`}>
+                {
+                    items.map((tabItem, tabIndex) => (
+                        <li key={`tab-${tabIndex}`}
+                            onClick={onTabClick.bind(null, tabIndex)}
+                            class={`${selectedTabIndex === tabIndex ? 'is-active' : ''}`}>
+                            <a>
+                                <span class="icon is-small">{tabItem.icon}</span>
+                                {tabItem.label}
+                            </a>
+                        </li>
+                    ))
+                }
+                </ul>
+            </div>
+            <div class={style.tabContent}>
+                { selectedTab.render() }
+            </div>
+        </div>
+    );
+};
+
+export default Tabs;

src/components/tabs/style.css

@@ -0,0 +1,8 @@
+.tabs {
+    display: inherit;
+}
+
+.tabContent {
+    padding-top: 1em;
+    max-width: 100%;
+}

src/components/tabs/style.css.d.ts

@@ -0,0 +1,3 @@
+// This file is automatically generated from your CSS. Any edits will be overwritten.
+export const tabs: string;
+export const tabContent: string;