78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
import { Link, type LinkProps } from "@remix-run/react";
|
|
import { User2 } from "lucide-react";
|
|
import { forwardRef } from "react";
|
|
import type { Proyek } from "~/types/api/proyek";
|
|
import { StatusProject } from "~/types/constants/status-project";
|
|
import { Badge } from "../ui/badge";
|
|
import BorderedCard from "./bordered-card";
|
|
import toRupiah from "~/utils/to-rupiah";
|
|
import { Button } from "../ui/button";
|
|
import toPercentage from "~/utils/to-presentase";
|
|
|
|
export interface ProjectUseTokenCardProps extends LinkProps {
|
|
data: Proyek | undefined;
|
|
}
|
|
|
|
const ProjectUseTokenCard = forwardRef<HTMLAnchorElement, ProjectUseTokenCardProps>(
|
|
({ data, to, ...props }, ref) => {
|
|
return (
|
|
<Link
|
|
ref={ref}
|
|
to={to}
|
|
className="w-full space-y-6 rounded-md bg-white p-8 shadow-md"
|
|
{...props}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="rounded-full bg-primary p-1.5">
|
|
<User2 className="text-white" />
|
|
</div>
|
|
{data && (
|
|
<Badge
|
|
className={`text-white uppercase ${
|
|
data.status === StatusProject.APPROVAL ||
|
|
data.status === StatusProject.PROSES_VERIFIKASI
|
|
? "bg-green-500"
|
|
: data.status === StatusProject.BERJALAN ||
|
|
data.status === StatusProject.PENDANAAN_DIBUKA ||
|
|
data.status === StatusProject.TTD_KONTRAK ||
|
|
data.status === StatusProject.SELESAI
|
|
? "bg-blue-500"
|
|
: "bg-red-500"
|
|
}`}
|
|
>
|
|
{data.status}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className="space-y-1">
|
|
{data && (
|
|
<>
|
|
<h4 className="font-semibold text-lg uppercase">{data.judul}</h4>
|
|
<p className="font-medium text-gray-500">{data.user?.nama}</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<BorderedCard title="Jumlah Token Dibeli" value={data?.token_count ?? "0"} />
|
|
<div className="rounded-md border border-gray-400 border-dashed p-3">
|
|
<h3 className="font-bold text-blue-500">{toRupiah(data?.total_nominal ?? "0")}</h3>
|
|
<div className="flex items-center justify-between">
|
|
<h4 className="font-medium text-gray-500">Return :</h4>
|
|
<h4 className="font-medium text-blue-500">
|
|
{data?.persentase ? toPercentage(data.persentase) : "0.00"}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Button className="w-full items-center">Detail</Button>
|
|
</div>
|
|
</Link>
|
|
);
|
|
},
|
|
);
|
|
|
|
ProjectUseTokenCard.displayName = "ProjectUseTokenCard";
|
|
|
|
export default ProjectUseTokenCard;
|