site/quartz/components/Homebar.tsx
2024-04-07 14:12:40 +02:00

39 lines
1.1 KiB
TypeScript

import { pathToRoot } from "../util/path"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import { classNames } from "../util/lang"
import { i18n } from "../i18n"
const Homebar: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => {
const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
const baseDir = pathToRoot(fileData.slug!)
return (
<div class={classNames(displayClass, "homebar")}>
<a href="/index">Home</a>
<a href="Characters">Characters</a>
<a href="Links">Where you can find me</a>
<a href="Projects">Projects</a>
<a href="Articles">Articles</a>
</div>
)
}
Homebar.css = `
.homebar {
margin: 0;
display: flex;
flex-direction: row;
}
.homebar > * {
border-radius: 25%;
background-color: rgba(100,100,100, 0.3);
padding: 0.2rem 0.4rem;
margin: 0.2rem 0.4rem;
text-decoration: none;
}
.homebar > *:hover {
background-color: rgba(100,100,100, 0.5);
}
`
export default (() => Homebar) satisfies QuartzComponentConstructor