diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx index 39f8b26..a1ad865 100644 --- a/app/ui/invitations/board.tsx +++ b/app/ui/invitations/board.tsx @@ -5,8 +5,9 @@ import { AbstractApi } from "@/app/api/abstract-api"; import { Guest } from "@/app/lib/guest"; import { Invitation, InvitationSerializer } from "@/app/lib/invitation"; +import { getSlug } from "@/app/lib/utils"; import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'; -import { TrashIcon } from "@heroicons/react/24/outline"; +import { LinkIcon, TrashIcon } from "@heroicons/react/24/outline"; import { useEffect, useRef } from "react"; import { useState } from "react"; @@ -24,6 +25,8 @@ function InvitationCard({ invitation, allGuests, onGuestAdded, onDestroy }: { const api = new AbstractApi(); const serializer = new InvitationSerializer(); + const iconClassName = "w-5 h-5 text-white absolute top-2 opacity-0 group-hover:opacity-100 cursor-pointer"; + useEffect(() => { if (ref.current) { return dropTargetForElements({ @@ -53,8 +56,14 @@ function InvitationCard({ invitation, allGuests, onGuestAdded, onDestroy }: { className="relative flex items-center justify-center w-full bg-green-800 border border-green-900 group" style={{ aspectRatio: "1.618 / 1" }} > + { + navigator.clipboard.writeText(`https://${window.location.host}/${getSlug()}/invitations/${invitation.id}`); + }} + /> { if (window.confirm("Are you sure you want to delete this invitation?")) { api.destroy(serializer, invitation, () => { @@ -64,6 +73,7 @@ function InvitationCard({ invitation, allGuests, onGuestAdded, onDestroy }: { }} /> + {guests.length === 0 ? (

(empty invitation)