hatch-surf/app/join/[code]/page.tsx
Chris Anderson 51aaf3c9d2 Add face package import to handler
- Import internal/face package in handler.go
- Add FaceService field to Handler struct
- Add NewWithFaceService constructor
- Update go.mod with AWS SDK dependencies

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-06-25 21:16:50 +02:00

66 lines
2.0 KiB
TypeScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

'use client';
import { QRCodeSVG } from 'qrcode.react';
import { useParams } from 'next/navigation';
export default function JoinPage() {
const params = useParams();
const code = params.code as string;
const joinUrl = `https://hatch.surf/join/${code}`;
return (
<div className="min-h-screen bg-zinc-950 flex flex-col items-center justify-center px-6 py-12">
{/* Main content */}
<div className="max-w-md w-full text-center">
{/* Bilingual welcome phrase */}
<div className="mb-12">
<h1 className="text-3xl md:text-4xl font-bold text-white mb-4 leading-tight">
Арга хэмжээнд тавтай морилно уу
</h1>
<p className="text-lg text-zinc-400 font-medium">
Welcome to the event
</p>
</div>
{/* QR Code section */}
<div className="mb-12">
<div className="inline-block p-6 bg-white rounded-2xl shadow-2xl">
<QRCodeSVG
value={joinUrl}
size={200}
bgColor="#ffffff"
fgColor="#09090b"
level="H"
includeMargin={false}
/>
</div>
</div>
{/* Event info */}
<div className="mb-8">
<div className="inline-block px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-zinc-300 text-sm font-mono">
Code: {code}
</div>
</div>
{/* Instructions */}
<div className="space-y-4 text-zinc-400 text-sm">
<p className="leading-relaxed">
Scan the QR code above to join this event space.
</p>
<p className="leading-relaxed">
You'll be able to see live HTTP requests and interact with the event.
</p>
</div>
{/* Footer */}
<div className="mt-16 pt-8 border-t border-zinc-800/50">
<p className="text-xs text-zinc-600">
Powered by Hatch · Self-hostable HTTP request inspector
</p>
</div>
</div>
</div>
);
}