refactor(client): split client to cms/mobile/party

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/cms/src/components/checkin/qr-dialog.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { QRCode } from '@/components/ui/shadcn-io/qr-code';
+import { useCheckinCode } from '@/hooks/data/useGetCheckInCode';
+import { Button } from '../ui/button';
+
+export function QrDialog(
+  { eventId }: { eventId: string },
+) {
+  const [open, setOpen] = useState(false);
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button className="w-20">签到</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>QR Code</DialogTitle>
+          <DialogDescription>
+            请工作人员扫描下面的二维码为你签到。
+          </DialogDescription>
+        </DialogHeader>
+        <QrSection eventId={eventId} enabled={open} />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function QrSection({ eventId, enabled }: { eventId: string; enabled: boolean }) {
+  const { data } = useCheckinCode(eventId, enabled);
+  return data
+    ? (
+        <>
+          <div className="border-2 px-4 py-8 border-muted rounded-xl flex flex-col items-center justify-center p-4">
+            <QRCode data={data.data.checkin_code} className="size-60" />
+          </div>
+          <DialogFooter>
+            <div className="flex flex-1 items-center ml-2 font-mono text-3xl tracking-widest text-primary/80 justify-center">
+              {data.data.checkin_code}
+            </div>
+          </DialogFooter>
+        </>
+      )
+    : (
+        <QrSectionSkeleton />
+      );
+}
+
+function QrSectionSkeleton() {
+  return (
+    <>
+      <div className="border-2 px-4 py-8 border-muted rounded-xl flex flex-col items-center justify-center p-4">
+        <QRCode data="114514" className="size-60 blur-xs" />
+      </div>
+      <DialogFooter>
+        <div className="flex flex-1 items-center ml-2 font-mono text-3xl tracking-widest text-primary/80 justify-center">
+          Loading...
+        </div>
+      </DialogFooter>
+    </>
+  );
+}