feat: autocomplete custom emoji

This commit is contained in:
Alejandro Gomez
2023-06-24 08:25:25 +02:00
parent becae9cfb4
commit 4eb30813ed
17 changed files with 528 additions and 211 deletions

View File

@ -11,59 +11,72 @@ import { NewStream } from "element/new-stream";
import { useState } from "react";
export function LayoutPage() {
const navigate = useNavigate();
const login = useLogin();
const [newStream, setNewStream] = useState(false);
const navigate = useNavigate();
const login = useLogin();
const [newStream, setNewStream] = useState(false);
async function doLogin() {
const pub = await EventPublisher.nip7();
if (pub) {
Login.loginWithPubkey(pub.pubKey);
}
async function doLogin() {
const pub = await EventPublisher.nip7();
if (pub) {
Login.loginWithPubkey(pub.pubKey);
}
}
function loggedIn() {
if (!login) return;
function loggedIn() {
if (!login) return;
return <>
<button type="button" className="btn btn-primary" onClick={() => setNewStream(true)}>
New Stream
<Icon name="signal" />
</button>
<Profile pubkey={login.pubkey} options={{
showName: false
}} />
</>
}
return (
<>
<button
type="button"
className="btn btn-primary"
onClick={() => setNewStream(true)}
>
New Stream
<Icon name="signal" />
</button>
<Profile
pubkey={login.pubkey}
options={{
showName: false,
}}
/>
</>
);
}
function loggedOut() {
if (login) return;
function loggedOut() {
if (login) return;
return <>
<AsyncButton type="button" className="btn btn-border" onClick={doLogin}>
Login
<Icon name="login" />
</AsyncButton>
</>
}
return (
<>
<AsyncButton type="button" className="btn btn-border" onClick={doLogin}>
Login
<Icon name="login" />
</AsyncButton>
</>
);
}
return <>
<header>
<div onClick={() => navigate("/")}>
S
</div>
<div className="input">
<input type="text" placeholder="Search" />
<Icon name="search" size={15} />
</div>
<div>
{loggedIn()}
{loggedOut()}
</div>
</header>
<Outlet />
{newStream && <Modal onClose={() => setNewStream(false)} >
<NewStream onFinish={() => navigate("/")} />
</Modal>}
return (
<>
<header>
<div onClick={() => navigate("/")}>S</div>
<div className="input">
<input type="text" placeholder="Search" />
<Icon name="search" size={15} />
</div>
<div>
{loggedIn()}
{loggedOut()}
</div>
</header>
<Outlet />
{newStream && (
<Modal onClose={() => setNewStream(false)}>
<NewStream onFinish={() => navigate("/")} />
</Modal>
)}
</>
}
);
}