Kabar Donasi

# feat
- Create kabar
- Delete kabar
- List kabar
## No issue

src/app_modules/donasi/detail/detail_main/kabar/index.tsx

@@ -1,9 +1,12 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import ComponentDonasi_ListKabar from "@/app_modules/donasi/component/detail_main/list_kabar";
+import { MODEL_DONASI_KABAR } from "@/app_modules/donasi/model/interface";
 import {
   ActionIcon,
   Avatar,
+  Box,
   Group,
   Paper,
   SimpleGrid,
@@ -15,9 +18,15 @@ import {
 import { IconCircleChevronRight } from "@tabler/icons-react";
 import moment from "moment";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 
-export default function KabarDonasi() {
-    const router = useRouter()
+export default function KabarDonasi({
+  listKabar,
+}: {
+  listKabar: MODEL_DONASI_KABAR[];
+}) {
+  const router = useRouter();
+  const [kabar, setKabar] = useState(listKabar);
   return (
     <>
       <SimpleGrid
@@ -29,33 +38,11 @@ export default function KabarDonasi() {
           { maxWidth: "36rem", cols: 1, spacing: "sm" },
         ]}
       >
-        {Array(4)
-          .fill(0)
-          .map((e, i) => (
-            <Paper key={i} bg={"gray.1"} p={"md"}>
-              <Stack>
-                <Group>
-                  <Avatar variant="filled" radius={"xl"} />
-                  <Stack spacing={0}>
-                    <Text>Username</Text>
-                    <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
-                  </Stack>
-                </Group>
-                <Stack>
-                  <Title order={5}>Judul Kabar</Title>
-                  <Stack spacing={0}>
-                    <Text lineClamp={2}>
-                      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-                      Aliquam nostrum vitae eum facilis similique minus
-                      exercitationem assumenda, quidem dolores illum ducimus
-                      fuga rem molestias? Numquam id praesentium dolor qui amet.
-                    </Text>
-                    <Text c={"blue"} onClick={() => router.push(RouterDonasi.detail_kabar)}>Buka Kabar</Text>
-                  </Stack>
-                </Stack>
-              </Stack>
-            </Paper>
-          ))}
+        {kabar.map((e, i) => (
+         <Box key={i}>
+          <ComponentDonasi_ListKabar kabar={e} />
+         </Box>
+        ))}
       </SimpleGrid>
     </>
   );