import { useRouter } from "next/router"; import Link from "next/link"; // icons import { ExclamationTriangleIcon } from "@heroicons/react/20/solid"; // helpers import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; import { truncateText } from "helpers/string.helper"; // types import { IIssueLite } from "types"; import { Loader } from "components/ui"; import { LayerDiagonalIcon } from "components/icons"; type Props = { issues: IIssueLite[] | undefined; type: "overdue" | "upcoming"; }; export const IssuesList: React.FC = ({ issues, type }) => { const router = useRouter(); const { workspaceSlug } = router.query; const getDateDifference = (date: Date) => { const today = new Date(); let diffTime = 0; if (type === "overdue") diffTime = Math.abs(today.valueOf() - date.valueOf()); else diffTime = Math.abs(date.valueOf() - today.valueOf()); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); return diffDays; }; return (

{type} Issues

{issues ? (

{type}

Issue

{type === "overdue" ? "Due" : "Start"} Date

{issues.length > 0 ? ( issues.map((issue) => { const date = type === "overdue" ? issue.target_date : issue.start_date; const dateDifference = getDateDifference(new Date(date as string)); return (
6 ? "text-red-500" : "text-yellow-400" : "" }`} > {type === "overdue" && ( )} {dateDifference} {dateDifference > 1 ? "days" : "day"}
{truncateText(issue.name, 30)}
{renderShortDateWithYearFormat(new Date(date?.toString() ?? ""))}
); }) ) : (
No issues found. Use{" "}
C
{" "} shortcut to create a new issue
)}
) : ( )}
); };