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
39
40
41
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import {
NavLink,
Outlet,
useNavigation,
} from "https://esm.sh/react-router-dom@6.23.0?deps=react@18.2.0,react-dom@18.2.0";
const tabs = { "/": "Home", "/browse": "Browse", "/faq": "FAQ" };
export default function() {
const navigation = useNavigation();
return (
<div>
<nav className="p-4 gap-x-4 flex items-center">
{Object.entries(tabs).map(([link, title]) => (
<NavLink
to={link}
key={link}
className={({ isActive }) => isActive ? "" : "text-gray-400 hover:text-gray-500"}
>
{title === "Home" ? <div className="font-bold text-black">Date Me Directory</div> : title}
</NavLink>
))}
<NavLink
to="/submit"
className={({ isActive }) =>
isActive
? "hidden"
: "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 className="hidden md:inline">your doc</span>
</NavLink>
</nav>
<div className={navigation.state === "loading" ? "hidden" : ""}>
<Outlet />
</div>
<div className={navigation.state === "loading" ? "max-w-md mx-auto p-10" : "hidden"}>
Loading profiles...
</div>
</div>
);
}
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!
June 7, 2024