43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import type { CreditsViewProps } from "./Credits.types";
|
|
|
|
function CreditsView({ heading, rows }: CreditsViewProps) {
|
|
return (
|
|
<section
|
|
data-figma-node="24240:1547"
|
|
className="flex flex-col items-center bg-black px-[var(--space-400)] py-16 md:px-16 lg:px-20 lg:py-[var(--space-3000)]"
|
|
aria-labelledby="about-credits-heading"
|
|
>
|
|
<div className="flex w-full max-w-[800px] flex-col items-center gap-12">
|
|
<h2
|
|
id="about-credits-heading"
|
|
className="text-center font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)]"
|
|
>
|
|
{heading}
|
|
</h2>
|
|
<dl className="m-0 flex w-full flex-col gap-5">
|
|
{rows.map((row) => (
|
|
<div
|
|
key={row.role}
|
|
className="flex flex-col gap-1 border-b border-[var(--color-border-default-tertiary)] pb-4"
|
|
>
|
|
<dt className="font-inter text-label-caps-xxs text-[var(--color-content-default-tertiary)] uppercase">
|
|
{row.role}
|
|
</dt>
|
|
<dd className="m-0 font-inter text-paragraph-s text-[var(--color-content-default-primary)]">
|
|
{row.name}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
CreditsView.displayName = "CreditsView";
|
|
|
|
export default memo(CreditsView);
|