85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
"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>
|
|
</>
|
|
);
|
|
}
|