style: login and config working

This commit is contained in:
aronmal 2024-01-16 20:22:23 +01:00
parent a657906f4f
commit 55b81fac91
Signed by: aronmal
GPG key ID: 816B7707426FC612
28 changed files with 2322 additions and 3469 deletions

View file

@ -1,35 +1,53 @@
import { faCirclePlus } from "@fortawesome/pro-regular-svg-icons";
import { JSX, Show, Suspense } from "solid-js";
import "../styles/components/NavBar.scss";
import { FontAwesomeIcon } from "./FontAwesomeIcon";
import NavUser from "./NavUser";
export function Li(props: {
href: string;
action?: () => void;
name?: string;
children?: JSX.Element;
}) {
return (
<li class="navElem flex-row thick">
<a
class="flex-row"
href={props.href}
onClick={() => props.action && props.action()}
>
{props.children ?? <></>}
<Show when={props.name}>
<span>{props.name}</span>
</Show>
</a>
</li>
);
}
function NavBar() {
return (
<nav>
<ul>
<li class="navElem">
<a class="textBx" href="/">
<img id="logo" src="/assets/logox256.png" alt="The Bots Logo" />
li&apos;l Judd
</a>
</li>
<li class="navElem">
<a href="/features">Features</a>
</li>
<li class="navElem">
<a href="/how-do-i">How do I...?</a>
</li>
<li class="navElem">
<a href="/stack">The Stack</a>
</li>
<li class="navElem">
<a href="/about">About</a>
</li>
<li class="navElem">
<a
href="https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=18977581952080&scope=bot"
target="_blank"
>
Invite to your server
</a>
</li>
<nav class="flex-row responsive">
<ul class="flex-row responsive thick">
<Li href="/" name="li'l Judd">
<img src="/assets/logox256.png" alt="The Bots Logo" />
</Li>
<Li href="/features" name="Features" />
<Li href="/how-do-i" name="How do I...?" />
<Li href="/stack" name="The Stack" />
<Li href="/about" name="About" />
</ul>
<ul class="flex-row responsive thick">
<Li
href="https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=18977581952080&scope=bot"
name="Invite to your server"
>
<FontAwesomeIcon class="lower" icon={faCirclePlus} size="xl" />
</Li>
<Suspense>
<NavUser />
</Suspense>
</ul>
</nav>
);