forked from Kieran/zap.stream
feat: add text component
This commit is contained in:
parent
15ac0cacb3
commit
becae9cfb4
@ -7,6 +7,7 @@ import { useLiveChatFeed } from "hooks/live-chat";
|
||||
import AsyncButton from "./async-button";
|
||||
import { Profile } from "./profile";
|
||||
import { Icon } from "./icon";
|
||||
import { Text } from "./text";
|
||||
import Spinner from "./spinner";
|
||||
import { useLogin } from "hooks/login";
|
||||
import { useUserProfile } from "@snort/system-react";
|
||||
@ -96,9 +97,7 @@ function ChatMessage({ ev, link }: { ev: TaggedRawEvent, link: NostrLink }) {
|
||||
return (
|
||||
<div className={`message${link.author === ev.pubkey ? " streamer" : ""}`}>
|
||||
<Profile pubkey={ev.pubkey} />
|
||||
<span>
|
||||
{ev.content}
|
||||
</span>
|
||||
<Text ev={ev} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
5
src/element/text.css
Normal file
5
src/element/text.css
Normal file
@ -0,0 +1,5 @@
|
||||
.custom-emoji {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
display: inline-block;
|
||||
}
|
25
src/element/text.tsx
Normal file
25
src/element/text.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import "./text.css";
|
||||
import { useMemo } from "react";
|
||||
import { TaggedRawEvent } from "@snort/system";
|
||||
|
||||
type Emoji = [string, string];
|
||||
|
||||
function replaceEmoji(content: string, emoji: Emoji[]) {
|
||||
return content.split(/:(\w+):/g).map((i) => {
|
||||
const t = emoji.find((a) => a[0] === i);
|
||||
if (t) {
|
||||
return <img alt={t[0]} src={t[1]} className="custom-emoji" />;
|
||||
} else {
|
||||
return i;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function Text({ ev }: { ev: TaggedRawEvent }) {
|
||||
const emojis = useMemo(() => {
|
||||
return ev.tags
|
||||
.filter((t) => t.at(0) === "emoji")
|
||||
.map((t) => t.slice(1) as Emoji);
|
||||
}, [ev]);
|
||||
return <span>{replaceEmoji(ev.content, emojis)}</span>;
|
||||
}
|
Loading…
Reference in New Issue
Block a user