import {
ArrowRight,
KeyRound,
RotateCcw,
ShieldCheck,
UserRound,
} from "lucide-react";
import { cn } from "@reopt-ai/opt-ui";
import { Link } from "@/i18n/routing";
import { createLocalizedPageMetadata } from "@/lib/seo";
import { SignInWithReoptButton } from "./sign-in-with-reopt-button-demo";
import { DemoHeaderSignIn, DemoUserMenu } from "./auth-session-preview";
export const generateMetadata = createLocalizedPageMetadata({
title: "Brandapp Auth Console",
description:
"brandapp-sdk × brandapp-ui × opt-ui — Reopt OAuth 로그인과 세션 기반 사용자 메뉴 예제 앱",
path: "/examples/auth",
});
const AUTH_CHECKS = [
{
label: "OAuth route",
value: "/api/auth/*",
state: "연결됨",
Icon: KeyRound,
accent: "text-emerald-300",
tint: "bg-emerald-400/10",
},
{
label: "Session surface",
value: "UserMenu",
state: "준비됨",
Icon: UserRound,
accent: "text-sky-300",
tint: "bg-sky-400/10",
},
{
label: "Fallback state",
value: "Toast guard",
state: "처리됨",
Icon: RotateCcw,
accent: "text-violet-300",
tint: "bg-violet-400/10",
},
] as const;
export default function BrandappAuthTemplatePage() {
return (
<div className="min-h-screen bg-[#050505] text-white/90">
<div className="mx-auto flex min-h-screen max-w-6xl flex-col gap-8 px-5 py-6 sm:px-8 lg:py-10">
<header className="flex items-center justify-between gap-4">
<Link
href="/examples/auth"
className="rounded text-sm font-semibold text-white transition-colors hover:text-white/70 focus-visible:ring-2 focus-visible:ring-blue-600/50 focus-visible:outline-none"
>
reopt auth
</Link>
<div className="flex items-center gap-2">
<Link
href="/docs/brandapp-ui/start"
className="rounded-lg border border-white/[0.14] px-3 py-2 text-xs font-medium text-white/75 transition-colors hover:bg-white/[0.06]"
>
Docs
</Link>
<DemoHeaderSignIn />
</div>
</header>
<section className="grid flex-1 items-center gap-8 lg:grid-cols-[minmax(0,0.95fr)_minmax(360px,0.75fr)]">
<div className="flex min-w-0 flex-col gap-6">
<div className="inline-flex w-fit items-center gap-2 rounded-full border border-white/[0.12] bg-white/[0.04] px-3 py-1 text-xs text-white/65">
<span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
Brandapp Auth
</div>
<div className="flex flex-col gap-4">
<h1 className="max-w-3xl text-4xl leading-tight font-semibold tracking-tight text-white sm:text-5xl">
Reopt 로그인을 제품 첫 화면에 바로 연결
</h1>
<p className="max-w-2xl text-base leading-8 text-white/58">
OAuth 진입, 세션 메뉴, 실패 토스트까지 한 화면에서 이어지는 인증
콘솔 예제입니다. 실제 앱에 붙일 때 필요한 상태와 경계가 먼저
보이도록 구성했습니다.
</p>
</div>
<div className="grid gap-3 sm:grid-cols-3">
{AUTH_CHECKS.map((check) => (
<div
key={check.label}
className="rounded-lg border border-white/[0.10] bg-white/[0.035] p-4"
>
<div className="mb-4 flex items-center justify-between gap-3">
<span className="text-xs text-white/45">{check.label}</span>
<span
className={cn(
"flex size-7 items-center justify-center rounded-md",
check.tint,
)}
>
<check.Icon
className={cn("size-4", check.accent)}
aria-hidden
/>
</span>
</div>
<div className="font-mono text-sm font-semibold text-white">
{check.value}
</div>
<div className={cn("mt-1 text-xs", check.accent)}>
{check.state}
</div>
</div>
))}
</div>
</div>
<div className="rounded-lg border border-white/[0.10] bg-white/[0.04] p-4 shadow-2xl shadow-black/30 sm:p-5">
<div className="rounded-lg border border-white/[0.10] bg-[#0d0d0f] p-4">
<div className="flex items-start justify-between gap-4">
<div>
<p className="text-xs font-medium text-white/45">
워크스페이스 접근
</p>
<h2 className="mt-1 text-xl font-semibold text-white">
Brandapp Console
</h2>
</div>
<ShieldCheck className="size-5 text-emerald-300" aria-hidden />
</div>
<div className="mt-6 rounded-lg border border-white/[0.10] bg-black/50 p-4">
<div className="flex items-center gap-3">
<div className="flex size-10 items-center justify-center rounded-lg bg-white text-black">
<KeyRound className="size-5" aria-hidden />
</div>
<div>
<p className="text-sm font-semibold text-white">
Reopt OAuth
</p>
<p className="text-xs text-white/45">
callback: /examples/auth
</p>
</div>
</div>
<div className="mt-5">
<SignInWithReoptButton
callbackURL="/examples/auth"
className="w-full"
/>
</div>
</div>
<div className="mt-4 flex flex-col gap-3 rounded-lg border border-white/[0.10] bg-white/[0.03] p-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<p className="text-xs font-medium text-white/45">현재 세션</p>
<p className="mt-1 text-sm text-white/75">
UserMenu가 로그인·로그아웃 상태를 하나의 표면에서
관리합니다.
</p>
</div>
<div className="shrink-0 self-start sm:self-center">
<DemoUserMenu />
</div>
</div>
</div>
<div className="mt-4 grid gap-3 text-xs text-white/48 sm:grid-cols-2">
<Link
href="/docs/brandapp-ui/surfaces/reopt-user-menu"
className="group inline-flex items-center justify-between gap-3 rounded-lg border border-white/[0.08] px-3 py-3 transition-colors hover:bg-white/[0.04]"
>
ReoptUserMenu
<ArrowRight
className="size-3.5 transition-transform group-hover:translate-x-0.5"
aria-hidden
/>
</Link>
<Link
href="/docs/brandapp-ui/surfaces/sign-in-with-reopt-button"
className="group inline-flex items-center justify-between gap-3 rounded-lg border border-white/[0.08] px-3 py-3 transition-colors hover:bg-white/[0.04]"
>
SignInWithReoptButton
<ArrowRight
className="size-3.5 transition-transform group-hover:translate-x-0.5"
aria-hidden
/>
</Link>
</div>
</div>
</section>
</div>
</div>
);
}
