wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #141 from bipproduction/lukman/22-agustus-2024

Browse Source 
style : update skeleton
This commit is contained in:
Amalia
2024-08-22 17:44:25 +08:00
committed by GitHub
parent f1c09f15a6 4c63fcbf9a
commit 6fef9ae028
11 changed files with 348 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/module/_global/components/skeleton_detail_profile.tsx Normal file
View File

@@ -0,0 +1,86 @@
import { ActionIcon, Box, Group, Skeleton } from '@mantine/core';
import React from 'react';
export default function SkeletonDetailProfile() {
return (
<Box p={20}>
<Group justify="space-between" grow py={5}>
<Group>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={28}
radius={100}
aria-label="icon"
>
<Skeleton height={20} width={40} />
</ActionIcon>
<Box>
<Skeleton height={18} width={80} />
</Box>
</Group>
<Box>
<Skeleton height={18} width={"100%"} />
</Box>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={28}
radius={100}
aria-label="icon"
>
<Skeleton height={20} width={40} />
</ActionIcon>
<Box>
<Skeleton height={18} width={80} />
</Box>
</Group>
<Box>
<Skeleton height={18} width={"100%"} />
</Box>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={28}
radius={100}
aria-label="icon"
>
<Skeleton height={20} width={40} />
</ActionIcon>
<Box>
<Skeleton height={18} width={80} />
</Box>
</Group>
<Box>
<Skeleton height={18} width={"100%"} />
</Box>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={28}
radius={100}
aria-label="icon"
>
<Skeleton height={20} width={40} />
</ActionIcon>
<Box>
<Skeleton height={18} width={80} />
</Box>
</Group>
<Box>
<Skeleton height={18} width={"100%"} />
</Box>
</Group>
</Box>
);
}

2
src/module/_global/index.ts
View File

@@ -2,6 +2,7 @@ import prisma from "./bin/prisma";
import { pwd_key_config } from "./bin/val_global"; import { pwd_key_config } from "./bin/val_global";
import SkeletonDetailDiscussionComment from "./components/skeleton_detail_discussion_comment"; import SkeletonDetailDiscussionComment from "./components/skeleton_detail_discussion_comment";
import SkeletonDetailDiscussionMember from "./components/skeleton_detail_discussion_member"; import SkeletonDetailDiscussionMember from "./components/skeleton_detail_discussion_member";
import SkeletonDetailProfile from "./components/skeleton_detail_profile";
import SkeletonSingle from "./components/skeleton_single"; import SkeletonSingle from "./components/skeleton_single";
import { funUploadFile } from "./fun/upload-file"; import { funUploadFile } from "./fun/upload-file";
import { WARNA } from "./fun/WARNA"; import { WARNA } from "./fun/WARNA";
@@ -27,3 +28,4 @@ export { SkeletonSingle }
export { SkeletonDetailDiscussionComment } export { SkeletonDetailDiscussionComment }
export { SkeletonDetailDiscussionMember } export { SkeletonDetailDiscussionMember }
export { funUploadFile } export { funUploadFile }
export { SkeletonDetailProfile }

87
src/module/announcement/ui/detail_announcement.tsx
View File

@@ -1,5 +1,5 @@
"use client" "use client"
import { Box, Flex, Grid, Group, List, Skeleton, Spoiler, Stack, Text } from "@mantine/core"; import { ActionIcon, Box, Flex, Grid, Group, List, Skeleton, Spoiler, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react"; import { useState } from "react";
import { BsCardText } from "react-icons/bs"; import { BsCardText } from "react-icons/bs";
@@ -12,7 +12,7 @@ import toast from "react-hot-toast";
export default function DetailAnnouncement({ id }: { id: string }) { export default function DetailAnnouncement({ id }: { id: string }) {
const [isData, setIsData] = useState<IAnnouncement>() const [isData, setIsData] = useState<IAnnouncement>()
const [isMember, setIsMember] = useState<any>({}) const [isMember, setIsMember] = useState<any>({})
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(true)
async function fetchOneAnnouncement() { async function fetchOneAnnouncement() {
try { try {
@@ -41,36 +41,59 @@ export default function DetailAnnouncement({ id }: { id: string }) {
return ( return (
<Box py={30} px={20}> <Box py={30} px={20}>
<Box p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} > <Box p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
<Stack> {loading ?
<Group> <Stack>
<TfiAnnouncement size={25} /> <Group>
{ <ActionIcon
loading ? variant="light"
<Skeleton height={10} radius="md" m={0} width={200} /> bg={"#DCEED8"}
: <Text fw={'bold'}>{isData?.title}</Text> size={30}
} radius={100}
aria-label="icon"
</Group> >
<Grid gutter={'md'}> <Skeleton height={25} width={40} />
<Grid.Col span={1}> </ActionIcon>
<BsCardText size={25} /> <Box>
</Grid.Col> <Skeleton height={18} width={150} />
<Grid.Col span={11}> </Box>
{ </Group>
loading ? Array(3) <Grid gutter={'md'}>
.fill(null) <Grid.Col span={1}>
.map((_, i) => ( <ActionIcon
<Skeleton key={i} height={10} radius="md" mb={5} width={"100%"} /> variant="light"
)) bg={"#DCEED8"}
size={30}
: <Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit"> radius={100}
<Text>{isData?.desc}</Text> aria-label="icon"
</Spoiler> >
} <Skeleton height={25} width={40} />
</ActionIcon>
</Grid.Col> </Grid.Col>
</Grid> <Grid.Col span={11}>
</Stack> <Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Skeleton mt={5} ml={5} height={18} width={150} />
</Spoiler>
</Grid.Col>
</Grid>
</Stack>
:
<Stack>
<Group>
<TfiAnnouncement size={25} />
<Text fw={'bold'}>{isData?.title}</Text>
</Group>
<Grid gutter={'md'}>
<Grid.Col span={1}>
<BsCardText size={25} />
</Grid.Col>
<Grid.Col span={11}>
<Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text>{isData?.desc}</Text>
</Spoiler>
</Grid.Col>
</Grid>
</Stack>
}
</Box> </Box>
<Box my={15} p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} > <Box my={15} p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >

4
src/module/announcement/ui/list_announcement.tsx
View File

@@ -65,13 +65,13 @@ export default function ListAnnouncement() {
</Box> </Box>
)) ))
: (isData.length === 0) ? : (isData.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"} h={200}> <Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada pengumuman</Text> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada pengumuman</Text>
</Stack> </Stack>
: :
isData.map((v, i) => { isData.map((v, i) => {
return ( return (
<Box key={i} mt={15}> <Box key={i} mt={20}>
<Box > <Box >
<Grid> <Grid>
<Grid.Col span={2}> <Grid.Col span={2}>

27
src/module/division_new/ui/list_division.tsx
View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global'; import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Text, TextInput, Title } from '@mantine/core'; import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
import { useRouter, useSearchParams } from 'next/navigation'; import { useRouter, useSearchParams } from 'next/navigation';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { HiMenu } from 'react-icons/hi'; import { HiMenu } from 'react-icons/hi';
@@ -21,6 +21,8 @@ export default function ListDivision() {
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const searchParams = useSearchParams() const searchParams = useSearchParams()
const group = searchParams.get('group') const group = searchParams.get('group')
const [loading, setLoading] = useState(true)
const handleList = () => { const handleList = () => {
setIsList(!isList) setIsList(!isList)
@@ -29,6 +31,7 @@ export default function ListDivision() {
const fetchData = async (search: string) => { const fetchData = async (search: string) => {
try { try {
setData([]); setData([]);
setLoading(true);
const response = await funGetAllDivision('?search=' + search + '&group=' + group) const response = await funGetAllDivision('?search=' + search + '&group=' + group)
if (response.success) { if (response.success) {
@@ -37,10 +40,12 @@ export default function ListDivision() {
} else { } else {
toast.error(response.message); toast.error(response.message);
} }
setLoading(false);
} catch (error) { } catch (error) {
toast.error("Gagal mendapatkan divisi, coba lagi nanti"); toast.error("Gagal mendapatkan divisi, coba lagi nanti");
console.error(error); console.error(error);
} finally {
setLoading(false);
} }
}; };
@@ -90,14 +95,14 @@ export default function ListDivision() {
</Flex> </Flex>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Box pt={20}> <Box pt={20}>
<Box bg={WARNA.biruTua} p={10} style={{ borderRadius: 10 }}> <Box bg={WARNA.biruTua} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={'white'}>Total Divisi</Text> <Text fw={'bold'} c={'white'}>Total Divisi</Text>
<Flex justify={'center'} align={'center'} h={'100%'}> <Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={'white'}>{jumlah}</Text> <Text fz={40} fw={'bold'} c={'white'}>{jumlah}</Text>
</Flex> </Flex>
</Box>
</Box> </Box>
</Box>
{isList ? ( {isList ? (
<Box pt={20}> <Box pt={20}>
{data?.map((v: any, i: any) => { {data?.map((v: any, i: any) => {
@@ -129,7 +134,7 @@ export default function ListDivision() {
})} })}
</Box> </Box>
) : ( ) : (
<Box pt={20}> <Box pt={20}>
{data?.map((v: any, i: any) => { {data?.map((v: any, i: any) => {
return ( return (
<Box key={i} mb={20}> <Box key={i} mb={20}>
@@ -142,7 +147,7 @@ export default function ListDivision() {
</Box> </Box>
</Card.Section> </Card.Section>
<Box pt={10}> <Box pt={10}>
<Text>{v.desc}</Text> <Text lineClamp={2}>{v.desc}</Text>
<Group align='center' pt={10} justify='flex-end'> <Group align='center' pt={10} justify='flex-end'>
<Avatar.Group> <Avatar.Group>
<Avatar> <Avatar>

90
src/module/group/ui/list_group_active.tsx
View File

@@ -16,6 +16,7 @@ import { useShallowEffect } from "@mantine/hooks";
import { funGetAllGroup } from "../lib/api_group"; import { funGetAllGroup } from "../lib/api_group";
import { IDataGroup } from "../lib/type_group"; import { IDataGroup } from "../lib/type_group";
import { useSearchParams } from "next/navigation"; import { useSearchParams } from "next/navigation";
import _ from "lodash";
export default function ListGroupActive() { export default function ListGroupActive() {
@@ -80,47 +81,54 @@ export default function ListGroupActive() {
<SkeletonSingle /> <SkeletonSingle />
</Box> </Box>
)) ))
: isData.map((v, i) => { :
return ( _.isEmpty(isData)
<Box pt={20} key={i}> ?
<Group <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
align="center" <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada grup</Text>
style={{ </Box>
border: `1px solid ${"#DCEED8"}`, :
padding: 10, isData.map((v, i) => {
borderRadius: 10, return (
cursor: "pointer", <Box pt={20} key={i}>
}} <Group
onClick={() => { align="center"
setValChoose(v.name); style={{
setOpenDrawer(true); border: `1px solid ${"#DCEED8"}`,
setSelectId(v.id); padding: 10,
setActive(v.isActive); borderRadius: 10,
}} cursor: "pointer",
> }}
<Box> onClick={() => {
<ActionIcon setValChoose(v.name);
variant="light" setOpenDrawer(true);
bg={"#DCEED8"} setSelectId(v.id);
size={50} setActive(v.isActive);
radius={100} }}
aria-label="icon" >
> <Box>
<HiOutlineOfficeBuilding <ActionIcon
color={WARNA.biruTua} variant="light"
size={25} bg={"#DCEED8"}
/> size={50}
</ActionIcon> radius={100}
</Box> aria-label="icon"
<Box> >
<Text fw={"bold"} c={WARNA.biruTua}> <HiOutlineOfficeBuilding
{v.name} color={WARNA.biruTua}
</Text> size={25}
</Box> />
</Group> </ActionIcon>
</Box> </Box>
); <Box>
})} <Text fw={"bold"} c={WARNA.biruTua}>
{v.name}
</Text>
</Box>
</Group>
</Box>
);
})}
<LayoutDrawer <LayoutDrawer
opened={openDrawer} opened={openDrawer}

2
src/module/home/view/view_detail_feature.tsx
View File

@@ -73,7 +73,7 @@ export default function ViewDetailFeature() {
<Text fz={15} c={WARNA.biruTua}>Anggota</Text> <Text fz={15} c={WARNA.biruTua}>Anggota</Text>
</Center> </Center>
</Box> </Box>
<Box onClick={() => router.push('/position')}> <Box onClick={() => router.push('position?active=true')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={68}

87
src/module/position/ui/list_position_active.tsx
View File

@@ -28,7 +28,7 @@ export default function ListPositionActive() {
try { try {
setDataPosition([]); setDataPosition([]);
setLoading(true) setLoading(true)
const res = await funGetAllPosition('?active=' + status + '&group=' + group + '&search=' + searchQuery) const res = await funGetAllPosition('?active=' + status + '&group=' + group + '&search=' + searchQuery)
setDataPosition(res.data); setDataPosition(res.data);
setLoading(false); setLoading(false);
} catch (error) { } catch (error) {
@@ -64,46 +64,51 @@ export default function ListPositionActive() {
<SkeletonSingle /> <SkeletonSingle />
</Box> </Box>
)) : )) :
isDataPosition.map((v, i) => { _.isEmpty(isDataPosition) ?
return ( <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
<Box pt={20} key={i}> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada jabatan</Text>
<Group </Box>
align="center" :
style={{ isDataPosition.map((v, i) => {
border: `1px solid ${"#DCEED8"}`, return (
padding: 10, <Box pt={20} key={i}>
borderRadius: 10, <Group
}} align="center"
onClick={() => { style={{
setData(v.name); border: `1px solid ${"#DCEED8"}`,
setOpenDrawer(true); padding: 10,
setSelectId(v.id); borderRadius: 10,
setActive(v.isActive); }}
}} onClick={() => {
> setData(v.name);
<Box> setOpenDrawer(true);
<ActionIcon setSelectId(v.id);
variant="light" setActive(v.isActive);
bg={"#DCEED8"} }}
size={50} >
radius={100} <Box>
aria-label="icon" <ActionIcon
> variant="light"
<FaUserTie color={WARNA.biruTua} size={25} /> bg={"#DCEED8"}
</ActionIcon> size={50}
</Box> radius={100}
<Box> aria-label="icon"
<Text fw={"bold"} c={WARNA.biruTua}> >
{v.name} <FaUserTie color={WARNA.biruTua} size={25} />
</Text> </ActionIcon>
<Text fw={"lighter"} fz={12}> </Box>
{v.group} <Box>
</Text> <Text fw={"bold"} c={WARNA.biruTua}>
</Box> {v.name}
</Group> </Text>
</Box> <Text fw={"lighter"} fz={12}>
); {v.group}
}) </Text>
</Box>
</Group>
</Box>
);
})
} }
<LayoutDrawer <LayoutDrawer
opened={openDrawer} opened={openDrawer}

2
src/module/task/ui/add_member_detail_task.tsx
View File

@@ -120,8 +120,6 @@ export default function AddMemberDetailTask() {
title="Pilih Anggota" title="Pilih Anggota"
menu menu
/> />
<pre>{JSON.stringify(isData, null, 1)}</pre>
<pre>{JSON.stringify(isDataMember, null, 1)}</pre>
<Box p={20}> <Box p={20}>
{/* <TextInput {/* <TextInput
styles={{ styles={{

84
src/module/user/member/ui/navbar_detail_member.tsx
View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer } from "@/module/_global"; import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, SkeletonDetailProfile } from "@/module/_global";
import { Box, Group, ActionIcon, Stack, Text, Center, Avatar } from "@mantine/core"; import { Box, Group, ActionIcon, Stack, Text, Center, Avatar, Skeleton } from "@mantine/core";
import { HiMenu } from "react-icons/hi"; import { HiMenu } from "react-icons/hi";
import { HiUser } from "react-icons/hi2"; import { HiUser } from "react-icons/hi2";
import DrawerDetailMember from "./drawer_detail_member"; import DrawerDetailMember from "./drawer_detail_member";
@@ -21,6 +21,7 @@ export default function NavbarDetailMember({ id }: IMember) {
const [dataOne, setDataOne] = useState<IListMember>() const [dataOne, setDataOne] = useState<IListMember>()
const [selectId, setSelectId] = useState<string>(''); const [selectId, setSelectId] = useState<string>('');
const [active, setActive] = useState<boolean>(false) const [active, setActive] = useState<boolean>(false)
const [loading, setLoading] = useState(true)
useShallowEffect(() => { useShallowEffect(() => {
featchGetOne() featchGetOne()
@@ -29,6 +30,7 @@ export default function NavbarDetailMember({ id }: IMember) {
async function featchGetOne() { async function featchGetOne() {
try { try {
setLoading(true)
const respose = await funGetOneMember(id) const respose = await funGetOneMember(id)
if (respose.success) { if (respose.success) {
setDataOne(respose.data) setDataOne(respose.data)
@@ -37,9 +39,13 @@ export default function NavbarDetailMember({ id }: IMember) {
} else { } else {
toast.error(respose.message) toast.error(respose.message)
} }
setLoading(false)
} catch (error) { } catch (error) {
console.error(error) console.error(error)
toast.error("Gagal mendapatkan detail user, coba lagi nanti"); toast.error("Gagal mendapatkan detail user, coba lagi nanti");
} finally {
setLoading(false)
} }
} }
@@ -62,42 +68,56 @@ export default function NavbarDetailMember({ id }: IMember) {
<Center> <Center>
<Avatar src={'https://i.pravatar.cc/1000?img=25'} alt="it's me" size="xl" /> <Avatar src={'https://i.pravatar.cc/1000?img=25'} alt="it's me" size="xl" />
</Center> </Center>
<Text c={'white'} fw={'bold'} fz={25}>{dataOne?.name}</Text> {loading ?
<Text c={'white'} fw={'lighter'} fz={15}>{dataOne?.group} - {dataOne?.position}</Text> <>
<Skeleton height={25} mt={10} width={"40%"} />
<Skeleton height={15} mt={12} width={"30%"} />
</>
:
<>
<Text c={'white'} fw={'bold'} fz={25}>{dataOne?.name}</Text>
<Text c={'white'} fw={'lighter'} fz={15}>{dataOne?.group} - {dataOne?.position}</Text>
</>
}
</Stack> </Stack>
</LayoutNavbarHome> </LayoutNavbarHome>
<Box p={20}> {loading
<Group justify="space-between" grow py={5}> ?
<Group> <SkeletonDetailProfile />
<RiIdCardFill size={28} /> :
<Text fz={18}>NIK</Text> <Box p={20}>
<Group justify="space-between" grow py={5}>
<Group>
<RiIdCardFill size={28} />
<Text fz={18}>NIK</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.nik}</Text>
</Group> </Group>
<Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.nik}</Text> <Group justify="space-between" grow py={5}>
</Group> <Group>
<Group justify="space-between" grow py={5}> <FaSquarePhone size={28} />
<Group> <Text fz={18}>No Telepon</Text>
<FaSquarePhone size={28} /> </Group>
<Text fz={18}>No Telepon</Text> <Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.phone}</Text>
</Group> </Group>
<Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.phone}</Text> <Group justify="space-between" grow py={5}>
</Group> <Group>
<Group justify="space-between" grow py={5}> <MdEmail size={28} />
<Group> <Text fz={18}>Email</Text>
<MdEmail size={28} /> </Group>
<Text fz={18}>Email</Text> <Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.email}</Text>
</Group> </Group>
<Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.email}</Text> <Group justify="space-between" grow py={5}>
</Group> <Group>
<Group justify="space-between" grow py={5}> <IoMaleFemale size={28} />
<Group> <Text fz={18}>Gender</Text>
<IoMaleFemale size={28} /> </Group>
<Text fz={18}>Gender</Text> <Text fz={18} fw={'bold'} ta={"right"}>
{dataOne?.gender === 'M' ? 'Laki-laki' : dataOne?.gender === 'F' ? 'Perempuan' : ''}
</Text>
</Group> </Group>
<Text fz={18} fw={'bold'} ta={"right"}> </Box>
{dataOne?.gender === 'M' ? 'Laki-laki' : dataOne?.gender === 'F' ? 'Perempuan' : ''} }
</Text>
</Group>
</Box>
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}> <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<DrawerDetailMember id={selectId} status={active} onDeleted={() => setOpen(false)} /> <DrawerDetailMember id={selectId} status={active} onDeleted={() => setOpen(false)} />
</LayoutDrawer> </LayoutDrawer>

59
src/module/user/member/ui/tab_list_member.tsx
View File

@@ -1,5 +1,5 @@
import { WARNA } from "@/module/_global" import { SkeletonSingle, WARNA } from "@/module/_global"
import { Box, Group, ActionIcon, Text, TextInput } from "@mantine/core" import { Box, Group, ActionIcon, Text, TextInput } from "@mantine/core"
import { useShallowEffect } from "@mantine/hooks" import { useShallowEffect } from "@mantine/hooks"
import { useRouter, useSearchParams } from "next/navigation" import { useRouter, useSearchParams } from "next/navigation"
@@ -54,28 +54,43 @@ export default function TabListMember() {
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
my={10} my={10}
/> />
{dataMember.map((v, i) => { {loading
return ( ? Array(6)
<Box pt={20} key={i} onClick={() => { .fill(null)
router.push(`/member/${v.id}`) .map((_, i) => (
}}> <Box key={i}>
<Group align='center' style={{ <SkeletonSingle />
borderBottom: `1px solid #D9D9D9`, </Box>
padding: 10, ))
}} > :
<Box> dataMember.length == 0 ?
<ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon"> <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
<HiMiniUser color={'white'} size={25} /> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
</ActionIcon>
</Box>
<Box>
<Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
<Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
</Box>
</Group>
</Box> </Box>
) :
})} 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>
<Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
</Box>
</Group>
</Box>
)
})
}
</Box> </Box>
</> </>
) )