src/components/auth-frame.tsx

Linked repository file from this build.

import type { ReactNode } from "react";

import { Brand } from "@/components/brand";

/** Themed frame for the Clerk sign-in and sign-up pages. */
export function AuthFrame({ children }: { children: ReactNode }) {
  return (
    <div className="flex min-h-dvh flex-col bg-background text-foreground">
      <header className="border-b">
        <div className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between gap-6 px-6">
          <Brand />
          <p className="text-sm text-muted-foreground">Synthetic SNAP Negative demo</p>
        </div>
      </header>
      <main className="flex flex-1 items-center justify-center p-6">{children}</main>
    </div>
  );
}