91 lines
2.4 KiB
TypeScript
91 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import { Header } from "@/components/layout/Header/Header";
|
|
import Typography, {
|
|
TypographyProps,
|
|
} from "@/components/ui/Typography/Typography";
|
|
import {
|
|
BottomActionButton,
|
|
BottomActionButtonProps,
|
|
} from "@/components/widgets/BottomActionButton/BottomActionButton";
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
export interface LayoutQuestionProps
|
|
extends Omit<React.ComponentProps<"section">, "title" | "content"> {
|
|
headerProps?: React.ComponentProps<typeof Header>;
|
|
title: TypographyProps<"h2">;
|
|
subtitle: TypographyProps<"p">;
|
|
children: React.ReactNode;
|
|
bottomActionButtonProps?: BottomActionButtonProps;
|
|
}
|
|
|
|
function LayoutQuestion({
|
|
className,
|
|
headerProps,
|
|
title,
|
|
subtitle,
|
|
children,
|
|
bottomActionButtonProps,
|
|
...props
|
|
}: LayoutQuestionProps) {
|
|
const bottomActionButtonRef = useRef<HTMLDivElement | null>(null);
|
|
const [bottomActionButtonHeight, setBottomActionButtonHeight] =
|
|
useState<number>(132);
|
|
|
|
useEffect(() => {
|
|
if (bottomActionButtonRef.current) {
|
|
console.log(bottomActionButtonRef.current.clientHeight);
|
|
|
|
setBottomActionButtonHeight(bottomActionButtonRef.current.clientHeight);
|
|
}
|
|
}, [bottomActionButtonProps]);
|
|
|
|
return (
|
|
<section
|
|
className={cn(`block min-h-dvh w-full`, className)}
|
|
{...props}
|
|
style={{
|
|
paddingBottom: `${bottomActionButtonHeight}px`,
|
|
...props.style,
|
|
}}
|
|
>
|
|
<Header {...headerProps} />
|
|
<div className="w-full flex flex-col justify-center items-center p-6 pt-[30px]">
|
|
{title && (
|
|
<Typography
|
|
as="h2"
|
|
font="manrope"
|
|
weight="bold"
|
|
align="left"
|
|
{...title}
|
|
className={cn(title.className, "text-[25px] leading-[38px]")}
|
|
/>
|
|
)}
|
|
{subtitle && (
|
|
<Typography
|
|
as="p"
|
|
weight="medium"
|
|
align="left"
|
|
{...subtitle}
|
|
className={cn(
|
|
subtitle.className,
|
|
"w-full mt-2.5 text-[17px] leading-[26px]"
|
|
)}
|
|
/>
|
|
)}
|
|
{children}
|
|
{bottomActionButtonProps && (
|
|
<BottomActionButton
|
|
{...bottomActionButtonProps}
|
|
className="max-w-[560px]"
|
|
ref={bottomActionButtonRef}
|
|
/>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export { LayoutQuestion };
|