Forked from pomdtr/dateme_layout
Public
Script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/** @jsxImportSource npm:hono@3/jsx */
import { PropsWithChildren } from "npm:hono/jsx";
const tabs = { "/": "Home", "/browse": "Browse", "/faq": "FAQ" };
export default function({ activeTab, children }: PropsWithChildren<{ activeTab: string }>) {
return (
<html>
<head>
<title>Date Me Directory</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.tailwindcss.com" />
</head>
<body>
<div class="p-4 gap-x-4 flex items-center">
{Object.entries(tabs).map(([link, title]) => (
<a
href={link}
key={link}
class={`${activeTab === link ? "" : "text-gray-400 hover:text-gray-500"}`}
>
{title === "Home" ? <div class="font-bold text-black">Date Me Directory</div> : title}
</a>
))}
{activeTab === "/submit" ? null : (
<a
href="/submit"
class="px-2 py-1 border-blue-500 text-blue-500 border border-2 hover:bg-blue-100 rounded-md font-bold rounded ml-4"
>
Submit <span class="hidden md:inline">your doc</span>
</a>
)}
</div>
{children}
</body>
</html>
);
}
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
March 25, 2024