upd: member

Deskripsi:
- list member
- routing
- update link kategori

No Issues

src/app/(application)/member/page.tsx

@@ -0,0 +1,9 @@
+import { ViewListMember } from "@/module/user/member";
+
+function Page() {
+   return (
+      <ViewListMember />
+   )
+}
+
+export default Page;

src/module/home/view/view_detail_feature.tsx

@@ -56,7 +56,7 @@ export default function ViewDetailFeature() {
                 <Text fz={15} c={WARNA.biruTua}>Proyek</Text>
               </Center>
             </Box>
-            <Box>
+            <Box onClick={() => router.push('/announcement')}>
               <Center>
                 <ActionIcon variant="gradient"
                   size={68}
@@ -70,7 +70,7 @@ export default function ViewDetailFeature() {
                 <Text fz={15} c={WARNA.biruTua}>Pengumuman</Text>
               </Center>
             </Box>
-            <Box>
+            <Box onClick={() => router.push('/member')}>
               <Center>
                 <ActionIcon variant="gradient"
                   size={68}

src/module/user/member/component/list_member.tsx

@@ -0,0 +1,91 @@
+'use client'
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { ActionIcon, Anchor, Box, Group, Text, TextInput } from '@mantine/core';
+import React from 'react';
+import { HiMagnifyingGlass, HiMiniUser } from 'react-icons/hi2';
+import { useRouter } from 'next/navigation';
+
+const dataMember = [
+   {
+      id: 1,
+      name: 'Ali akbar',
+      desc: 'Perbekel'
+   },
+   {
+      id: 2,
+      name: 'Fibra Marcell',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 3,
+      name: 'Burhan',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 4,
+      name: 'Chandra',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 5,
+      name: 'Ayu',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 6,
+      name: 'Heriawan',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 7,
+      name: 'Jinan',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 8,
+      name: 'Rizal',
+      desc: 'Kasi Kesejahteraan'
+   },
+]
+
+export default function ListMember() {
+   const router = useRouter()
+   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"
+         />
+         {dataMember.map((v, i) => {
+            return (
+               <Box pt={20} key={i} onClick={() => {
+                  router.push(`/member/${v.id}`)
+               }}>
+                  <Group align='center' style={{
+                     borderBottom: `1px solid #D9D9D9`,
+                     padding: 10,
+                  }} >
+                     <Box>
+                        <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
+                           <HiMiniUser color={'white'} size={25} />
+                        </ActionIcon>
+                     </Box>
+                     <Box>
+                        <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+                     </Box>
+                  </Group>
+               </Box>
+            )
+         })}
+      </Box>
+   );
+}

src/module/user/member/component/ui/drawer_list_member.tsx

@@ -0,0 +1,48 @@
+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 { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { IoAddCircle } from "react-icons/io5";
+import { RiFilter2Line } from 'react-icons/ri';
+
+export default function DrawerListMember() {
+   const openDrawer = useHookstate(isDrawer)
+   const router = useRouter()
+
+   function onCLose() {
+      openDrawer.set(false)
+   }
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex justify={'center'} align={'center'} direction={'column'}
+                  onClick={() => {
+                     router.push('/member/create')
+                     onCLose()
+                  }}
+               >
+                  <Box>
+                     <IoAddCircle size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Tambah Anggota</Text>
+                  </Box>
+               </Flex>
+
+               <Flex justify={'center'} align={'center'} direction={'column'} >
+                  <Box>
+                     <RiFilter2Line size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Filter</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+      </Box>
+   );
+}

src/module/user/member/component/ui/navbar_list_member.tsx

@@ -0,0 +1,34 @@
+'use client'
+import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Box, Grid, Group, Text } from "@mantine/core";
+import { HiMenu } from "react-icons/hi";
+import DrawerListMember from "./drawer_list_member";
+
+export default function NavbarListMember() {
+   const openDrawer = useHookstate(isDrawer)
+   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'}>ANGGOTA</Text>
+               </Grid.Col>
+               <Grid.Col span="auto">
+                  <Group justify='flex-end'>
+                     <ActionIcon onClick={() => openDrawer.set(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.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
+            <DrawerListMember />
+         </LayoutDrawer>
+      </>
+   )
+}

src/module/user/member/index.ts

@@ -0,0 +1,3 @@
+import ViewListMember from "./view/view_list_member";
+
+export { ViewListMember }

src/module/user/member/view/view_list_member.tsx

@@ -0,0 +1,12 @@
+import { Box } from "@mantine/core";
+import NavbarListMember from "../component/ui/navbar_list_member";
+import ListMember from "../component/list_member";
+
+export default function ViewListMember() {
+   return (
+      <Box>
+         <NavbarListMember />
+         <ListMember />
+      </Box>
+   )
+}