upd: notifikasi pengumuman

Deskripsi:
- fix tampilan notifikasi pengumuman

- update api version

No Issues

src/module/_global/components/notification_custome_center.tsx

@@ -0,0 +1,105 @@
+"use client"
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Center, Flex, Image, rem, SimpleGrid, Text, Transition } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
+import { IoCloseOutline } from 'react-icons/io5';
+import { TEMA } from '../bin/val_global';
+
+export default function NotificationCustomeCenter({ title, desc, onClick }: { title: string, desc: string, onClick: (val: string) => void, }) {
+   const [opened, setOpened] = useState(false);
+   const tema = useHookstate(TEMA)
+
+   useShallowEffect(() => {
+      const timer = setTimeout(() => {
+         setOpened(true);
+      }, 50);
+      return () => clearTimeout(timer);
+   }, []);
+
+   function reloadData() {
+      setOpened(false)
+   }
+   return (
+      <>
+         <Center>
+            <Transition
+               mounted={opened}
+               transition="fade-down"
+               duration={400}
+               timingFunction="ease"
+            >
+               {(state) => (
+                  <div
+                     style={{
+                        ...state,
+                        zIndex: 999,
+                        position: 'fixed',
+                        flex: 1,
+                        display: 'flex',
+                        margin: 0,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        top: '30%'
+                     }}
+                  >
+                     <Box p={rem(15)} w={"90%"} style={{
+                        maxWidth: rem(450),
+                        zIndex: 999,
+                        backgroundColor: "#ffffff",
+                        borderRadius: 15,
+                        border: `1px solid ${tema.get().bgTotalKegiatan}`
+                     }}>
+                        <Flex justify={'flex-end'} align={"center"}>
+                           <IoCloseOutline onClick={reloadData} size={25} />
+                        </Flex>
+                        <Flex
+                           mih={50}
+                           gap="xs"
+                           justify="center"
+                           align="center"
+                           direction="column"
+                           wrap="wrap"
+                        >
+                           <Image
+                              style={{
+                                 maxWidth: '30%',
+                                 maxHeight: '30%',
+                              }}
+                              fit="contain"
+                              alt={'pengumuman'}
+                              src={"/assets/img/announcement.jpg"}
+                           />
+                           <Text size="xl" fw={500} ta="center">PENGUMUMAN</Text>
+                           <Text size="sm" ta="center">{desc}</Text>
+                           <SimpleGrid cols={2} spacing="xs" w={'90%'}>
+                              <Button
+                                 fullWidth
+                                 radius="md"
+                                 onClick={() => {
+                                    setOpened(false)
+                                    onClick('check')
+                                 }}
+                              >
+                                 Periksa Detail
+                              </Button>
+                              <Button
+                                 fullWidth
+                                 radius="md"
+                                 onClick={() => {
+                                    setOpened(false)
+                                    onClick('read')
+                                 }}
+                              >
+                                 Tandai Telah Dibaca
+                              </Button>
+                           </SimpleGrid>
+                        </Flex>
+                     </Box>
+                  </div>
+               )}
+            </Transition>
+         </Center >
+      </>
+   );
+}