dhkatzandClaude Opus 5.5
c75a4c9afc
Age: a Didit provider behind the vendor-neutral age interface. A person verifies once (ID document, passive liveness, face match) and all their linked IMVU accounts count as adult. Webhooks are checked against Didit's signatures; only "over 18" is kept. A later answer replaces an earlier one (an approval taken back is revoked). Checks are limited: one unfinished check per person, 3 in 30 days, none once verified, and a monthly cap (DIDIT_MONTHLY_LIMIT, default 30: Didit's free plan is $10 of credit a month and a check costs $0.30). The Account page gets an Age Verification card. Registration: open or closed, an admin's setting in the console (default from REGISTRATION). Closed: new accounts can only sign in until a moderator approves them (or declines, deleting the account); the website shows them a waiting page and the API treats them as signed out. Co-Authored-By: Claude Opus 5.5 <[email protected]>
83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
// Small labels. Color only means something: green is online, blue is age verified or adult, red is banned.
|
|
import type { Link } from "@/lib/api";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const tones = {
|
|
neutral: "border-border bg-muted/60 text-muted-foreground",
|
|
strong: "border-foreground/15 bg-foreground/5 text-foreground",
|
|
online: "border-emerald-600/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400",
|
|
adult: "border-sky-600/20 bg-sky-500/10 text-sky-700 dark:text-sky-400",
|
|
danger: "border-red-600/20 bg-red-500/10 text-red-700 dark:text-red-400",
|
|
};
|
|
|
|
export function Tag({
|
|
tone = "neutral",
|
|
dot = false,
|
|
className,
|
|
children,
|
|
}: {
|
|
tone?: keyof typeof tones;
|
|
dot?: boolean;
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"inline-flex h-6 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium whitespace-nowrap",
|
|
tones[tone],
|
|
className,
|
|
)}
|
|
>
|
|
{dot && <span className="size-1.5 rounded-full bg-current" aria-hidden />}
|
|
<span>{children}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/** A round initial standing in for an avatar picture. */
|
|
export function Initial({ name }: { name: string }) {
|
|
return (
|
|
<span
|
|
className="grid size-10 shrink-0 place-items-center rounded-full border bg-muted text-sm font-semibold text-muted-foreground uppercase"
|
|
aria-hidden
|
|
>
|
|
{name.slice(0, 1)}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/** The community products an account wears. */
|
|
export function Outfit({ items }: { items: { id: string; name: string }[] }) {
|
|
if (items.length === 0) return null;
|
|
return (
|
|
<div className="space-y-1.5">
|
|
<div className="text-xs text-muted-foreground">Wearing</div>
|
|
<ul className="flex flex-wrap gap-1.5">
|
|
{items.map((item) => (
|
|
<li key={item.id} className="rounded-md border bg-background px-2 py-0.5 text-xs">
|
|
{item.name}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** A page's title and the line under it. */
|
|
export function PageHeader({ title, children }: { title: React.ReactNode; children?: React.ReactNode }) {
|
|
return (
|
|
<div className="mb-8 space-y-2">
|
|
<h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">{title}</h1>
|
|
{children && <div className="text-muted-foreground">{children}</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** An IMVU account's age status: blue when it can see adult community products. */
|
|
export function AgeTag({ link }: { link: Pick<Link, "ageVerified" | "accessPass" | "adult"> }) {
|
|
if (link.ageVerified || (link.adult && !link.accessPass)) return <Tag tone="adult">Age verified</Tag>;
|
|
if (link.accessPass) return <Tag tone="adult">Access Pass</Tag>;
|
|
return <Tag>Not age verified</Tag>;
|
|
}
|