adilallo
64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { memo, useMemo } from "react";
|
|
import FeatureGridView from "./FeatureGrid.view";
|
|
import type { FeatureGridProps, Feature } from "./FeatureGrid.types";
|
|
|
|
const FeatureGridContainer = memo<FeatureGridProps>(
|
|
({ title, subtitle, className = "" }) => {
|
|
const features: Feature[] = useMemo(
|
|
() => [
|
|
{
|
|
backgroundColor: "bg-[var(--color-surface-default-brand-royal)]",
|
|
labelLine1: "Decision-making",
|
|
labelLine2: "support",
|
|
panelContent: "/assets/Feature_Support.png",
|
|
ariaLabel: "Decision-making support tools",
|
|
href: "#decision-making",
|
|
},
|
|
{
|
|
backgroundColor: "bg-[#D1FFE2]",
|
|
labelLine1: "Values alignment",
|
|
labelLine2: "exercises",
|
|
panelContent: "/assets/Feature_Exercises.png",
|
|
ariaLabel: "Values alignment exercises",
|
|
href: "#values-alignment",
|
|
},
|
|
{
|
|
backgroundColor: "bg-[#F4CAFF]",
|
|
labelLine1: "Membership",
|
|
labelLine2: "guidance",
|
|
panelContent: "/assets/Feature_Guidance.png",
|
|
ariaLabel: "Membership guidance resources",
|
|
href: "#membership-guidance",
|
|
},
|
|
{
|
|
backgroundColor: "bg-[#CBDDFF]",
|
|
labelLine1: "Conflict resolution",
|
|
labelLine2: "tools",
|
|
panelContent: "/assets/Feature_Tools.png",
|
|
ariaLabel: "Conflict resolution tools",
|
|
href: "#conflict-resolution",
|
|
},
|
|
],
|
|
[],
|
|
);
|
|
|
|
const labelledBy = title ? "feature-grid-headline" : undefined;
|
|
|
|
return (
|
|
<FeatureGridView
|
|
title={title}
|
|
subtitle={subtitle}
|
|
className={className}
|
|
features={features}
|
|
labelledBy={labelledBy}
|
|
/>
|
|
);
|
|
},
|
|
);
|
|
|
|
FeatureGridContainer.displayName = "FeatureGrid";
|
|
|
|
export default FeatureGridContainer;
|