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]>
73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
import Link from "next/link";
|
|
import { api, getMe, unwrap } from "@/lib/api";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
|
|
export default async function Home() {
|
|
const [me, home] = await Promise.all([getMe(), api.home.get().then(unwrap)]);
|
|
const links = "links" in home ? home.links : undefined;
|
|
|
|
return (
|
|
<div className="space-y-14">
|
|
<section className="max-w-2xl space-y-5 pt-4">
|
|
<p className="text-sm font-medium text-muted-foreground">T5DE Hub</p>
|
|
<h1 className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
|
|
One account for all your IMVU avatars.
|
|
</h1>
|
|
<p className="text-lg text-pretty text-muted-foreground">
|
|
Link your IMVU accounts, see who's online in T5DE, and soon, community products.
|
|
</p>
|
|
{!me && (
|
|
<div className="flex flex-wrap gap-3 pt-2">
|
|
<Link href="/signup" className={buttonVariants({ size: "lg", className: "px-4" })}>
|
|
Create account
|
|
</Link>
|
|
<Link href="/signin" className={buttonVariants({ size: "lg", variant: "outline", className: "px-4" })}>
|
|
Sign in
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<section className="grid gap-4 sm:grid-cols-2">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardDescription>Online in T5DE</CardDescription>
|
|
<CardTitle className="text-4xl font-semibold tabular-nums">{home.onlineCount}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-sm text-muted-foreground">
|
|
people showing that they're online.{" "}
|
|
<Link href="/online" className="text-foreground underline underline-offset-4">
|
|
See who
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
{links !== undefined ? (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardDescription>Your IMVU accounts</CardDescription>
|
|
<CardTitle className="text-4xl font-semibold tabular-nums">{links}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-sm text-muted-foreground">
|
|
linked.{" "}
|
|
<Link href="/account" className="text-foreground underline underline-offset-4">
|
|
Manage
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>One account, all your avatars</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-sm text-muted-foreground">
|
|
Link any of your IMVU accounts by putting a code in its tagline. Your accounts stay private: nobody else
|
|
can see they're yours.
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|