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

feat : update skeleton

Browse Source
This commit is contained in:
lukman
2024-08-15 09:59:58 +08:00
parent de7ace8d49
commit d1c640570b
4 changed files with 149 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/module/discussion/ui/detail_discussion.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Text, TextInput } from "@mantine/core";
import { WARNA } from "@/module/_global";
import { SkeletonDetailDiscussionComment, SkeletonDetailDiscussionMember, SkeletonSingle, WARNA } from "@/module/_global";
import { GrChatOption } from "react-icons/gr";
import { LuSendHorizonal } from "react-icons/lu";
import NavbarDetailDiscussion from "@/module/discussion/ui/navbar_detail_discussion";
@@ -17,13 +17,18 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
const [isData, setData] = useState<IDetailDiscussion>()
const [isComent, setIsComent] = useState("")
const param = useParams<{ id: string, detail: string }>()
const [isLoad, setIsLoad] = useState(false)
const getData = async () => {
try {
setIsLoad(true)
const response = await funGetDiscussionById(id)
setData(response.data)
setIsLoad(false)
} catch (error) {
console.log(error)
} finally {
setIsLoad(false)
}
}
@@ -55,57 +60,79 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
<>
<NavbarDetailDiscussion id={id} status={Number(isData?.status)} idDivision={idDivision} />
<Box p={20}>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
<Group>
<Avatar src={'https://i.pravatar.cc/1000?img=5'} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{isData?.username}
</Text>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Group>
<Text c={"grey"} fz={13}>{isData?.createdAt}</Text>
</Flex>
<Box mt={10}>
<Text fw={"bold"}>{isData?.desc}</Text>
</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Group gap={5} align="center">
<GrChatOption size={18} />
<Text fz={13}>{isData?.totalComments} Komentar</Text>
</Group >
</Group>
<Box p={10}>
{isData?.DivisionDisscussionComment.map((v, i) => {
return (
{isLoad ?
Array(1)
.fill(null)
.map((_, i) => (
<Box key={i} p={10}>
<Flex
justify={"space-between"}
align={"center"}
>
<Group>
<Avatar alt="it's me" size="md" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"} fz={15}>
{v.username}
</Text>
</Box>
</Group>
<Text c={"grey"} fz={13}>{moment(v.createdAt).format("LL")}</Text>
</Flex>
<Box mt={10}>{v.comment}</Box>
<Box mt={20}>
<Divider size={"xs"} />
</Box>
<SkeletonDetailDiscussionMember/>
</Box>
);
})}
)) :
<Box>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
{isData?.username ?
<Group>
<Avatar src={'https://i.pravatar.cc/1000?img=5'} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{isData?.username}
</Text>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Group> : ""
}
<Text c={"grey"} fz={13}>{isData?.createdAt}</Text>
</Flex>
<Box mt={10}>
<Text fw={"bold"}>{isData?.desc}</Text>
</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
{isData?.totalComments ? <Group gap={5} align="center">
<GrChatOption size={18} />
<Text fz={13}>{isData?.totalComments} Komentar</Text>
</Group > : ""}
</Group>
</Box>
}
<Box p={10}>
{isLoad ?
Array(6)
.fill(0)
.map((_, i) => (
<Box key={i} p={10}>
<SkeletonDetailDiscussionComment />
</Box>
)) :
isData?.DivisionDisscussionComment.map((v, i) => {
return (
<Box key={i} p={10}>
<Flex
justify={"space-between"}
align={"center"}
>
<Group>
<Avatar alt="it's me" size="md" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"} fz={15}>
{v.username}
</Text>
</Box>
</Group>
<Text c={"grey"} fz={13}>{moment(v.createdAt).format("LL")}</Text>
</Flex>
<Box mt={10}>{v.comment}</Box>
<Box mt={20}>
<Divider size={"xs"} />
</Box>
</Box>
);
})
}
</Box>
<Box h={60} pos={"fixed"} bottom={0} w={{ base: "90%", md: "35.5%" }} style={{
zIndex: 999