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

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

Merged
bustikiller merged 2 commits from invitation-link into main 2025-06-12 21:08:05 +00:00
Conversation 0 Commits 2 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 { AbstractApi } from "@/app/api/abstract-api";
import { Guest } from "@/app/lib/guest"; import { Guest } from "@/app/lib/guest";
import { Invitation, InvitationSerializer } from "@/app/lib/invitation"; 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 { 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 { useEffect, useRef } from "react";
import { useState } from "react"; import { useState } from "react";
@ -24,6 +25,8 @@ function InvitationCard({ invitation, allGuests, onGuestAdded, onDestroy }: {
const api = new AbstractApi<Invitation>(); const api = new AbstractApi<Invitation>();
const serializer = new InvitationSerializer(); const serializer = new InvitationSerializer();
const iconClassName = "w-5 h-5 text-white absolute top-2 opacity-0 group-hover:opacity-100 cursor-pointer";
useEffect(() => { useEffect(() => {
if (ref.current) { if (ref.current) {
return dropTargetForElements({ 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" className="relative flex items-center justify-center w-full bg-green-800 border border-green-900 group"
style={{ aspectRatio: "1.618 / 1" }} style={{ aspectRatio: "1.618 / 1" }}
> >
<LinkIcon
className={`${iconClassName} right-8`}
onClick={() => {
navigator.clipboard.writeText(`https://${window.location.host}/${getSlug()}/site/invitation/${invitation.id}`);
}}
/>
<TrashIcon <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={() => { onClick={() => {
if (window.confirm("Are you sure you want to delete this invitation?")) { if (window.confirm("Are you sure you want to delete this invitation?")) {
api.destroy(serializer, invitation, () => { api.destroy(serializer, invitation, () => {
@ -64,6 +73,7 @@ function InvitationCard({ invitation, allGuests, onGuestAdded, onDestroy }: {
}} }}
/> />
{guests.length === 0 ? ( {guests.length === 0 ? (
<p className="text-center text-yellow-500 text-lg italic"> <p className="text-center text-yellow-500 text-lg italic">
(empty invitation) (empty invitation)