add Header

This commit is contained in:
Kentai Radiquum 2025-01-30 00:52:45 +05:00
parent 236246a83f
commit 0c3130e95f
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
7 changed files with 203 additions and 4 deletions

View file

@ -28,7 +28,7 @@ export default function head(props: {
<meta property="og:url" content={`${props.url}${props.path}`} />
{props.preload ? props.preload.map((item) => <link key={`preload_${item}`} rel="preload" href={item} as="fetch"></link>) : ""}
{props.dns ? props.dns.map((item) => <link key={`dns_${item}`} rel="dns-prefetch" href={item} />) : ""}
{/* <meta property="og:logo" content="<%- baseUrl %><%= path %>/static/images/logo-1x.png" /> */}
<meta property="og:logo" content={`${props.url}/static/logo-1x.png`} />
{props.environment == "dev" ? (
<script src="./static/dev/hotreload.js"></script>
) : (

View file

@ -0,0 +1,19 @@
export default function Header(props: {path: string}) {
return (
<header className="sticky top-0 left-0 right-0 dark:bg-orange-950 text-[#f9ebeb] rounded-b-lg z-10">
<div className="container flex items-center justify-between gap-4 px-8 py-4 mx-auto min-h-16">
<a href="/">
<img
className="h-6 sm:h-10"
src="/static/logo.svg"
alt="index page"
/>
</a>
<div className="flex items-center gap-4">
<a href="/images/" className={`${props.path == "/images/" ? "underline" : ""} lg:text-xl`}>Images</a>
<a href="/videos/" className={`${props.path == "/videos/" ? "underline" : ""} lg:text-xl`}>Videos</a>
</div>
</div>
</header>
);
}

View file

@ -1,11 +1,14 @@
import Head from "./Components/Head";
import Header from "./Components/Header";
export default function Index(props: {
environment: "prod" | "dev";
title: string;
path: string;
head: {
description: string;
image: string;
path: string;
url: string;
preload?: string[];
dns?: string[];
@ -16,9 +19,11 @@ export default function Index(props: {
<Head
environment={props.environment}
title={props.title}
path={props.path}
{...props.head}
/>
<body>
<body className="dark:bg-[#160606] text-[#f9ebeb]">
<Header path={props.path}/>
nothing yet . . .
</body>
</html>