90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { getAssetPath } from "../../../../lib/assetUtils";
|
|
import type { ParticipantSelectionViewProps } from "./ParticipantSelection.types";
|
|
|
|
function ParticipantArt() {
|
|
return (
|
|
<div
|
|
className="relative mx-auto aspect-[540/555] w-full max-w-[420px] pr-12 lg:mx-0 lg:w-[540px] lg:max-w-none lg:shrink-0 lg:pr-0"
|
|
aria-hidden
|
|
>
|
|
{/* eslint-disable @next/next/no-img-element -- decorative Figma shapes */}
|
|
<img
|
|
src={getAssetPath("assets/shapes/about-participant-circles.svg")}
|
|
alt=""
|
|
width={282}
|
|
height={282}
|
|
className="absolute top-0 left-0 h-auto w-[52.2%]"
|
|
/>
|
|
<img
|
|
src={getAssetPath("assets/shapes/about-participant-rings.svg")}
|
|
alt=""
|
|
width={334}
|
|
height={334}
|
|
className="absolute top-[6.3%] left-[38.15%] h-auto w-[61.85%]"
|
|
/>
|
|
<img
|
|
src={getAssetPath("assets/shapes/about-participant-clover.svg")}
|
|
alt=""
|
|
width={200}
|
|
height={200}
|
|
className="absolute top-[57.4%] left-[25.7%] h-auto w-[37%] rotate-[60deg]"
|
|
/>
|
|
{/* eslint-enable @next/next/no-img-element */}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ParticipantSelectionView({
|
|
heading,
|
|
body,
|
|
groups,
|
|
footnote,
|
|
}: ParticipantSelectionViewProps) {
|
|
return (
|
|
<section
|
|
data-figma-node="24227:30762"
|
|
className="flex flex-col gap-4 border-b border-[var(--color-border-default-secondary)] bg-black px-[var(--space-400)] py-20 lg:flex-row lg:items-center lg:justify-center lg:gap-8 lg:px-[var(--space-2400)]"
|
|
aria-labelledby="about-participant-heading"
|
|
>
|
|
<ParticipantArt />
|
|
<div className="flex w-full min-w-0 flex-col gap-12 lg:max-w-[928px] lg:flex-1">
|
|
<div className="flex flex-col gap-4">
|
|
<h2
|
|
id="about-participant-heading"
|
|
className="font-bricolage-grotesque text-display-s text-[var(--color-content-default-primary)] lg:text-heading-xxl"
|
|
>
|
|
{heading}
|
|
</h2>
|
|
<p className="font-inter text-paragraph-s text-[var(--color-content-default-tertiary)] lg:text-paragraph-l">
|
|
{body}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<ul className="m-0 list-none p-0">
|
|
{groups.map((group, index) => (
|
|
<li
|
|
key={group}
|
|
className={`border-b border-[var(--color-border-default-secondary)] py-4 font-inter text-paragraph-xs text-[var(--color-content-default-primary)] lg:text-paragraph-m ${
|
|
index === 0 ? "border-t" : ""
|
|
}`}
|
|
>
|
|
{group}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<p className="pt-6 font-inter text-paragraph-xxs text-[var(--color-content-default-tertiary)] lg:text-paragraph-s">
|
|
{footnote}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
ParticipantSelectionView.displayName = "ParticipantSelectionView";
|
|
|
|
export default memo(ParticipantSelectionView);
|