diff --git a/src/components/Message.tsx b/src/components/Message.tsx
index 4d7fe92..4d1bd91 100644
--- a/src/components/Message.tsx
+++ b/src/components/Message.tsx
@@ -1,4 +1,4 @@
-import { memo, type ReactElement } from "react";
+import type { ReactElement } from "react";
import type { ChatMessage, Processed } from "../hooks/useTwitchChat";
import ProfilePicture from "./ProfilePicture";
import BadgeList from "./BadgeList";
@@ -24,26 +24,27 @@ function colorToRgba(color?: string): string | undefined {
return `rgba(${red}, ${green}, ${blue}, 0.25)`;
}
-function fragmentToComponent(
- fragment: Processed,
- index: number
-): React.ReactElement | undefined {
+function FragmentToComponent({
+ fragment,
+}: {
+ fragment: Processed;
+}): React.ReactElement | undefined {
switch (fragment.type) {
case "text":
- return ;
+ return ;
case "emote":
- return ;
+ return ;
case "mention":
- return ;
+ return ;
case "7tv-emote":
case "bttv-emote":
- return ;
+ return ;
default:
return;
}
}
-function MessageComponent({
+export default function MessageComponent({
message,
twitchBadges,
}: {
@@ -70,12 +71,11 @@ function MessageComponent({
{message.message.fragments
.slice(message.reply ? 1 : 0) // Drop the first mention fragment
- .map((fragment, index) => fragmentToComponent(fragment, index))}
+ .map((fragment, index) => (
+
+ ))}
);
}
-
-const Message = memo(MessageComponent);
-export default Message;