feat: flag component

index.tsx

@@ -17,11 +17,14 @@ type Flag = {
     text: string;
 };
 
-function Flag({ message }: { message: Message; }) {
-    if (message.author.id === "886685857560539176") return (
+function Flag({ id }: { id: string; }) {
+    return (
         <div>
-            <Text color="text-danger" variant="text-sm/semibold">
-                🛑 This link is explosive
+            <Text
+                variant="text-md/semibold"
+                style={{ color: flags.get(id)?.type === "danger" ? "#f8312f" : flags.get(id)?.type === "warning" ? "#ffb02e" : flags.get(id)?.type === "info" ? "#62A8FF" : "#62FF74" }}
+            >
+                {flags.get(id)?.type === "danger" ? "🛑" : flags.get(id)?.type === "warning" ? "⚠️" : flags.get(id)?.type === "info" ? "🔵" : "✅"} {flags.get(id)?.text}
             </Text>
         </div>
     );
@@ -34,9 +37,10 @@ export default definePlugin({
     dependencies: ["MessageAccessoriesAPI"],
     start() {
         addAccessory("flag", (props: Record<string, any>) => {
-            return (
-                <Flag message={props.message as Message} />
-            );
+            if (flags.has((props.message as Message).author.id)) {
+                return <Flag id={props.message.author.id} />;
+            }
+            return null;
         }, 4);
     },
     commands: [