dhkatzandClaude Opus 5.5
64c552330b
apps/web: Next.js 16 (App Router), Tailwind 4 and shadcn/ui, light and dark from the system. Pages render on the server and call the API with Eden Treaty (typed by @t5de/api), forwarding the visitor's cookie; forms use server actions; sign-up, sign-in and sign-out use Better Auth's React client. /api is rewritten to the API so its cookies are first-party. Who's online follows the API's event stream (Next's gzip is off: it held the stream back). Standalone output with a Dockerfile; deploys to Vercel as is. Co-Authored-By: Claude Opus 5.5 <[email protected]>
59 lines
2.3 KiB
TypeScript
59 lines
2.3 KiB
TypeScript
import { CopyButton } from "@/components/copy-button";
|
|
import { ActionForm, SubmitButton } from "@/components/forms";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import type { Challenge } from "@/lib/api";
|
|
import { challengeAction } from "./actions";
|
|
|
|
/** A link in progress: the code to put in the tagline, then Check. */
|
|
export function ChallengeCard({ challenge: c }: { challenge: Challenge }) {
|
|
return (
|
|
<Card id={`link-${c.imvuId}`}>
|
|
<CardHeader>
|
|
<CardTitle>Link {c.username}</CardTitle>
|
|
<CardDescription>To prove {c.username} is yours:</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ActionForm action={challengeAction} fields={{ imvu: c.imvuId }} className="space-y-6">
|
|
<ol className="space-y-5 text-sm">
|
|
<Step n={1}>
|
|
<p>
|
|
Put this code anywhere in {c.username}'s IMVU tagline (on your avatar card in the client, or your
|
|
profile):
|
|
</p>
|
|
<div className="mt-3 flex flex-wrap items-center gap-3">
|
|
<code className="rounded-lg border bg-muted/50 px-4 py-2.5 font-mono text-xl font-semibold tracking-wider select-all sm:text-2xl">
|
|
{c.code}
|
|
</code>
|
|
<CopyButton text={c.code} />
|
|
</div>
|
|
</Step>
|
|
<Step n={2}>
|
|
<p>Press Check. You can take the code out again once it's linked.</p>
|
|
</Step>
|
|
</ol>
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<SubmitButton name="intent" value="check" pendingLabel="Checking…">
|
|
Check
|
|
</SubmitButton>
|
|
<SubmitButton variant="outline" name="intent" value="cancel" pendingLabel="Cancelling…">
|
|
Cancel
|
|
</SubmitButton>
|
|
<span className="text-sm text-muted-foreground">The code works for a day.</span>
|
|
</div>
|
|
</ActionForm>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function Step({ n, children }: { n: number; children: React.ReactNode }) {
|
|
return (
|
|
<li className="flex gap-3">
|
|
<span className="grid size-6 shrink-0 place-items-center rounded-full border text-xs font-medium text-muted-foreground">
|
|
{n}
|
|
</span>
|
|
<div className="min-w-0 flex-1 pt-0.5">{children}</div>
|
|
</li>
|
|
);
|
|
}
|