init

pages/components/heading.tsx

@@ -0,0 +1,50 @@
+/** @jsx jsx */
+
+import { jsx } from "https://deno.land/x/hono@v4.3.10/middleware.ts"
+import { _css } from "../../lib/utils.ts";
+
+export default function Heading() {
+    return (
+        <header style={_css({
+            width: "100vw",
+            display: "grid",
+            placeContent: "center",
+            backgroundColor: "#202020",
+            borderBottom: "1px solid #444",
+            boxShadow: "0px 0px 10px #0008",
+            position: "fixed",
+        })}>
+            <div style={_css({
+                width: "100vw",
+                maxWidth: "900px",
+                display: "flex",
+            })}>
+                <div style={_css({
+                    borderLeft: '1px solid #444',
+                    borderRight: '1px solid #444',
+                })}>
+                    <h1 style={_css({
+                        margin: "0.3rem",
+                        marginLeft: "3rem",
+                        marginRight: "3rem",
+                    })}>TwiFeur</h1>
+                </div>
+                <MenuItem name="Content" location="/home"/>
+                <MenuItem name="About" location="/about"/>
+                <MenuItem name="User" location="/user"/>
+            </div>
+        </header>
+    )
+}
+
+function MenuItem({ name, location }: { name: string, location: string }) {
+    return (
+        <a href={location} style={_css({
+            borderRight: '1px solid #444',
+            textDecoration: 'none',
+            color: 'unset'
+        })}>
+            <h3 style={_css({ margin: "0.7rem" })}>{name}</h3>
+        </a>
+    )
+}