add tag

components/tag.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { Space, Tag } from "antd";
+
+const { CheckableTag } = Tag;
+
+interface Props {
+  Data: string[];
+  onClick?: (tag: string) => void;
+}
+
+const App = ({ Data, onClick }: Props) => {
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  // const tagsData = ["V1", "V2", "V3", "V4"];
+  const handleChange = (tag: string, checked: boolean) => {
+    if (!checked) return;
+    const nextSelectedTags = checked
+      ? [...selectedTags, tag]
+      : selectedTags.filter((t) => t !== tag);
+    console.log("You are interested in: ", nextSelectedTags);
+    onClick && onClick(tag);
+    setSelectedTags(nextSelectedTags);
+  };
+
+  return (
+    <>
+      <Space className="ml-5" size={16} wrap>
+        {Data.map((tag) => (
+          <CheckableTag
+            className={
+              selectedTags.includes(tag) ? "bg-neutral-700" : "bg-neutral-200"
+            }
+            key={tag}
+            checked={selectedTags.includes(tag)}
+            onChange={(checked) => handleChange(tag, checked)}
+          >
+            {tag}
+          </CheckableTag>
+        ))}
+      </Space>
+    </>
+  );
+};
+
+export default App;

interfaces/message.ts

@@ -1,4 +1,7 @@
 export interface Message {
   text: string;
   img: string;
-}
+  msgID?: string;
+  msgHash?: string;
+  hasTag: boolean;
+}