103 lines
3.4 KiB
TypeScript
103 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import Button from "../../buttons/Button";
|
|
import Link from "../../navigation/Link";
|
|
import type { YourTurnViewProps } from "./YourTurn.types";
|
|
|
|
const COLOR_BARS = [
|
|
"bg-[var(--color-lavender-lavender200)]",
|
|
"bg-[var(--color-surface-invert-brand-teal)]",
|
|
"bg-[var(--color-surface-invert-brand-secondary)]",
|
|
"bg-[var(--color-surface-invert-brand-red)]",
|
|
] as const;
|
|
|
|
function YourTurnView({
|
|
heading,
|
|
body,
|
|
createRule,
|
|
facilitator,
|
|
facilitatorHref,
|
|
questionsLead,
|
|
faq,
|
|
faqHref,
|
|
or,
|
|
askOrganizer,
|
|
illustrationCaption,
|
|
onCreateRule,
|
|
onAskOrganizer,
|
|
}: YourTurnViewProps) {
|
|
return (
|
|
<section
|
|
data-figma-node="24239:1397"
|
|
className="border-b border-[var(--color-border-default-secondary)] bg-[var(--color-surface-default-tertiary)] px-[var(--space-600)] py-12 lg:px-[var(--space-2400)] lg:py-[var(--space-3000)]"
|
|
aria-labelledby="about-your-turn-heading"
|
|
>
|
|
<div className="mx-auto flex w-full max-w-[1920px] flex-col gap-10 lg:flex-row lg:items-start lg:gap-12">
|
|
<div className="flex w-full flex-col gap-8 lg:max-w-[472px] lg:shrink-0 lg:gap-12">
|
|
<div className="flex flex-col gap-5 lg:gap-6">
|
|
<div className="flex h-1 w-[184px] gap-1.5 lg:h-3 lg:w-[400px]" aria-hidden>
|
|
{COLOR_BARS.map((bar) => (
|
|
<span key={bar} className={`h-full flex-1 rounded-sm ${bar}`} />
|
|
))}
|
|
</div>
|
|
<h2
|
|
id="about-your-turn-heading"
|
|
className="font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)]"
|
|
>
|
|
{heading}
|
|
</h2>
|
|
<p className="font-inter text-paragraph-m text-[var(--color-content-default-secondary)]">
|
|
{body}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col gap-3 md:flex-row md:gap-4">
|
|
<Button
|
|
buttonType="filled"
|
|
palette="default"
|
|
size="large"
|
|
className="w-full justify-center md:w-auto"
|
|
onClick={onCreateRule}
|
|
>
|
|
{createRule}
|
|
</Button>
|
|
<Button
|
|
buttonType="outline"
|
|
palette="default"
|
|
size="large"
|
|
className="w-full justify-center md:w-auto"
|
|
href={facilitatorHref}
|
|
>
|
|
{facilitator}
|
|
</Button>
|
|
</div>
|
|
<p className="font-inter text-paragraph-s text-[var(--color-content-default-secondary)]">
|
|
{questionsLead}{" "}
|
|
<Link href={faqHref} variant="paragraph" theme="dark" type="primary">
|
|
{faq}
|
|
</Link>{" "}
|
|
{or}{" "}
|
|
<Link
|
|
variant="paragraph"
|
|
theme="dark"
|
|
type="primary"
|
|
onClick={onAskOrganizer}
|
|
>
|
|
{askOrganizer}
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
<div className="flex h-[246px] w-full flex-col items-start justify-end rounded-[var(--radius-300)] border border-dashed border-[var(--color-border-default-tertiary)] bg-[var(--color-surface-default-secondary)] p-6 lg:h-[340px] lg:flex-1">
|
|
<p className="font-inter text-paragraph-xxs text-[var(--color-content-default-tertiary)]">
|
|
{illustrationCaption}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
YourTurnView.displayName = "YourTurnView";
|
|
|
|
export default memo(YourTurnView);
|