shoc-frontend-new/src/app/(auth)/_components/auth-page-shell.tsx

import type { ComponentPropsWithoutRef, ReactNode } from "react";

import { cn } from "@/lib/utils";

export type AuthPageShellProps = ComponentPropsWithoutRef<"div"> & {
  cardClassName?: string;
  children: ReactNode;
};

export function AuthPageShell({
  children,
  className,
  cardClassName,
  ...props
}: AuthPageShellProps) {
  return (
    <div
      className={cn(
        "flex min-h-screen w-full items-center justify-center bg-(--color-bg-page) px-4",
        className,
      )}
      {...props}
    >
      <div
        className={cn(
          "w-full max-w-sm rounded-(--radius-lg) border border-border bg-card p-10! shadow-sm",
          cardClassName,
        )}
      >
        {children}
      </div>
    </div>
  );
}