# Event Join

## feat
- Join event
- kontribusi event
- histoty in progress
### No Issue

src/app_modules/event/main/status_page/draft.tsx

@@ -1,39 +1,34 @@
 "use client";
 
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
-import { Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { Box, Center, Group, Paper, Stack, Text, Title } from "@mantine/core";
 import moment from "moment";
 import { useRouter } from "next/navigation";
+import { MODEL_EVENT } from "../../model/interface";
+import { useState } from "react";
+import ComponentEvent_BoxListStatus from "../../component/box_list_status";
+import _ from "lodash";
 
-export default function Event_StatusDraft() {
-  const router = useRouter()
+export default function Event_StatusDraft({
+  listDraft,
+}: {
+  listDraft: MODEL_EVENT[];
+}) {
+  const router = useRouter();
+
+  if (_.isEmpty(listDraft))
+    return (
+      <Center h={"50vh"} fz={"sm"} fw={"bold"}>
+        Tidak Ada Event
+      </Center>
+    );
   return (
     <>
-      {Array(5)
-        .fill(0)
+      {listDraft
         .map((e, i) => (
-          <Paper
-            key={i}
-            shadow="lg"
-            radius={"md"}
-            p={"md"}
-            withBorder
-            mb={"md"}
-            onClick={() => router.push(RouterEvent.detail_draft)}
-          >
-            <Stack>
-              <Group position="apart">
-                <Title order={6}>Nama Event</Title>
-                <Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
-              </Group>
-              <Text fz={"sm"} lineClamp={2}>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
-                velit modi ut consequatur, iure eaque numquam id iste, nihil
-                laborum facilis dolores vel possimus earum ullam, necessitatibus
-                omnis tenetur repellendus.
-              </Text>
-            </Stack>
-          </Paper>
+          <Box key={e.id}>
+            <ComponentEvent_BoxListStatus data={e} path={RouterEvent.detail_draft}/>
+          </Box>
         ))}
     </>
   );