#style:

- UI Project Collaboration
## No Issue

src/app_modules/colab/component/card_view/crad_grup.tsx

@@ -0,0 +1,62 @@
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Paper, Grid, Stack, Center, Loader, Text } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function ComponentColab_CardGrup({ data }: { data: any }) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [idRoom, setIdRoom] = useState("");
+
+  return (
+    <>
+      <Paper
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+          borderRadius: "10px",
+          marginBottom: "20px",
+          padding: "15px",
+        }}
+        onClick={() => {
+          router.push(
+            RouterColab.group_chat + data?.ProjectCollaboration_RoomChat.id,
+            { scroll: false }
+          );
+          setIdRoom(data?.ProjectCollaboration_RoomChat.id);
+          setLoading(true);
+        }}
+      >
+        <Grid align="center" h={"100%"}>
+          <Grid.Col span={"auto"}>
+            <Stack spacing={0}>
+              <Text fw={"bold"} lineClamp={1}>
+                {data?.ProjectCollaboration_RoomChat?.name}
+              </Text>
+              <Text fz={"xs"} c={"white"}>
+                {
+                  data?.ProjectCollaboration_RoomChat
+                    ?.ProjectCollaboration_AnggotaRoomChat.length
+                }{" "}
+                Anggota
+              </Text>
+            </Stack>
+          </Grid.Col>
+          <Grid.Col span={"content"}>
+            <Center>
+              {data?.ProjectCollaboration_RoomChat?.id === idRoom ? (
+                <ComponentGlobal_Loader />
+              ) : (
+                <IconChevronRight color="white" />
+              )}
+            </Center>
+          </Grid.Col>
+        </Grid>
+      </Paper>
+    </>
+  );
+}