From e62243b887094c6a635f4a497838270a75586aab Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Thu, 4 Jul 2024 16:42:58 +0800
Subject: [PATCH] style : update module

Deskripsi:
- add group
- add notification

No issue
---
 src/module/_global/index.ts                   |  6 +-
 src/module/_global/layout/layout_drawer.tsx   | 20 +++++
 .../_global/layout/layout_navbar_home.tsx     |  5 +-
 src/module/_global/val/idDrawer.ts            |  5 ++
 src/module/group/components/list_group.tsx    | 80 +++++++++++++++++++
 .../group/components/ui/drawer_group.tsx      | 62 ++++++++++++++
 .../group/components/ui/navbar_group.tsx      | 38 +++++++++
 src/module/group/index.ts                     |  3 +
 src/module/group/view/view_group.tsx          | 14 ++++
 .../components/list_notification.tsx          |  2 +-
 .../components/ui/navbar_notification.tsx     |  2 -
 .../notification/view/view_notification.tsx   | 10 +--
 12 files changed, 234 insertions(+), 13 deletions(-)
 create mode 100644 src/module/_global/layout/layout_drawer.tsx
 create mode 100644 src/module/_global/val/idDrawer.ts
 create mode 100644 src/module/group/components/list_group.tsx
 create mode 100644 src/module/group/components/ui/drawer_group.tsx
 create mode 100644 src/module/group/components/ui/navbar_group.tsx
 create mode 100644 src/module/group/view/view_group.tsx

diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts
index 23e3719..debe245 100644
--- a/src/module/_global/index.ts
+++ b/src/module/_global/index.ts
@@ -1,11 +1,15 @@
 import { WARNA } from "./fun/WARNA";
+import LayoutDrawer from "./layout/layout_drawer";
 import LayoutIconBack from "./layout/layout_icon_back";
 import LoadingPage from "./layout/layout_loading_page";
 import LayoutLogin from "./layout/layout_login";
 import LayoutNavbarHome from "./layout/layout_navbar_home";
+import { isDrawer } from "./val/idDrawer";
 
 export { WARNA }
 export { LayoutLogin }
 export { LayoutNavbarHome }
-export {LayoutIconBack}
+export { LayoutIconBack }
 export { LoadingPage }
+export { LayoutDrawer }
+export { isDrawer }
\ No newline at end of file
diff --git a/src/module/_global/layout/layout_drawer.tsx b/src/module/_global/layout/layout_drawer.tsx
new file mode 100644
index 0000000..62a997d
--- /dev/null
+++ b/src/module/_global/layout/layout_drawer.tsx
@@ -0,0 +1,20 @@
+import { Box, Drawer, Text } from '@mantine/core';
+import React from 'react';
+import { WARNA } from '../fun/WARNA';
+
+export default function LayoutDrawer({ opened, onClose, title, children }: { children: React.ReactNode, opened: boolean, onClose: () => void, title: React.ReactNode }) {
+  return (
+    <Box>
+      <Drawer opened={opened} title={<Text c={WARNA.biruTua} fw={'bold'}>{title}</Text>} onClose={onClose} position={"bottom"} size={"35%"}
+        styles={{
+          content: {
+            backgroundColor: "white",
+            borderRadius: "20px 20px 0px 0px",
+          },
+        }}
+      >
+        {children}
+      </Drawer>
+    </Box>
+  );
+}
diff --git a/src/module/_global/layout/layout_navbar_home.tsx b/src/module/_global/layout/layout_navbar_home.tsx
index 66d22c5..fa35cd1 100644
--- a/src/module/_global/layout/layout_navbar_home.tsx
+++ b/src/module/_global/layout/layout_navbar_home.tsx
@@ -4,16 +4,15 @@ import { WARNA } from '../fun/WARNA';
 
 export const LayoutNavbarHome = ({ children }: { children: React.ReactNode }) => {
   return (
-    <>
-      <Box pt={25} pl={20} pr={20} m={0} pb={25} bg={WARNA.biruTua}
+      <Box pt={25} pl={20} pr={20} m={0} pos={'sticky'} top={0} pb={25} bg={WARNA.biruTua}
         style={{
           borderBottomLeftRadius: 20,
           borderBottomRightRadius: 20,
+          zIndex: 100
         }}
       >
         {children}
       </Box>
-    </>
   );
 }
 export default LayoutNavbarHome
\ No newline at end of file
diff --git a/src/module/_global/val/idDrawer.ts b/src/module/_global/val/idDrawer.ts
new file mode 100644
index 0000000..eee0f26
--- /dev/null
+++ b/src/module/_global/val/idDrawer.ts
@@ -0,0 +1,5 @@
+'use client'
+
+import { atom } from "jotai"
+
+export const isDrawer = atom(false)
diff --git a/src/module/group/components/list_group.tsx b/src/module/group/components/list_group.tsx
new file mode 100644
index 0000000..a91983c
--- /dev/null
+++ b/src/module/group/components/list_group.tsx
@@ -0,0 +1,80 @@
+import { WARNA } from '@/module/_global';
+import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import React from 'react';
+import { HiOutlineOfficeBuilding } from 'react-icons/hi';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+
+const dataGroup = [
+  {
+    id: 1,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 2,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 3,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 4,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 5,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 6,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 7,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 8,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+]
+
+export default function ListGroup() {
+  return (
+    <Box p={20}>
+      <TextInput
+        styles={{
+          input: {
+            color: WARNA.biruTua,
+            borderRadius: WARNA.biruTua,
+            borderColor: WARNA.biruTua,
+          },
+        }}
+        size="md"
+        radius={30}
+        leftSection={<HiMagnifyingGlass size={20} />}
+        placeholder="Pencarian"
+      />
+      {dataGroup.map((v, i) => {
+        return (
+          <Box pt={20} key={i}>
+            <Group align='center' style={{
+              border: `1px solid ${"#DCEED8"}`,
+              padding: 10,
+              borderRadius: 10
+            }}>
+              <Box>
+                <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
+                  <HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} />
+                </ActionIcon>
+              </Box>
+              <Box>
+                <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+              </Box>
+            </Group>
+          </Box>
+        )
+      })}
+    </Box>
+  );
+}
diff --git a/src/module/group/components/ui/drawer_group.tsx b/src/module/group/components/ui/drawer_group.tsx
new file mode 100644
index 0000000..02c708c
--- /dev/null
+++ b/src/module/group/components/ui/drawer_group.tsx
@@ -0,0 +1,62 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useAtom } from 'jotai';
+import React, { useState } from 'react';
+import { IoAddCircle } from "react-icons/io5";
+
+export default function DrawerGroup() {
+  const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+  const [openDrawer, setOpenDrawer] = useAtom(isDrawer)
+
+  function onCLose() {
+    setOpenDrawerGroup(false)
+    setOpenDrawer(false)
+  }
+  return (
+    <Box>
+      <Stack pt={10}>
+        <SimpleGrid
+          cols={{ base: 3, sm: 3, lg: 3 }}
+          onClick={() => setOpenDrawerGroup(true)}
+        >
+          <Flex justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <IoAddCircle size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua}>Tambah Group</Text>
+            </Box>
+          </Flex>
+        </SimpleGrid>
+      </Stack>
+      <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'TAMBAH GRUP'}>
+        <Box pt={10}>
+          <TextInput
+            styles={{
+              input: {
+                color: WARNA.biruTua,
+                borderRadius: WARNA.biruTua,
+                borderColor: WARNA.biruTua,
+              },
+            }}
+            size="lg"
+            radius={10}
+            placeholder="Tambah Grup"
+          />
+          <Box mt={'xl'}>
+            <Button
+              c={"white"}
+              bg={WARNA.biruTua}
+              size="lg"
+              radius={30}
+              fullWidth
+              onClick={onCLose}
+            >
+              MASUK
+            </Button>
+          </Box>
+          </Box>
+      </LayoutDrawer>
+    </Box>
+  );
+}
diff --git a/src/module/group/components/ui/navbar_group.tsx b/src/module/group/components/ui/navbar_group.tsx
new file mode 100644
index 0000000..06f28f9
--- /dev/null
+++ b/src/module/group/components/ui/navbar_group.tsx
@@ -0,0 +1,38 @@
+"use client"
+import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Drawer, Grid, Group, Text } from '@mantine/core';
+import { useAtom } from 'jotai';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { HiMenu } from "react-icons/hi";
+import DrawerGroup from './drawer_group';
+
+export default function NavbarGroup() {
+  const [openDrawer, setOpenDrawer] = useAtom(isDrawer)
+  const router = useRouter()
+  return (
+    <>
+      <LayoutNavbarHome>
+        <Grid justify='center' align='center'>
+          <Grid.Col span="auto">
+            <LayoutIconBack back='/home' />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Text ta={'center'} fw={'bold'} c={'white'}>GROUP</Text>
+          </Grid.Col>
+          <Grid.Col span="auto">
+            <Group justify='flex-end'>
+              <ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                <HiMenu size={20} color='white' />
+              </ActionIcon>
+            </Group>
+          </Grid.Col>
+        </Grid>
+      </LayoutNavbarHome>
+      <LayoutDrawer opened={openDrawer} title={'MENU'} onClose={() => setOpenDrawer(false)}>
+        <DrawerGroup />
+      </LayoutDrawer>
+    </>
+  );
+}
+
diff --git a/src/module/group/index.ts b/src/module/group/index.ts
index e69de29..0fac4e6 100644
--- a/src/module/group/index.ts
+++ b/src/module/group/index.ts
@@ -0,0 +1,3 @@
+import ViewGroup from "./view/view_group";
+
+export {ViewGroup}
\ No newline at end of file
diff --git a/src/module/group/view/view_group.tsx b/src/module/group/view/view_group.tsx
new file mode 100644
index 0000000..718ffac
--- /dev/null
+++ b/src/module/group/view/view_group.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import NavbarGroup from '../components/ui/navbar_group';
+import { Box } from '@mantine/core';
+import ListGroup from '../components/list_group';
+
+export default function ViewGroup() {
+  return (
+    <Box>
+      <NavbarGroup />
+      <ListGroup />
+    </Box>
+  );
+}
+
diff --git a/src/module/notification/components/list_notification.tsx b/src/module/notification/components/list_notification.tsx
index f62834f..fec0182 100644
--- a/src/module/notification/components/list_notification.tsx
+++ b/src/module/notification/components/list_notification.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { WARNA } from '@/module/_global';
-import { ActionIcon, Box, Center, Grid, Group, ScrollArea, Text } from '@mantine/core';
+import { ActionIcon, Box, Center, Grid, Group, Text } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import React from 'react';
 import { HiUser } from 'react-icons/hi2';
diff --git a/src/module/notification/components/ui/navbar_notification.tsx b/src/module/notification/components/ui/navbar_notification.tsx
index 55e6a4b..04dde38 100644
--- a/src/module/notification/components/ui/navbar_notification.tsx
+++ b/src/module/notification/components/ui/navbar_notification.tsx
@@ -7,7 +7,6 @@ import React from 'react';
 export default function NavbarNotification() {
   const router = useRouter()
   return (
-    <Box>
       <LayoutNavbarHome>
         <Grid justify='center' align='center'>
           <Grid.Col span="auto">
@@ -19,7 +18,6 @@ export default function NavbarNotification() {
           <Grid.Col span="auto"></Grid.Col>
         </Grid>
       </LayoutNavbarHome>
-    </Box>
   );
 }
 
diff --git a/src/module/notification/view/view_notification.tsx b/src/module/notification/view/view_notification.tsx
index 11b4d27..8716ba6 100644
--- a/src/module/notification/view/view_notification.tsx
+++ b/src/module/notification/view/view_notification.tsx
@@ -1,5 +1,5 @@
 import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global'
-import { Box, Grid, ScrollArea, Text } from '@mantine/core'
+import { Box, Grid, Text } from '@mantine/core'
 import React from 'react'
 import NavbarNotification from '../components/ui/navbar_notification'
 import ListNotification from '../components/list_notification'
@@ -8,11 +8,9 @@ export default function ViewNotification() {
     return (
         <Box>
             <NavbarNotification />
-            <ScrollArea h={'87vh'}>
-                <Box p={20}>
-                    <ListNotification />
-                </Box>
-            </ScrollArea>
+            <Box p={20}>
+                <ListNotification />
+            </Box>
         </Box>
     )
 }