feat(topic state and command) - add tab

src/features/topics/index.tsx

@@ -1,8 +1,11 @@
-import { Edit, PlusIcon, Trash2 } from "lucide-react";
-import { useTopics } from "./hooks/queries";
+import { PlusIcon } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../../utils/classname";
+import StateSection from "./sections/state";
+import CommandSection from "./sections/command";
 
 export default function TopicsFeature() {
-  const { data } = useTopics();
+  const [tab, setTab] = useState("state");
   return (
     <div className="flex flex-col gap-4">
       <div className="p-4 flex justify-end">
@@ -11,18 +14,28 @@ export default function TopicsFeature() {
           Tambah Topic
         </button>
       </div>
-      {data?.map((item, key) => (
-        <div
-          key={key}
-          className="bg-white border-b border-neutral-200 p-4 flex justify-between"
+      <div className="flex justify-between">
+        <button
+          onClick={() => setTab("state")}
+          className={cn(
+            "w-full text-center p-x2 py-4 border-b-2 border-transparent",
+            tab === "state" && "border-amber-500",
+          )}
         >
-          <h1>{item.topic}</h1>
-          <div className="flex gap-2 ">
-            <Edit className="text-blue-500 cursor-pointer" size={18} />
-            <Trash2 className="text-red-500 cursor-pointer" size={18} />
-          </div>
-        </div>
-      ))}
+          state-reply
+        </button>
+        <button
+          onClick={() => setTab("command")}
+          className={cn(
+            "w-full text-center p-x2 py-4 border-b-2 border-transparent",
+            tab === "command" && "border-amber-500",
+          )}
+        >
+          commands
+        </button>
+      </div>
+      {tab === "state" && <StateSection />}
+      {tab === "command" && <CommandSection />}
     </div>
   );
 }