70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
"use client"
|
|
import { Box, Flex, Grid, Group, Spoiler, Stack, Text } from "@mantine/core";
|
|
import { useShallowEffect } from "@mantine/hooks";
|
|
import { useState } from "react";
|
|
import { BsCardText } from "react-icons/bs";
|
|
import { TfiAnnouncement } from "react-icons/tfi";
|
|
import { IRootAllAnnouncement } from "../lib/type_announcement";
|
|
import { funGetAnnouncementById } from "../lib/api_announcement";
|
|
import toast from "react-hot-toast";
|
|
|
|
|
|
|
|
|
|
export default function DetailAnnouncement({ id }: { id: string }) {
|
|
const [isData, setIsData] = useState<IRootAllAnnouncement>()
|
|
|
|
async function fetchOneAnnouncement() {
|
|
try {
|
|
const res = await funGetAnnouncementById(id)
|
|
if (res.success) {
|
|
setIsData(res)
|
|
} else {
|
|
toast.error(res.message)
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error(error)
|
|
toast.error("Gagal mendapatkan announcement, coba lagi nanti")
|
|
}
|
|
}
|
|
|
|
useShallowEffect(() => {
|
|
fetchOneAnnouncement()
|
|
}, [])
|
|
|
|
return (
|
|
<Box py={30} px={20}>
|
|
<Box p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
|
|
<Stack>
|
|
<Group>
|
|
<TfiAnnouncement size={25} />
|
|
<Text fw={'bold'}>{isData?.announcement.title}</Text>
|
|
</Group>
|
|
<Grid gutter={'md'}>
|
|
<Grid.Col span={1}>
|
|
<BsCardText size={25} />
|
|
</Grid.Col>
|
|
<Grid.Col span={11}>
|
|
<Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
|
|
<Text>{isData?.announcement.desc}</Text>
|
|
</Spoiler>
|
|
</Grid.Col>
|
|
</Grid>
|
|
</Stack>
|
|
</Box>
|
|
<Box my={15} p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
|
|
{isData?.allAnnouncementMember.map((v, i) => {
|
|
return (
|
|
<Stack key={i}>
|
|
<Text fw={'bold'}>Anggota</Text>
|
|
<Flex direction={"column"} gap={10}>
|
|
<Text>{v.group}</Text>
|
|
</Flex>
|
|
</Stack>
|
|
)
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
)
|
|
} |