import React from "react"; import useSWR from "swr"; import Link from "next/link"; import { useRouter } from "next/router"; // hooks import useUser from "hooks/use-user"; // ui import { CustomMenu, Tooltip } from "components/ui"; // icons import { LockClosedIcon, LockOpenIcon, PencilIcon, StarIcon, TrashIcon, } from "@heroicons/react/24/outline"; import { ExclamationIcon, PencilScribbleIcon } from "components/icons"; // helpers import { truncateText } from "helpers/string.helper"; import { renderLongDateFormat, renderShortDate, renderShortTime } from "helpers/date-time.helper"; // types import { IPage, IProjectMember } from "types"; type TSingleStatProps = { page: IPage; people: IProjectMember[] | undefined; handleEditPage: () => void; handleDeletePage: () => void; handleAddToFavorites: () => void; handleRemoveFromFavorites: () => void; partialUpdatePage: (page: IPage, formData: Partial) => void; }; export const SinglePageListItem: React.FC = ({ page, people, handleEditPage, handleDeletePage, handleAddToFavorites, handleRemoveFromFavorites, partialUpdatePage, }) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { user } = useUser(); return (
  • {truncateText(page.name, 75)}

    {page.label_details.length > 0 && page.label_details.map((label) => (
    {label.name}
    ))}

    {renderShortTime(page.updated_at)}

    {page.is_favorite ? ( ) : ( )} {page.created_by === user?.id && ( )} person.member.id === page.created_by)?.member .first_name ?? "" } on ${renderLongDateFormat(`${page.created_at}`)}`} > { e.preventDefault(); e.stopPropagation(); handleEditPage(); }} > Edit Page { e.preventDefault(); e.stopPropagation(); handleDeletePage(); }} > Delete Page
  • ); };