54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import "./emoji-pack.css";
|
|
import { EventKind, NostrLink, type NostrEvent } from "@snort/system";
|
|
import { FormattedMessage } from "react-intl";
|
|
|
|
import { useLogin } from "@/hooks/login";
|
|
import useEmoji from "@/hooks/emoji";
|
|
import { DefaultButton, WarningButton } from "./buttons";
|
|
|
|
export function EmojiPack({ ev }: { ev: NostrEvent }) {
|
|
const login = useLogin();
|
|
const link = NostrLink.fromEvent(ev);
|
|
const name = link.id;
|
|
const emojis = useEmoji(login?.pubkey);
|
|
const isUsed = emojis.find(e => e.author === link.author && e.name === link.id);
|
|
const emoji = ev.tags.filter(e => e.at(0) === "emoji");
|
|
|
|
async function toggleEmojiPack() {
|
|
if (isUsed) {
|
|
await login?.state?.removeFromList(EventKind.EmojisList, link, true);
|
|
} else {
|
|
await login?.state?.addToList(EventKind.EmojisList, link, true);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="emoji-pack">
|
|
<div className="emoji-pack-title">
|
|
<h4>{name}</h4>
|
|
{login?.pubkey &&
|
|
(isUsed ? (
|
|
<WarningButton onClick={toggleEmojiPack}>
|
|
<FormattedMessage defaultMessage="Remove" id="G/yZLu" />
|
|
</WarningButton>
|
|
) : (
|
|
<DefaultButton onClick={toggleEmojiPack}>
|
|
<FormattedMessage defaultMessage="Add" id="2/2yg+" />
|
|
</DefaultButton>
|
|
))}
|
|
</div>
|
|
<div className="emoji-pack-emojis">
|
|
{emoji.map(e => {
|
|
const [, name, image] = e;
|
|
return (
|
|
<div className="emoji-definition" key={name}>
|
|
<img alt={name} className="custom-emoji" src={image} />
|
|
<span className="emoji-name">{name}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|