70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import Typography, {
|
|
TypographyProps,
|
|
} from "@/components/ui/Typography/Typography";
|
|
import { BottomActionButton } from "@/components/widgets/BottomActionButton/BottomActionButton";
|
|
import PrivacyTermsConsent from "@/components/widgets/PrivacyTermsConsent/PrivacyTermsConsent";
|
|
import { useDynamicSize } from "@/hooks/DOM/useDynamicSize";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface SoulmatePortraitProps
|
|
extends Omit<React.ComponentProps<"div">, "title"> {
|
|
bottomActionButtonProps?: React.ComponentProps<typeof BottomActionButton>;
|
|
privacyTermsConsentProps?: React.ComponentProps<typeof PrivacyTermsConsent>;
|
|
title?: TypographyProps<"h2">;
|
|
}
|
|
|
|
export default function SoulmatePortrait({
|
|
bottomActionButtonProps,
|
|
privacyTermsConsentProps,
|
|
title,
|
|
...props
|
|
}: SoulmatePortraitProps) {
|
|
const {
|
|
height: bottomActionButtonHeight,
|
|
elementRef: bottomActionButtonRef,
|
|
} = useDynamicSize<HTMLDivElement>({
|
|
defaultHeight: 132,
|
|
});
|
|
|
|
return (
|
|
<div
|
|
className="w-full flex flex-col items-center gap-[30px]"
|
|
{...props}
|
|
style={{
|
|
paddingBottom: `${bottomActionButtonHeight}px`,
|
|
...props.style,
|
|
}}
|
|
>
|
|
<div className="w-full pt-6 pb-3">
|
|
{title && (
|
|
<Typography
|
|
as="h2"
|
|
size="xl"
|
|
weight="bold"
|
|
{...title}
|
|
className={cn(title.className, "leading-[125%] text-primary")}
|
|
/>
|
|
)}
|
|
</div>
|
|
{bottomActionButtonProps && (
|
|
<BottomActionButton
|
|
{...bottomActionButtonProps}
|
|
className={cn(
|
|
"max-w-[560px] z-10",
|
|
bottomActionButtonProps.className
|
|
)}
|
|
ref={bottomActionButtonRef}
|
|
childrenUnderButton={
|
|
privacyTermsConsentProps && (
|
|
<PrivacyTermsConsent
|
|
{...privacyTermsConsentProps}
|
|
className={cn(privacyTermsConsentProps.className, "mt-5")}
|
|
/>
|
|
)
|
|
}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|