You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.6 KiB
91 lines
2.6 KiB
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { IoTimeOutline } from "react-icons/io5";
|
|
import Button from "./button";
|
|
|
|
type TestIntroPageProps = {
|
|
title: string;
|
|
estimateTime: string;
|
|
description: string;
|
|
bulletPoints?: readonly string[];
|
|
disclaimerText: string;
|
|
startLabel: string;
|
|
onStart: () => void;
|
|
children?: ReactNode;
|
|
};
|
|
|
|
export default function TestIntroPage({
|
|
title,
|
|
estimateTime,
|
|
description,
|
|
bulletPoints = [],
|
|
disclaimerText,
|
|
startLabel,
|
|
onStart,
|
|
children,
|
|
}: TestIntroPageProps) {
|
|
return (
|
|
<div className="flex flex-1 flex-col min-h-0 overflow-y-auto">
|
|
{/* Hero Image */}
|
|
<div className="mx-auto w-[348px] h-[156px] shrink-0 overflow-hidden rounded-[20px] shadow-[0_8px_28px_rgba(0,0,0,0.08)]">
|
|
<img
|
|
src="/assets/images/test-intro-hero.png"
|
|
alt=""
|
|
aria-hidden="true"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Disclaimer Card */}
|
|
<div className="mt-5 mx-1 rounded-[16px] bg-[#FFF1F4] border border-[#FDDDE3] px-4 py-4">
|
|
<p className="text-justify group-12 leading-[1.55] font-medium text-[#C0475B]">
|
|
{disclaimerText}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Test Info Section */}
|
|
<div className="mt-5 px-1">
|
|
<h2 className="group-16 font-bold text-[#1B1B1B] leading-tight">
|
|
{title}
|
|
</h2>
|
|
|
|
{/* Estimate Time */}
|
|
<div className="mt-2.5 flex items-center gap-1.5">
|
|
<IoTimeOutline className="text-[16px] text-[#5A5A5A]" />
|
|
<span className="group-12 font-medium text-[#5A5A5A]">
|
|
{description}: {estimateTime}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Bullet Points */}
|
|
{children ? (
|
|
<div className="mt-4">{children}</div>
|
|
) : bulletPoints.length > 0 ? (
|
|
<ul className="mt-4 space-y-3 pl-1">
|
|
{bulletPoints.map((point, index) => (
|
|
<li
|
|
key={index}
|
|
className="flex items-start gap-2 group-12 leading-[1.55] text-[#3A3A3A]"
|
|
>
|
|
<span className="mt-[6px] h-[5px] w-[5px] shrink-0 rounded-full bg-[#3A3A3A]" />
|
|
<span>{point}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : null}
|
|
</div>
|
|
|
|
{/* Spacer */}
|
|
<div className="flex-1 min-h-6" />
|
|
|
|
{/* Start Button */}
|
|
<div
|
|
className="sticky bottom-0 bg-[#F7F1F0] px-1 pt-3"
|
|
style={{ paddingBottom: "calc(24px + var(--safe-bottom))" }}
|
|
>
|
|
<Button onClick={onStart}>{startLabel}</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|