53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
/** @jsx jsx */
|
|
|
|
import { PropsWithChildren, jsx } from "https://deno.land/x/hono@v4.3.10/middleware.ts"
|
|
import { _css } from "../../lib/utils.ts";
|
|
import { User } from "../../lib/storage.ts";
|
|
|
|
//
|
|
export default function Heading({ username }: PropsWithChildren<{username: string | null}>) {
|
|
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"/>
|
|
{(username !== null) && <MenuItem name={`Logout (${username})`} location="/api/logout" />}
|
|
</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>
|
|
)
|
|
}
|