J-Board-Lite/src/app/(auth)/_components/auth-shell.tsx

import type { ReactNode } from "react";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import { PublicNotice } from "../public-notice";

export function AuthShell({ children }: { children: ReactNode }) {
  return (
    <main className="grid min-h-[100dvh] place-items-center px-4 py-10">
      <div className="w-full">
        <div className="mx-auto w-full max-w-md">
          <PublicNotice />
        </div>
        {children}
      </div>
    </main>
  );
}

export function AuthCard({
  title,
  description,
  children,
  className,
}: {
  title?: string;
  description?: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <Card className={cn("mx-auto w-full max-w-md rounded-xl p-1", className)}>
      {(title || description) && (
        <CardHeader className="space-y-2 pt-6 text-center">
          <div className="mx-auto flex size-10 items-center justify-center rounded-lg bg-primary text-sm font-bold text-primary-foreground">
            S
          </div>
          {title && <h1 className="text-display text-2xl font-semibold">{title}</h1>}
          {description && <p className="text-sm leading-6 text-muted-foreground">{description}</p>}
        </CardHeader>
      )}
      <CardContent className="pb-6">{children}</CardContent>
    </Card>
  );
}

export function AuthErrorMessage({ message }: { message: string }) {
  if (!message) return null;
  return (
    <div className="rounded-2xl border border-destructive/15 bg-destructive/10 px-3 py-2 text-center text-sm font-medium text-destructive">
      {message}
    </div>
  );
}