153 lines
4.8 KiB
TypeScript
153 lines
4.8 KiB
TypeScript
"use client";
|
|
|
|
import { MainColor } from "@/app_modules/_global/color";
|
|
import {
|
|
ComponentGlobal_AvatarAndUsername,
|
|
ComponentGlobal_CardStyles,
|
|
} from "@/app_modules/_global/component";
|
|
import { clientLogger } from "@/util/clientLogger";
|
|
import {
|
|
Grid,
|
|
SimpleGrid,
|
|
Stack,
|
|
Text,
|
|
Title
|
|
} from "@mantine/core";
|
|
import { useShallowEffect } from "@mantine/hooks";
|
|
import moment from "moment";
|
|
import "moment/locale/id";
|
|
import { useParams } from "next/navigation";
|
|
import { useState } from "react";
|
|
import { apiGetEventDetailById } from "../../_lib/api_event";
|
|
import { MODEL_EVENT } from "../../_lib/interface";
|
|
import { Event_ComponentSkeletonDetail } from "../skeleton/comp_skeleton_detail";
|
|
import Event_ComponentBoxDaftarPeserta from "./comp_box_daftar_peserta";
|
|
import Event_ComponentBoxDaftarSponsor from "./comp_box_sponsor";
|
|
|
|
export default function ComponentEvent_DetailMainData() {
|
|
const params = useParams<{ id: string }>();
|
|
const eventId = params.id as string;
|
|
const [data, setData] = useState<MODEL_EVENT | null>(null);
|
|
|
|
useShallowEffect(() => {
|
|
onLoadData();
|
|
}, []);
|
|
|
|
async function onLoadData() {
|
|
try {
|
|
const respone = await apiGetEventDetailById({
|
|
id: eventId,
|
|
});
|
|
|
|
if (respone) {
|
|
setData(respone.data);
|
|
}
|
|
} catch (error) {
|
|
clientLogger.error("Error get data detail event", error);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{data == null ? (
|
|
<Event_ComponentSkeletonDetail />
|
|
) : (
|
|
<ComponentGlobal_CardStyles>
|
|
<Stack px={"xs"} spacing={"xl"}>
|
|
<ComponentGlobal_AvatarAndUsername
|
|
profile={data?.Author?.Profile as any}
|
|
/>
|
|
|
|
<Stack spacing={"xl"}>
|
|
<Title color={MainColor.white} align="center" order={4}>
|
|
{data ? data.title : null}
|
|
</Title>
|
|
<Grid>
|
|
<Grid.Col span={4}>
|
|
<Text c={MainColor.white} fw={"bold"}>
|
|
Lokasi
|
|
</Text>
|
|
</Grid.Col>
|
|
<Grid.Col span={1}>:</Grid.Col>
|
|
<Grid.Col span={"auto"}>
|
|
<Text c={MainColor.white}>{data ? data.lokasi : null}</Text>
|
|
</Grid.Col>
|
|
</Grid>
|
|
<Grid>
|
|
<Grid.Col span={4}>
|
|
<Text c={MainColor.white} fw={"bold"}>
|
|
Tipe Acara
|
|
</Text>
|
|
</Grid.Col>
|
|
<Grid.Col span={1}>:</Grid.Col>
|
|
<Grid.Col span={"auto"}>
|
|
<Text c={MainColor.white}>
|
|
{data ? data.EventMaster_TipeAcara.name : null}
|
|
</Text>
|
|
</Grid.Col>
|
|
</Grid>
|
|
|
|
<Stack spacing={"xs"}>
|
|
<Text c={MainColor.white} fw={"bold"}>
|
|
Tanggal & Waktu
|
|
</Text>
|
|
<Grid>
|
|
<Grid.Col span={4}>
|
|
<Text c={MainColor.white} fw={"bold"}>
|
|
Mulai
|
|
</Text>
|
|
</Grid.Col>
|
|
<Grid.Col span={1}>:</Grid.Col>
|
|
<Grid.Col span={"auto"}>
|
|
<Text c={MainColor.white}>
|
|
{moment(
|
|
data.tanggal?.toLocaleString("id-ID", {
|
|
dateStyle: "full",
|
|
})
|
|
).format("dddd, DD MMMM YYYY, LT")}
|
|
</Text>
|
|
</Grid.Col>
|
|
</Grid>
|
|
<Grid>
|
|
<Grid.Col span={4}>
|
|
<Text c={MainColor.white} fw={"bold"}>
|
|
Selesai
|
|
</Text>
|
|
</Grid.Col>
|
|
<Grid.Col span={1}>:</Grid.Col>
|
|
<Grid.Col span={"auto"}>
|
|
<Text c={MainColor.white}>
|
|
{moment(
|
|
data.tanggalSelesai?.toLocaleString("id-ID", {
|
|
dateStyle: "full",
|
|
})
|
|
).format("dddd, DD MMMM YYYY, LT")}
|
|
</Text>
|
|
</Grid.Col>
|
|
</Grid>
|
|
</Stack>
|
|
|
|
<Stack spacing={2}>
|
|
<Text c={MainColor.white} fw={"bold"}>
|
|
Deskripsi
|
|
</Text>
|
|
<Text c={MainColor.white}>{data ? data?.deskripsi : null}</Text>
|
|
</Stack>
|
|
<SimpleGrid
|
|
cols={2}
|
|
breakpoints={[
|
|
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
|
|
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
|
|
]}
|
|
>
|
|
<Event_ComponentBoxDaftarPeserta />
|
|
<Event_ComponentBoxDaftarSponsor />
|
|
</SimpleGrid>
|
|
</Stack>
|
|
</Stack>
|
|
</ComponentGlobal_CardStyles>
|
|
)}
|
|
</>
|
|
);
|
|
}
|