diff --git a/src/module/group/components/list_group.tsx b/src/module/group/components/list_group_active.tsx similarity index 78% rename from src/module/group/components/list_group.tsx rename to src/module/group/components/list_group_active.tsx index aaaf14a..7e72ae7 100644 --- a/src/module/group/components/list_group.tsx +++ b/src/module/group/components/list_group_active.tsx @@ -1,9 +1,11 @@ import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global'; import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core'; -import React from 'react'; +import React, { useState } from 'react'; import { HiOutlineOfficeBuilding } from 'react-icons/hi'; import { HiMagnifyingGlass } from 'react-icons/hi2'; import EditDrawerGroup from './ui/edit_drawer_group'; +import { useHookstate } from '@hookstate/core'; +import { useRouter } from 'next/navigation'; const dataGroup = [ { @@ -40,9 +42,11 @@ const dataGroup = [ }, ] -export default function ListGroup() { +export default function ListGroupActive() { + // const openDrawerEdit = useHookstate(isDrawer) + const [openDrawer, setOpenDrawer] = useState(false) return ( - + + }} onClick={() => setOpenDrawer(true)} > @@ -76,9 +80,9 @@ export default function ListGroup() { ) })} - {/* setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA"> + setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA"> - */} + ); } diff --git a/src/module/group/components/list_group_non_active.tsx b/src/module/group/components/list_group_non_active.tsx new file mode 100644 index 0000000..b79a4d2 --- /dev/null +++ b/src/module/group/components/list_group_non_active.tsx @@ -0,0 +1,85 @@ +import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global'; +import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core'; +import React, { useState } from 'react'; +import { HiOutlineOfficeBuilding } from 'react-icons/hi'; +import { HiMagnifyingGlass } from 'react-icons/hi2'; +import EditDrawerGroup from './ui/edit_drawer_group'; + +const dataGroup = [ + { + id: 1, + name: 'No Active Desa' + }, + { + id: 2, + name: 'No Active Desa' + }, + { + id: 3, + name: 'No Active Desa' + }, + { + id: 4, + name: 'No Active Desa' + }, + { + id: 5, + name: 'No Active Desa' + }, + { + id: 6, + name: 'No Active Desa' + }, + { + id: 7, + name: 'No Active Desa' + }, + { + id: 8, + name: 'No Active Desa' + }, +] + +export default function ListGroupNonActive() { + const [openDrawer, setOpenDrawer] = useState(false) + return ( + + } + placeholder="Pencarian" + /> + {dataGroup.map((v, i) => { + return ( + + setOpenDrawer(true)}> + + + + + + + {v.name} + + + + ) + })} + setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA"> + + + + ); +} diff --git a/src/module/group/components/tab_list_group.tsx b/src/module/group/components/tab_list_group.tsx new file mode 100644 index 0000000..3338d37 --- /dev/null +++ b/src/module/group/components/tab_list_group.tsx @@ -0,0 +1,38 @@ +'use client' +import { Box, Tabs, rem } from '@mantine/core'; +import { IoCloseCircleOutline } from "react-icons/io5" +import { IoMdCheckmarkCircleOutline } from "react-icons/io" +import ListGroupActive from './list_group_active'; +import ListGroupNonActive from './list_group_non_active'; + +export default function TabListGroup() { + const iconStyle = { width: rem(20), height: rem(20) }; + + return ( + + + + }> + Aktif + + }> + Tidak Aktif + + + + + + + + + + + + + ); +} + diff --git a/src/module/group/components/ui/edit_drawer_group.tsx b/src/module/group/components/ui/edit_drawer_group.tsx index 2af274f..489163a 100644 --- a/src/module/group/components/ui/edit_drawer_group.tsx +++ b/src/module/group/components/ui/edit_drawer_group.tsx @@ -1,33 +1,34 @@ 'use client' import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global'; +import { useHookstate } from '@hookstate/core'; import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core'; import React, { useState } from 'react'; -import { IoAddCircle } from "react-icons/io5"; +import { IoAddCircle, IoCloseCircleOutline } from "react-icons/io5"; export default function EditDrawerGroup() { - // const [openDrawerGroup, setOpenDrawerGroup] = useState(false) - // const [openDrawer, setOpenDrawer] = useAtom(isDrawer) + const [openDrawerGroup, setOpenDrawerGroup] = useState(false) + const openDrawerEdit = useHookstate(isDrawer) - // function onCLose() { - // setOpenDrawerGroup(false) - // setOpenDrawer(false) - // } + function onCLose() { + setOpenDrawerGroup(false) + openDrawerEdit.set(false) + } return ( - {/* + setOpenDrawerGroup(true)} + > - + Tidak Aktif - + setOpenDrawerGroup(true)}> @@ -64,7 +65,7 @@ export default function EditDrawerGroup() { - */} + ); } diff --git a/src/module/group/components/ui/navbar_group.tsx b/src/module/group/components/ui/navbar_group.tsx index c96edb8..2a4b379 100644 --- a/src/module/group/components/ui/navbar_group.tsx +++ b/src/module/group/components/ui/navbar_group.tsx @@ -8,7 +8,7 @@ import DrawerGroup from './drawer_group'; import { useHookstate } from '@hookstate/core'; export default function NavbarGroup() { - const openDrawer = useHookstate(isDrawer) + const openDrawerMenu = useHookstate(isDrawer) const router = useRouter() return ( <> @@ -22,14 +22,14 @@ export default function NavbarGroup() { - openDrawer.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> + openDrawerMenu.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> - openDrawer.set(false)}> + openDrawerMenu.set(false)}> diff --git a/src/module/group/view/view_group.tsx b/src/module/group/view/view_group.tsx index 718ffac..7546655 100644 --- a/src/module/group/view/view_group.tsx +++ b/src/module/group/view/view_group.tsx @@ -1,13 +1,14 @@ import React from 'react'; import NavbarGroup from '../components/ui/navbar_group'; import { Box } from '@mantine/core'; -import ListGroup from '../components/list_group'; +import ListGroupActive from '../components/list_group_active'; +import TabListGroup from '../components/tab_list_group'; export default function ViewGroup() { return ( - + ); }