44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { Image } from "@/components";
|
|
import { getStaticImage } from "@/utils";
|
|
import ExperimentTitle from "./ExperimentTitle";
|
|
import { sensorImages } from "./constants";
|
|
|
|
interface Step1IntroPageProps {
|
|
onNext: () => void;
|
|
}
|
|
|
|
export default function Step1IntroPage({ onNext }: Step1IntroPageProps) {
|
|
return (
|
|
<>
|
|
<ExperimentTitle
|
|
title="01实验工具介绍"
|
|
description="以下是实验所需要的所有工具，让我们来看看具体有哪些吧"
|
|
/>
|
|
|
|
{/* img列表 */}
|
|
<div className="grid grid-cols-4 gap-y-20 gap-x-20 mt-10">
|
|
{sensorImages.map((image, index) => (
|
|
<div key={index} className="flex flex-col items-center">
|
|
<Image
|
|
src={image.src}
|
|
className="w-80 h-50 rounded-lg shadow-md mb-4 object-cover"
|
|
/>
|
|
<div className="text-center text-xl">
|
|
<h3 className=" font-bold text-gray-800 mb-1">{image.name}</h3>
|
|
<p className=" text-gray-600">{image.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div onClick={onNext}>
|
|
<Image
|
|
className="absolute bottom-4 right-6 cursor-pointer"
|
|
src={getStaticImage("components/按钮-下一步.png")}
|
|
button={true}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|