79 lines
3.2 KiB
TypeScript
79 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslation } from "../../../contexts/MessagesContext";
|
|
import ContentLockup from "../../type/ContentLockup";
|
|
import type { FeatureGridViewProps } from "./FeatureGrid.types";
|
|
|
|
/** Figma **Section / Feature-Grid** [18632:10668](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=18632-10668&m=dev). */
|
|
function FeatureGridView({
|
|
title,
|
|
subtitle,
|
|
className = "",
|
|
features,
|
|
labelledBy,
|
|
}: FeatureGridViewProps) {
|
|
const t = useTranslation();
|
|
const ariaLabel = t("featureGrid.ariaLabel");
|
|
const linkText = t("featureGrid.linkText");
|
|
const linkHref = t("featureGrid.linkHref");
|
|
|
|
return (
|
|
<section
|
|
className={`p-0 md:px-[var(--spacing-scale-024)] lg:p-[var(--spacing-scale-064)] ${className}`}
|
|
aria-labelledby={labelledBy}
|
|
aria-label={labelledBy ? undefined : ariaLabel}
|
|
>
|
|
<div
|
|
data-figma-node="18632-10668"
|
|
className="rounded-none bg-[var(--color-surface-default-secondary)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-032)] md:rounded-[var(--radius-measures-radius-large)] md:p-[var(--spacing-scale-048)] lg:p-[var(--spacing-scale-064)]"
|
|
>
|
|
<div className="mx-auto flex w-full flex-col gap-[var(--spacing-scale-040)] md:gap-[var(--spacing-scale-048)] lg:flex-row lg:items-center lg:gap-[var(--spacing-scale-064)]">
|
|
<div className="lg:min-w-0 lg:flex-1">
|
|
<ContentLockup
|
|
title={title}
|
|
subtitle={subtitle}
|
|
variant="feature"
|
|
linkText={linkText}
|
|
linkHref={linkHref}
|
|
titleId={labelledBy}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid w-full grid-cols-1 gap-[var(--spacing-scale-008)] md:grid-cols-2 md:gap-[var(--spacing-scale-016)] lg:flex-1">
|
|
{features.map((feature) => (
|
|
<div
|
|
key={feature.title}
|
|
className={`flex flex-col gap-[var(--spacing-scale-016)] p-[var(--spacing-scale-024)] ${feature.backgroundColor} rounded-[var(--radius-200)] md:rounded-[var(--radius-400)] lg:rounded-[var(--radius-measures-radius-large)]`}
|
|
>
|
|
<div className="size-[40px] shrink-0 overflow-clip">
|
|
{/* eslint-disable-next-line @next/next/no-img-element -- decorative Figma glyph */}
|
|
<img
|
|
src={feature.iconSrc}
|
|
alt=""
|
|
width={40}
|
|
height={40}
|
|
className="size-full object-contain"
|
|
role="presentation"
|
|
/>
|
|
</div>
|
|
<div className="flex w-full flex-col gap-[var(--spacing-scale-008)]">
|
|
<p className="font-semibold text-[17px] leading-[22px] text-[var(--color-content-inverse-primary)]">
|
|
{feature.title}
|
|
</p>
|
|
<p
|
|
className={`text-small-paragraph ${feature.descriptionClassName}`}
|
|
>
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default FeatureGridView;
|