78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { createPortal } from "react-dom";
|
|
import ModalHeader from "../ModalHeader";
|
|
import type { LoginBackdropVariant, LoginViewProps } from "./Login.types";
|
|
|
|
const backdropClasses: Record<LoginBackdropVariant, string> = {
|
|
solid: "bg-[var(--color-surface-invert-brand-primary)]",
|
|
blurredYellow:
|
|
"bg-[var(--color-surface-invert-brand-primary)]/85 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-surface-invert-brand-primary)]/75",
|
|
};
|
|
|
|
export function LoginView({
|
|
isOpen,
|
|
onClose,
|
|
children,
|
|
belowCard,
|
|
className,
|
|
ariaLabel,
|
|
ariaLabelledBy,
|
|
dialogRef,
|
|
backdropRef,
|
|
portalReady,
|
|
usePortal,
|
|
backdropVariant,
|
|
viewportHeight,
|
|
}: LoginViewProps) {
|
|
if (!isOpen) return null;
|
|
if (usePortal && !portalReady) return null;
|
|
|
|
const phoneSheetStyle =
|
|
viewportHeight != null
|
|
? { height: viewportHeight, maxHeight: viewportHeight }
|
|
: undefined;
|
|
|
|
const content = (
|
|
<div
|
|
ref={backdropRef}
|
|
className={`fixed inset-0 z-[9998] flex flex-col items-center gap-6 overflow-y-auto px-4 py-8 max-md:justify-end max-md:overflow-hidden max-md:px-0 max-md:py-0 md:justify-center ${backdropClasses[backdropVariant]}`}
|
|
style={phoneSheetStyle}
|
|
onPointerDown={(event) => {
|
|
if (event.target !== event.currentTarget) return;
|
|
onClose();
|
|
}}
|
|
role="presentation"
|
|
>
|
|
<div
|
|
ref={dialogRef}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={ariaLabel}
|
|
aria-labelledby={ariaLabelledBy}
|
|
className={`flex min-h-0 max-h-[90vh] w-full max-w-[560px] shrink-0 flex-col overflow-hidden rounded-[var(--radius-500)] bg-[var(--color-surface-default-primary)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] z-[9999] max-md:max-h-full max-md:rounded-b-none ${className}`}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<ModalHeader onClose={onClose} showMoreOptionsButton={false} />
|
|
<div className="scrollbar-design flex min-h-0 flex-1 flex-col overflow-x-clip overflow-y-auto px-6 pb-8 pt-0">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
{belowCard ? (
|
|
<div
|
|
className="shrink-0 max-md:w-full max-md:bg-[var(--color-surface-default-primary)] max-md:px-6 max-md:pb-6"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{belowCard}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
|
|
if (usePortal) {
|
|
return createPortal(content, document.body);
|
|
}
|
|
|
|
return content;
|
|
}
|