Files
hipmi/src/app_modules/event/main/beranda.tsx
2024-02-02 15:28:39 +08:00

110 lines
2.8 KiB
TypeScript

"use client";
import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
import {
ActionIcon,
Affix,
Avatar,
Badge,
Box,
Button,
Card,
Center,
Divider,
Grid,
Group,
Image,
Paper,
Skeleton,
Stack,
Text,
Title,
rem,
} from "@mantine/core";
import moment from "moment";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_EVENT } from "../model/interface";
import ComponentEvent_BoxListStatus from "../component/box_list_status";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
import _ from "lodash";
import { IconCirclePlus } from "@tabler/icons-react";
export default function Event_Beranda({
dataEvent,
}: {
dataEvent: MODEL_EVENT[];
}) {
const router = useRouter();
// if (_.isEmpty(dataEvent))
// return (
// <Center h={"80vh"}>
// <Text fw={"bold"} fz={"sm"}>
// Tidak Ada Event
// </Text>
// </Center>
// );
return (
<>
<Affix position={{ bottom: rem(100), right: rem(30) }}>
<ActionIcon
size={"xl"}
radius={"xl"}
variant="transparent"
bg={"blue"}
onClick={() => router.push(RouterEvent.create)}
>
<IconCirclePlus color="white" size={40} />
</ActionIcon>
</Affix>
{_.isEmpty(dataEvent) ? (
<Center h={"80vh"}>
<Text fw={"bold"} fz={"sm"}>
Tidak Ada Event
</Text>
</Center>
) : (
<Box>
{dataEvent.map((e, i) => (
<Card key={e.id} shadow="lg" radius={"md"} withBorder mb={"sm"}>
<Card.Section px={"sm"} pt={"sm"}>
<ComponentGlobal_AuthorNameOnHeader
profileId={e.Author.Profile.id}
imagesId={e.Author.Profile.imagesId}
authorName={e.Author.Profile.name}
/>
</Card.Section>
<Card.Section
p={"sm"}
onClick={() => router.push(RouterEvent.detail_main + e.id)}
>
<Stack>
<Grid>
<Grid.Col span={8}>
<Title order={6} truncate>
{e.title}
</Title>
</Grid.Col>
<Grid.Col span={4}>
<Text fz={"sm"} truncate>
{moment(e.tanggal).format("ll")}
</Text>
</Grid.Col>
</Grid>
<Text fz={"sm"} lineClamp={2}>
{e.deskripsi}
</Text>
</Stack>
</Card.Section>
</Card>
))}
</Box>
)}
</>
);
}