125 lines
2.7 KiB
TypeScript
125 lines
2.7 KiB
TypeScript
import Global from "~/lib/Global";
|
|
import { Icon } from "./Icon";
|
|
import { ChevronRight, RectangleVertical } from "lucide";
|
|
import { Link } from "./Link";
|
|
|
|
interface LayoutProps {
|
|
children: JSX.Element | JSX.Element[];
|
|
}
|
|
|
|
const menuItems = [
|
|
{
|
|
name: "Home",
|
|
href: "/",
|
|
},
|
|
{
|
|
name: "Posts",
|
|
href: "/posts",
|
|
},
|
|
{
|
|
name: "About Me",
|
|
href: "/about",
|
|
},
|
|
];
|
|
|
|
export default function Layout({ children }: LayoutProps) {
|
|
return (
|
|
<>
|
|
<Global
|
|
css={{
|
|
body: {
|
|
backgroundColor: "$black",
|
|
color: "$fg",
|
|
fontFamily: "$default",
|
|
},
|
|
"::selection": {
|
|
backgroundColor: "$magenta",
|
|
color: "black",
|
|
},
|
|
}}
|
|
/>
|
|
<header
|
|
style={{
|
|
borderBottom: "2px solid",
|
|
borderColor: "$magenta",
|
|
position: "sticky",
|
|
top: 0,
|
|
zIndex: 50,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
maxW: "$page",
|
|
mX: "auto",
|
|
pX: "$4",
|
|
pY: "$4",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "start",
|
|
gap: "$1",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
fontSize: "$lg",
|
|
}}
|
|
>
|
|
/home/MasterGordon
|
|
</span>
|
|
<span
|
|
style={{
|
|
fontSize: "$base",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Icon icon={ChevronRight} size="$4" color="$fg" />
|
|
<Icon
|
|
icon={RectangleVertical}
|
|
size="$5"
|
|
color="$fg"
|
|
style={{
|
|
animation: "blink 1s infinite step-start",
|
|
}}
|
|
/>
|
|
</span>
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "1ch",
|
|
}}
|
|
>
|
|
{menuItems.map((item) => (
|
|
<Link
|
|
style={{
|
|
"&:hover": {},
|
|
cursor: "pointer",
|
|
border: "2px solid",
|
|
borderColor: "$cyan",
|
|
borderRadius: "4px",
|
|
pX: "1ch",
|
|
pY: "0.5ch",
|
|
}}
|
|
href={item.href}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main>{children}</main>
|
|
<footer></footer>
|
|
</>
|
|
);
|
|
}
|