Add a link to the invitation in the invitation card

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<Invitation>();
   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" }}
     >
+      <LinkIcon
+        className={`${iconClassName} right-8`}
+        onClick={() => {
+            navigator.clipboard.writeText(`https://${window.location.host}/${getSlug()}/invitations/${invitation.id}`);
+        }}
+      />
       <TrashIcon
-        className="w-5 h-5 text-white absolute top-2 right-2 opacity-0 group-hover:opacity-100 cursor-pointer"
+        className={`${iconClassName} right-2`}
         onClick={() => {
           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 ? (
         <p className="text-center text-yellow-500 text-lg italic">
           (empty invitation)

pnpm-lock.yaml

@@ -61,7 +61,7 @@ importers:
         version: 11.1.0
       zod:
         specifier: ^3.23.8
-        version: 3.25.46
+        version: 3.25.45
     devDependencies:
       '@playwright/test':
         specifier: ^1.46.0
@@ -1417,8 +1417,8 @@ packages:
     engines: {node: '>= 14'}
     hasBin: true
 
-  zod@3.25.46:
+  zod@3.25.45:
-    resolution: {integrity: sha512-IqRxcHEIjqLd4LNS/zKffB3Jzg3NwqJxQQ0Ns7pdrvgGkwQsEBdEQcOHaBVqvvZArShRzI39+aMST3FBGmTrLQ==}
+    resolution: {integrity: sha512-kv1swJBZqv98NQibL0oVvkQE8rXT+6qGNM1FpZkFcJG2jnz4vbtu48bgaitp85CaBPLSKXibrEsU7MzJoVoZAA==}
 
 snapshots:
 
@@ -2765,4 +2765,4 @@ snapshots:
 
   yaml@2.4.3: {}
 
-  zod@3.25.46: {}
+  zod@3.25.45: {}