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

style: update skelaton

Browse Source
This commit is contained in:
lukman
2024-08-23 14:12:01 +08:00
parent 6fef9ae028
commit f1121afee6
16 changed files with 756 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/module/discussion/ui/list_discussion.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { WARNA } from "@/module/_global";
import { Avatar, Badge, Box, Divider, Flex, Group, Text, TextInput } from "@mantine/core";
import { Avatar, Badge, Box, Divider, Flex, Group, Skeleton, Text, TextInput } from "@mantine/core";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import { GrChatOption } from "react-icons/gr";
@@ -13,13 +13,18 @@ export default function ListDiscussion({ id }: { id: string }) {
const [isData, setData] = useState<IDataDiscussion[]>([])
const [searchQuery, setSearchQuery] = useState('')
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const getData = async () => {
try {
setLoading(true)
const response = await funGetAllDiscussion('?division=' + id + '&search=' + searchQuery)
setData(response.data)
setLoading(false)
} catch (error) {
console.log(error)
} finally {
setLoading(false)
}
}
@@ -45,45 +50,83 @@ export default function ListDiscussion({ id }: { id: string }) {
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
{isData.map((v, i) => {
return (
<Box key={i} pl={10} pr={10}
onClick={() => {
router.push(`/division/${param.id}/discussion/${v.id}`)
}}
>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
<Group>
<Avatar alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.user_name}
</Text>
<Badge color={v.status === 1 ? "green" : "red"} size="sm">{v.status === 1 ? "BUKA" : "TUTUP"}</Badge>
{loading ?
Array(3)
.fill(null)
.map((_, i) => (
<Box key={i}>
<Box pl={10} pr={10}>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
<Group>
<Skeleton width={40} height={40} radius={"md"} />
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Skeleton width={"50%"} height={20} radius={"md"} />
</Box>
</Group>
<Skeleton width={"50%"} height={20} radius={"md"} />
</Flex>
<Box mt={10}>
<Skeleton width={"100%"} height={100} radius={"md"} />
</Box>
</Group>
<Text c={"grey"} fz={13}>{v.createdAt}</Text>
</Flex>
<Box mt={10}>{v.desc}</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Group gap={5} align="center">
<GrChatOption size={18} />
<Text fz={13}>Diskusikan</Text>
</Group >
<Group gap={5} align="center">
<Text fz={13}>{v.total_komentar} Komentar</Text>
</Group>
</Group>
<Box mt={20}>
<Divider size={"xs"} />
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Skeleton width={"30%"} height={20} radius={"md"} />
<Skeleton width={"30%"} height={20} radius={"md"} />
</Group>
<Box mt={20}>
<Skeleton width={"100%"} height={1} radius={"md"} />
</Box>
</Box>
</Box>
</Box>
);
})}
))
:
isData.map((v, i) => {
return (
<Box key={i} pl={10} pr={10}
onClick={() => {
router.push(`/division/${param.id}/discussion/${v.id}`)
}}
>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
<Group>
<Avatar alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.user_name}
</Text>
<Badge color={v.status === 1 ? "green" : "red"} size="sm">{v.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Group>
<Text c={"grey"} fz={13}>{v.createdAt}</Text>
</Flex>
<Box mt={10}>{v.desc}</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Group gap={5} align="center">
<GrChatOption size={18} />
<Text fz={13}>Diskusikan</Text>
</Group >
<Group gap={5} align="center">
<Text fz={13}>{v.total_komentar} Komentar</Text>
</Group>
</Group>
<Box mt={20}>
{isData.length <= 1 ? "" :
<Divider size={"xs"} />
}
</Box>
</Box>
);
})
}
</Box>
)
}