Files
hipmi/src/app_modules/investasi/portofolio/publish.tsx
Bagasbanuna02 2ab3a8abb1 # style:
- UI Investasi
- UI Donasi
## No issue
2024-08-01 16:48:54 +08:00

113 lines
3.5 KiB
TypeScript

import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
import {
AspectRatio,
Box,
Divider,
Grid,
Group,
Image,
Paper,
Stack,
Text,
} from "@mantine/core";
import { IconChecklist, IconCircleCheck } from "@tabler/icons-react";
import _ from "lodash";
import moment from "moment";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentInvestasi_IsEmptyData from "../component/is_empty_data";
import { MODEL_Investasi } from "../model/model_investasi";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
export default function Publish({ data }: { data: MODEL_Investasi[] }) {
const router = useRouter();
const [sisaWaktu, setSisaWaktu] = useState();
if (_.isEmpty(data)) return <ComponentGlobal_IsEmptyData />;
return (
<>
{data.map((e) => (
<Paper
key={e.id}
onClick={() =>
router.push(RouterInvestasi.detail_publish + `${e.id}`)
}
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
color: "white",
marginBottom: "15px",
}}
>
<Grid>
<Grid.Col span={8}>
<Text fw={"bold"}> {_.capitalize(e.title)}</Text>
<Stack spacing={0}>
<Text fz={10}>Target Dana:</Text>
<Text>
Rp.{" "}
{new Intl.NumberFormat("id-ID", {
maximumSignificantDigits: 10,
}).format(+e.targetDana)}
</Text>
</Stack>
</Grid.Col>
<Grid.Col span={4}>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image
alt=""
src={RouterInvestasi.api_gambar + `${e.imagesId}`}
/>
</Paper>
</AspectRatio>
</Grid.Col>
</Grid>
<Divider my={"xs"} />
<Group position="center">
{Number(e.MasterPencarianInvestor.name) -
moment(new Date()).diff(new Date(e.updatedAt), "days") <=
0 ? (
<Group position="right">
<IconCircleCheck color="green" />
<Text c={"green"}>Selesai</Text>
</Group>
) : (
<Group position="center">
{/* <Badge color="green" variant="dot">
Publish
</Badge> */}
<Group>
{Number(e.MasterPencarianInvestor.name) -
moment(new Date()).diff(new Date(e.countDown), "days") <=
0 ? (
<Group>
<IconChecklist />
<Text>Selesai</Text>
</Group>
) : (
<Box>
Sisa Waktu : {}
{Number(e.MasterPencarianInvestor.name) -
moment(new Date()).diff(
new Date(e.countDown),
"days"
)}{" "}
hari
</Box>
)}
</Group>
</Group>
)}
</Group>
</Paper>
))}
</>
);
}