plane/web/components/workspace/single-invitation.tsx
sriram veeraghanta 1e152c666c
New Directory Setup (#2065)
* chore: moved app & space from apps to root

* chore: modified workspace configuration

* chore: modified dockerfiles for space and web

* chore: modified icons for space

* feat: updated files for new svg icons supported by next-images

* chore: added /spaces base path for next

* chore: added compose config for space

* chore: updated husky configuration

* chore: updated workflows for new configuration

* chore: changed app name to web

* fix: resolved build errors with web

* chore: reset file tracing root for both projects

* chore: added nginx config for deploy

* fix: eslint and tsconfig settings for space app

* husky setup fixes based on new dir

* eslint fixes

* prettier formatting

---------

Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
2023-09-03 18:50:30 +05:30

70 lines
2.3 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"
} text-sm px-4 py-2 border border-custom-border-200 rounded-3xl`}
onClick={(e) => {
handleInvitation(
invitation,
invitationsRespond.includes(invitation.id) ? "withdraw" : "accepted"
);
}}
>
{invitationsRespond.includes(invitation.id) ? "Invitation Accepted" : "Accept Invitation"}
</button>
</div>
</label>
</li>
);
export default SingleInvitation;