78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import Button from "../../buttons/Button";
|
|
import type { NarrativeBlockViewProps } from "./NarrativeBlock.types";
|
|
|
|
function NarrativeBlockView({
|
|
heading,
|
|
paragraphs,
|
|
addHeading,
|
|
addLine,
|
|
shareExperiences,
|
|
helpBuild,
|
|
helpBuildHref,
|
|
onShareExperiences,
|
|
}: NarrativeBlockViewProps) {
|
|
return (
|
|
<section
|
|
data-figma-node="24237:1241"
|
|
className="flex flex-col items-center gap-10 border-b border-[var(--color-border-default-secondary)] bg-black px-[var(--space-400)] py-16 lg:gap-14 lg:px-[var(--space-2400)] lg:py-[var(--space-3000)]"
|
|
aria-labelledby="about-narrative-heading"
|
|
>
|
|
<div className="flex w-full max-w-[800px] flex-col gap-8 lg:gap-10">
|
|
<h2
|
|
id="about-narrative-heading"
|
|
className="font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)] lg:text-heading-xxl"
|
|
>
|
|
{heading}
|
|
</h2>
|
|
<div className="flex flex-col gap-8">
|
|
{paragraphs.map((paragraph) => (
|
|
<p
|
|
key={paragraph}
|
|
className="font-inter text-paragraph-l text-[var(--color-content-default-secondary)] lg:text-paragraph-xl"
|
|
>
|
|
{paragraph}
|
|
</p>
|
|
))}
|
|
</div>
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex flex-col gap-2">
|
|
<h3 className="font-bricolage-grotesque text-display-xs text-[var(--color-content-default-primary)]">
|
|
{addHeading}
|
|
</h3>
|
|
<p className="font-inter text-paragraph-s text-[var(--color-content-default-secondary)]">
|
|
{addLine}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-4">
|
|
<Button
|
|
buttonType="filled"
|
|
palette="default"
|
|
size="medium"
|
|
onClick={onShareExperiences}
|
|
>
|
|
{shareExperiences}
|
|
</Button>
|
|
<Button
|
|
buttonType="filled"
|
|
palette="default"
|
|
size="medium"
|
|
href={helpBuildHref}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{helpBuild}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
NarrativeBlockView.displayName = "NarrativeBlockView";
|
|
|
|
export default memo(NarrativeBlockView);
|