plane/web/components/workspace/single-invitation.tsx
sriram veeraghanta 5b0066140f chore: format all files in monorepo (#3054)
* chore: format all files in the project

* fix: removing @types/react from dependencies

* fix: adding prettier and eslint config

* chore: format files

* fix: upgrading turbo version

* chore: ignoring warnings and adding todos

* fix: updated the type of bubble menu item in the document editor

* chore: format files

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-12-10 15:50:45 +05:30

63 lines
2.2 KiB
TypeScript

// helpers
import { getFirstCharacters, truncateText } from "helpers/string.helper";
// types
import { IWorkspaceMemberInvitation } from "types";
type Props = {
invitation: IWorkspaceMemberInvitation;
invitationsRespond: string[];
handleInvitation: any;
};
const SingleInvitation: React.FC<Props> = ({ invitation, invitationsRespond, handleInvitation }) => (
<li>
<label
className={`group relative flex cursor-pointer items-start space-x-3 border-2 border-transparent py-4`}
htmlFor={invitation.id}
>
<div className="flex-shrink-0">
<span className="inline-flex h-10 w-10 items-center justify-center rounded-lg">
{invitation.workspace.logo && invitation.workspace.logo !== "" ? (
<img
src={invitation.workspace.logo}
height="100%"
width="100%"
className="rounded"
alt={invitation.workspace.name}
/>
) : (
<span className="flex h-full w-full items-center justify-center rounded-xl bg-gray-700 p-4 uppercase text-white">
{getFirstCharacters(invitation.workspace.name)}
</span>
)}
</span>
</div>
<div className="min-w-0 flex-1">
<div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
<p className="text-sm text-custom-text-200">
Invited by{" "}
{invitation.created_by_detail
? invitation.created_by_detail.display_name
: invitation.workspace.owner.display_name}
</p>
</div>
<div className="flex-shrink-0 self-center">
<button
className={`${
invitationsRespond.includes(invitation.id)
? "bg-custom-background-80 text-custom-text-200"
: "bg-custom-primary text-white"
} rounded-3xl border border-custom-border-200 px-4 py-2 text-sm`}
onClick={() => {
handleInvitation(invitation, invitationsRespond.includes(invitation.id) ? "withdraw" : "accepted");
}}
>
{invitationsRespond.includes(invitation.id) ? "Invitation Accepted" : "Accept Invitation"}
</button>
</div>
</label>
</li>
);
export default SingleInvitation;