# Event Join

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

src/app_modules/event/component/detail/detail_data.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { Stack, Title, Grid, Text, Paper, Spoiler } from "@mantine/core";
+import moment from "moment";
+import { MODEL_EVENT } from "../../model/interface";
+
+export default function ComponentEvent_DetailData({
+  data,
+}: {
+  data: MODEL_EVENT;
+}) {
+  const tgl = data.tanggal;
+  const hari = tgl.toLocaleString("id-ID", { dateStyle: "full" });
+
+  const jam = tgl.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
+
+  return (
+    <>
+      <Paper withBorder p={"md"} shadow="lg">
+        <Stack px={"sm"}>
+          <Title order={4}>{data ? data.title : null}</Title>
+          <Grid>
+            <Grid.Col span={4}>
+              <Text fw={"bold"} fz={"sm"}>
+                Lokasi
+              </Text>
+            </Grid.Col>
+            <Grid.Col span={1}>:</Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Text>{data ? data.lokasi : null}</Text>
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={4}>
+              <Text fw={"bold"} fz={"sm"}>
+                Tipe Acara
+              </Text>
+            </Grid.Col>
+            <Grid.Col span={1}>:</Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Text>{data ? data.EventMaster_TipeAcara.name : null}</Text>
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={4}>
+              <Text fw={"bold"} fz={"sm"}>
+                Tanggal
+              </Text>
+            </Grid.Col>
+            <Grid.Col span={1}>:</Grid.Col>
+            <Grid.Col span={"auto"}>{hari}</Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={4}>
+              <Text fw={"bold"} fz={"sm"}>
+                Jam
+              </Text>
+            </Grid.Col>
+            <Grid.Col span={1}>:</Grid.Col>
+            <Grid.Col span={"auto"}>{jam}</Grid.Col>
+          </Grid>
+          <Stack spacing={2}>
+            <Text fw={"bold"} fz={"sm"}>
+              Deskripsi
+            </Text>
+            <Spoiler
+              hideLabel="Lihat sedikit"
+              maxHeight={50}
+              showLabel="Lihat banyak"
+            >
+              {data ? data.deskripsi : null}
+            </Spoiler>
+          </Stack>
+        </Stack>
+      </Paper>
+    </>
+  );
+}