# Project Collaboration

## feat
- Tampilan beranda & detailnya
- Tampilan status & detailnya
- Tampilan partisipasi & detailnya
- Tampilan grup diskusi & detailnya
### No issue

src/app/makuro/gs_coba.ts

@@ -0,0 +1,3 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const gs_coba_chat = atomWithStorage<any[]>("gs_coba_chat", []);

src/app/makuro/page.tsx

@@ -1,8 +1,58 @@
-import { Text } from "@mantine/core";
+"use client";
+
+import { Box, Paper, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
 import ViewMakuro from "./_server/makuro_view";
+import mqtt_client from "@/util/mqtt_client";
+import { useState } from "react";
+import { useAtom } from "jotai";
+import { gs_coba_chat } from "./gs_coba";
 
 export default function Page() {
-    return <>
-        <ViewMakuro />
+  const [data1, setData1] = useState("");
+  const [data2, setData2] = useState("");
+
+  const [msg, setMsg] = useAtom(gs_coba_chat);
+
+  return (
+    <>
+      <SimpleGrid cols={2} mt={"lg"}>
+        <Stack align="center" justify="center">
+          <TextInput
+            label="User 1"
+            value={data1}
+            onChange={(val) => setData1(val.currentTarget.value)}
+          />
+          <button
+            onClick={() => {
+              mqtt_client.publish("example_hipmi", data1);
+              setData1("");
+            }}
+          >
+            kirim
+          </button>
+        </Stack>
+        <Stack align="center" justify="center">
+          <TextInput
+            label="User 2"
+            value={data2}
+            onChange={(val) => setData2(val.currentTarget.value)}
+          />
+          <button
+            onClick={() => {
+              mqtt_client.publish("example_hipmi", data2);
+              setData2("");
+            }}
+          >
+            kirim
+          </button>
+        </Stack>
+      </SimpleGrid>
+      <Stack align="center" justify="center" mt={"xl"}>
+        <Paper withBorder shadow="lg" p={"lg"}>
+          {msg}
+        </Paper>
+      </Stack>
+      {/* <ViewMakuro /> */}
     </>
-}
+  );
+}