Create a Header

Author: grahamc

src/Header/Header.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import Header from ".";
+import { Placeholder } from "../Placeholder";
+import ColorSchemeToggle from "../ColorSchemeToggle";
+
+const meta = {
+  title: "Organism/Header",
+  component: Header,
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = () => (
+  <>
+    <Header>
+      <Header.Logo>
+        <Placeholder height="100%" width="100px" label="Logo" />
+      </Header.Logo>
+
+      <Header.Element>
+        <ColorSchemeToggle />
+      </Header.Element>
+      <Header.Element>
+        <Placeholder height="100%" width="100px" label="Primary Element" />
+      </Header.Element>
+
+      <Header.Element>
+        <Placeholder height="100%" label="Navigation Link" />
+      </Header.Element>
+    </Header>
+  </>
+);

src/Header/index.scss

@@ -0,0 +1,27 @@
+.header {
+  width: 100%;
+  height: 56px;
+  padding: 1em;
+
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+  justify-content: space-between;
+  box-sizing: border-box;
+
+  .header__logo {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    gap: 12px;
+  }
+
+  .header__element {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: 1em;
+  }
+}

src/Header/index.tsx

@@ -0,0 +1,50 @@
+import { type FC } from "react";
+
+import "./index.scss";
+import React from "react";
+import clsx from "clsx";
+
+export interface HeaderProps {}
+
+const Root: FC<React.PropsWithChildren<HeaderProps>> = ({ children }) => {
+  let logo: React.ReactElement | undefined = undefined;
+  let elements: React.ReactElement[] = [];
+
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    if (child.type === Header.Logo) {
+      logo = child;
+    } else if (child.type === Header.Element) {
+      elements.push(child);
+    } else {
+      console.log("Dropping unknown children of Header.");
+    }
+  });
+
+  return (
+    <div className={"header"}>
+      {!!logo && <div className="header__logo">{logo}</div>}
+
+      {elements.length > 0 && <div className="header__element">{elements}</div>}
+    </div>
+  );
+};
+
+export interface HeaderLogoProps {}
+const Logo: FC<React.PropsWithChildren<HeaderLogoProps>> = ({ children }) => {
+  return children;
+};
+
+export interface HeaderElementProps {}
+const Element: FC<React.PropsWithChildren<HeaderElementProps>> = ({
+  children,
+}) => {
+  return children;
+};
+
+const Header = Object.assign(Root, {
+  Logo,
+  Element,
+});
+
+export default Header;

src/index.ts

@@ -43,6 +43,7 @@ export {
   type GitHubButtonProps,
   default as GitHubButton,
 } from "./GitHubButton";
+export { type HeaderProps, default as Header } from "./Header";
 export {
   type PageLayoutProps,
   type PageLayoutHeaderProps,