97 lines
2.2 KiB
TypeScript
97 lines
2.2 KiB
TypeScript
import { Icon } from "element/icon";
|
|
import "./layout.css";
|
|
import {
|
|
EventPublisher,
|
|
NostrEvent,
|
|
encodeTLV,
|
|
NostrPrefix,
|
|
} from "@snort/system";
|
|
import { Outlet, useNavigate, useLocation } from "react-router-dom";
|
|
import AsyncButton from "element/async-button";
|
|
import { Login } from "index";
|
|
import { useLogin } from "hooks/login";
|
|
import { Profile } from "element/profile";
|
|
import { NewStreamDialog } from "element/new-stream";
|
|
|
|
export function LayoutPage() {
|
|
const navigate = useNavigate();
|
|
const login = useLogin();
|
|
const location = useLocation();
|
|
|
|
async function doLogin() {
|
|
const pub = await EventPublisher.nip7();
|
|
if (pub) {
|
|
Login.loginWithPubkey(pub.pubKey);
|
|
}
|
|
}
|
|
|
|
function loggedIn() {
|
|
if (!login) return;
|
|
|
|
return (
|
|
<>
|
|
<NewStreamDialog btnClassName="btn btn-primary" onFinish={goToStream} />
|
|
<Profile
|
|
avatarClassname="mb-squared"
|
|
pubkey={login.pubkey}
|
|
options={{
|
|
showName: false,
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function loggedOut() {
|
|
if (login) return;
|
|
|
|
return (
|
|
<>
|
|
<AsyncButton type="button" className="btn btn-border" onClick={doLogin}>
|
|
Login
|
|
<Icon name="login" />
|
|
</AsyncButton>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function goToStream(ev: NostrEvent) {
|
|
const d = ev.tags.find((t) => t.at(0) === "d")?.at(1) || "";
|
|
const naddr = encodeTLV(
|
|
NostrPrefix.Address,
|
|
d,
|
|
undefined,
|
|
ev.kind,
|
|
ev.pubkey
|
|
);
|
|
navigate(`/${naddr}`);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={
|
|
location.pathname === "/" || location.pathname.startsWith("/p/")
|
|
? "page only-content"
|
|
: location.pathname.startsWith("/chat/")
|
|
? "page chat"
|
|
: "page"
|
|
}
|
|
>
|
|
<header>
|
|
<div className="logo" onClick={() => navigate("/")}>
|
|
S
|
|
</div>
|
|
<div className="input">
|
|
<input className="search-input" type="text" placeholder="Search" />
|
|
<Icon name="search" size={15} />
|
|
</div>
|
|
<div className="header-right">
|
|
{loggedIn()}
|
|
{loggedOut()}
|
|
</div>
|
|
</header>
|
|
<Outlet />
|
|
</div>
|
|
);
|
|
}
|