diff --git a/package.json b/package.json index fd45ec7..d30b7bf 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "dayjs": "^1.11.11", "embla-carousel-autoplay": "^7.1.0", "embla-carousel-react": "^7.1.0", + "jotai": "^2.8.4", "lodash": "^4.17.21", "next": "14.2.4", "react": "^18", diff --git a/src/app/(application)/group/page.tsx b/src/app/(application)/group/page.tsx index 69da2f2..ec46c75 100644 --- a/src/app/(application)/group/page.tsx +++ b/src/app/(application)/group/page.tsx @@ -1,10 +1,9 @@ +import { ViewGroup } from '@/module/group'; import React from 'react'; function Page() { return ( -
- Page -
+ ); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ad01478..5b9582c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -32,8 +32,10 @@ export default function RootLayout({ - - + + {children} 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 ( + + {title}} onClose={onClose} position={"bottom"} size={"35%"} + styles={{ + content: { + backgroundColor: "white", + borderRadius: "20px 20px 0px 0px", + }, + }} + > + {children} + + + ); +} 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 ( - <> - {children} - ); } 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 ( + + } + placeholder="Pencarian" + /> + {dataGroup.map((v, i) => { + return ( + + + + + + + + + {v.name} + + + + ) + })} + + ); +} 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 ( + + + setOpenDrawerGroup(true)} + > + + + + + + Tambah Group + + + + + setOpenDrawerGroup(false)} title={'TAMBAH GRUP'}> + + + + + + + + + ); +} 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 ( + <> + + + + + + + GROUP + + + + setOpenDrawer(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> + + + + + + + setOpenDrawer(false)}> + + + + ); +} + 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 ( + + + + + ); +} + 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 ( - @@ -19,7 +18,6 @@ export default function NavbarNotification() { - ); } 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 ( - - - - - + + + ) } diff --git a/yarn.lock b/yarn.lock index 3040952..f86da8c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2265,6 +2265,11 @@ jiti@^1.21.0: resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz" integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w== +jotai@^2.8.4: + version "2.8.4" + resolved "https://registry.yarnpkg.com/jotai/-/jotai-2.8.4.tgz#ea82b013d640016100e360d19d565862816c96d0" + integrity sha512-f6jwjhBJcDtpeauT2xH01gnqadKEySwwt1qNBLvAXcnojkmb76EdqRt05Ym8IamfHGAQz2qMKAwftnyjeSoHAA== + "js-tokens@^3.0.0 || ^4.0.0": version "4.0.0" resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"