site/quartz/components/Homebar.tsx

45 lines
1.3 KiB
TypeScript
Raw Normal View History

2024-04-07 12:12:40 +00:00
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 (
2024-04-07 14:22:30 +00:00
<div class="homebar">
2024-04-07 14:42:33 +00:00
<a class="hb-button" href="/">Home</a>
2024-04-07 15:56:57 +00:00
<a class="hb-button" href="/Characters">Characters</a>
<a class="hb-button" href="/Links">Where you can find me</a>
<a class="hb-button" href="/Projects">Projects</a>
<a class="hb-button" href="/Articles">Articles</a>
2024-04-07 12:12:40 +00:00
</div>
)
}
Homebar.css = `
.homebar {
margin: 0;
display: flex;
flex-direction: row;
2024-04-07 14:43:53 +00:00
flex-wrap: wrap;
2024-04-07 12:12:40 +00:00
}
2024-04-07 14:24:57 +00:00
.hb-button {
2024-04-07 14:41:30 +00:00
text-size: 0.9rem;
2024-04-07 14:27:58 +00:00
border-radius: 16px;
border:none;
2024-04-07 12:12:40 +00:00
background-color: rgba(100,100,100, 0.3);
2024-04-07 14:41:30 +00:00
padding: 0.4rem 0.8rem;
2024-04-07 12:12:40 +00:00
margin: 0.2rem 0.4rem;
text-decoration: none;
2024-04-07 12:13:47 +00:00
width: fit-content;
height: fit-content;
2024-04-07 14:27:58 +00:00
cursor:pointer;
2024-04-07 12:12:40 +00:00
}
2024-04-07 14:24:57 +00:00
.hb-button:hover {
2024-04-07 12:12:40 +00:00
background-color: rgba(100,100,100, 0.5);
}
`
export default (() => Homebar) satisfies QuartzComponentConstructor