style : update style

src/module/user/member/ui/navbar_detail_member.tsx

@@ -117,7 +117,7 @@ export default function NavbarDetailMember({ id }: IMember) {
                      <Grid.Col span={5}>
                         <Group>
                            <FaSquarePhone size={25} />
-                           <Text fz={15}>No Telpon</Text>
+                           <Text fz={15}>No Telepon</Text>
                         </Group>
                      </Grid.Col>
                      <Grid.Col span={7}>

src/module/user/member/ui/tab_list_member.tsx

@@ -1,5 +1,5 @@
 import { currentScroll, globalRole, SkeletonSingle, TEMA } from "@/module/_global"
-import { Box, Text, TextInput, Divider, Avatar, Grid } from "@mantine/core"
+import { Box, Text, TextInput, Divider, Avatar, Grid, Group, ActionIcon, Skeleton } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
@@ -96,19 +96,42 @@ export default function TabListMember() {
                leftSection={<HiMagnifyingGlass size={20} />}
                placeholder="Pencarian"
                onChange={(e) => setSearchQuery(e.target.value)}
-               my={10}
+               my={20}
             />
+            {roleLogin.get() == 'supadmin' && <Text mt={10}>Filter by: {nameGroup}</Text>}
             {loading
                ? Array(6)
                   .fill(null)
                   .map((_, i) => (
-                     <Box key={i}>
-                        <SkeletonSingle />
+                     <Box key={i} mb={20}>
+                        <Group
+                           align="center"
+                           style={{
+                              border: `1px solid ${tema.get().bgTotalKegiatan}`,
+                              padding: 10,
+                              borderRadius: 10,
+                              cursor: "pointer",
+                           }}
+                        >
+                           <Box>
+                              <ActionIcon
+                                 variant="light"
+                                 bg={tema.get().bgTotalKegiatan}
+                                 size={50}
+                                 radius={100}
+                                 aria-label="icon"
+                              >
+                                 <Skeleton height={25} width={25} />
+                              </ActionIcon>
+                           </Box>
+                           <Box>
+                              <Skeleton height={20} width={100} />
+                           </Box>
+                        </Group>
                      </Box>
                   ))
                :
                <Box>
-                  {roleLogin.get() == 'supadmin' && <Text>Filter by: {nameGroup}</Text>}
                   {dataMember.length == 0 ?
                      <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
                         <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
@@ -116,7 +139,7 @@ export default function TabListMember() {
                      :
                      dataMember.map((v, i) => {
                         return (
-                           <Box key={i} pt={20}>
+                           <Box key={i}>
                               <Box onClick={() => {
                                  router.push(`/member/${v.id}`)
                               }}>