#style:

Deskripsi :
- Perbaikan UI Donasi
## NO Issue

src/app_modules/donasi/component/card_view/box_publish.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  AspectRatio,
+  Box,
+  Grid,
+  Image,
+  Paper,
+  Progress,
+  Stack,
+  Text
+} from "@mantine/core";
+import { useRouter } from "next/navigation";
+import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
+import TampilanRupiahDonasi from "../tampilan_rupiah";
+
+export default function ComponentDonasi_CardPublish({
+  data,
+  path,
+}: {
+  data: any;
+  path: string;
+}) {
+
+  const router = useRouter();
+
+  return (
+    <>
+      <Box
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+          marginBottom: "15px",
+        }}
+        onClick={() => {
+          router.push(path + `${data.id}`);
+        }}
+      >
+        <Stack>
+          <Grid>
+            <Grid.Col span={7}>
+              <AspectRatio ratio={16 / 9}>
+                <Paper radius={"md"}>
+                  <Image
+                    alt="Foto"
+                    src={RouterDonasi.api_gambar + `${data.imagesId}`}
+                    radius={"xs"}
+                  />
+                </Paper>
+              </AspectRatio>
+            </Grid.Col>
+            <Grid.Col span={5}>
+              <Stack spacing={"xs"}>
+                <Stack spacing={0}>
+                  <Text fz={"sm"} fw={"bold"} lineClamp={2}>
+                    {data.title}
+                  </Text>
+                  <ComponentDonasi_TampilanHitungMundur
+                    durasi={data?.DonasiMaster_Durasi?.name}
+                    publishTime={data.publishTime}
+                    textSize={10}
+                  />
+                </Stack>
+                <Progress value={+data.progres} color="yellow" />
+                <Stack spacing={0}>
+                  <Text fz={"sm"}>Terkumpul</Text>
+                  <Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
+                    <TampilanRupiahDonasi nominal={+data.terkumpul} />
+                  </Text>
+                </Stack>
+              </Stack>
+            </Grid.Col>
+          </Grid>
+          {/* {width > 575 ? "" : <Divider />} */}
+        </Stack>
+      </Box>
+    </>
+  );
+}