bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 14 Actions Packages Projects Releases Wiki Activity

Add a link to the invitation in the invitation card #262

Open
bustikiller wants to merge 1 commits from invitation-link into main
pull from: invitation-link
merge into: bustikiller:main
Conversation 0 Commits 1 Files Changed 1 +12 -2
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/ui/invitations/board.tsx
View File

@ -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)