Update party invite UI

Author: lucemans

web/package.json

@@ -27,8 +27,10 @@
         "date-fns": "^4.1.0",
         "openapi-hooks": "0.0.3-alpha.3",
         "postcss": "^8.5.1",
+        "qrcode.react": "^4.2.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-icons": "^5.5.0",
         "tailwindcss": "^3.4.17",
         "typescript": "^5.7.3",
         "use-debounce": "^10.0.4",

web/pnpm-lock.yaml

@@ -1,8 +1,40 @@
-export const PartyInviteCard = () => {
-    return <div className="card">
-        <div className="card-body">
-            <h5 className="card-title">Party Invite</h5>
-            <p className="card-text">Share this link with your friends to invite them to the party.</p>
+import { FC, useState } from "react"
+import { LuEye, LuEyeOff } from "react-icons/lu";
+import { QRCodeSVG } from 'qrcode.react';
+export const PartyInviteCard: FC<{ partyId: string }> = ({ partyId }) => {
+    const [hidden, setHidden] = useState(true);
+
+    return (<div className="card flex flex-col gap-2 max-w-sm">
+        <h2>Party Invite</h2>
+        <p className="text-secondary">Share this link with your friends to invite them to the party.</p>
+        <div className="flex justify-center gap-2 flex-col items-center">
+            <QRCode value={`${window.location.origin}/party/${partyId}`} hidden={hidden} />
+            <div className="text-secondary">
+                Party Code: <span className="inline-flex font-bold bg-tertiary px-2 py-1">{hidden ? '*'.repeat(partyId.length) : partyId}</span>
+            </div>
         </div>
-    </div>
+        <div className="flex gap-2 w-full flex-wrap justify-between">
+            <input type={hidden ? 'password' : 'text'} className="input flex-1" value={`${window.location.origin}/party/${partyId}`} disabled />
+            <button className="button" onClick={() => {
+                navigator.clipboard.writeText(`${window.location.origin}/party/${partyId}`);
+            }}>Copy</button>
+        </div>
+        <button className="button flex gap-2 items-center" onClick={() => setHidden(!hidden)}>
+            {hidden ? <><LuEye /> Show</> : <><LuEyeOff /> Hide</>}
+        </button>
+    </div>);
 }
+
+const QRCode: FC<{ value: string, hidden: boolean }> = ({ value, hidden }) => {
+    return <div className="bg-tertiary p-2 rounded-md">
+        <div className="w-full h-full bg-secondary rounded-md">
+            {
+                hidden ? <div className="w-32 h-32 bg-tertiary rounded-md flex items-center justify-center gap-2">
+                    <LuEyeOff className="text-secondary" />
+                    <p className="text-secondary">Hidden</p>
+                </div> :
+                    <QRCodeSVG value={value} size={128} bgColor="#2d2b29" fgColor="#F5F5F5" />
+            }
+        </div>
+    </div>
+};

web/src/components/party/management/PartyInvite.tsx

@@ -9,6 +9,6 @@ function RouteComponent() {
   const { partyId } = Route.useParams();
 
   return (<div className="p-2 grid grid-cols-1 gap-2">
-    <PartyInviteCard />
+    <PartyInviteCard partyId={partyId} />
   </div>);
 }