community-rule/app/components/sections/FeatureGrid/FeatureGrid.view.tsx

"use client";

import Link from "next/link";
import { useTranslation } from "../../../contexts/MessagesContext";
import ContentLockup from "../../type/ContentLockup";
import type { Feature, FeatureGridViewProps } from "./FeatureGrid.types";

function FeatureTileBody({ feature }: { feature: Feature }) {
  return (
    <>
      <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(--space-200)]">
        <p className="font-semibold text-[17px] leading-[22px] text-[var(--color-content-invert-primary)]">
          {feature.title}
        </p>
        <p className={`text-small-paragraph ${feature.descriptionClassName}`}>
          {feature.description}
        </p>
      </div>
    </>
  );
}

/** 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(--space-600)] lg:p-[var(--space-1800)] ${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(--space-400)] py-[var(--space-800)] md:rounded-[var(--radius-500)] md:p-[var(--space-1200)] lg:p-[var(--space-1800)]"
      >
        <div className="mx-auto flex w-full flex-col gap-[var(--space-1000)] md:gap-[var(--space-1200)] lg:flex-row lg:items-center lg:gap-[var(--space-1800)]">
          <div className="lg:min-w-0 lg:flex-1">
            <ContentLockup
                title={title}
                subtitle={subtitle}
                variant="feature"
                linkText={linkText}
                linkHref={linkHref}
                titleId={labelledBy}
                headingLevel="h2"
              />
          </div>

          <div className="grid w-full grid-cols-1 gap-[var(--space-200)] md:grid-cols-2 md:gap-[var(--space-400)] lg:flex-1">
            {features.map((feature) => {
              const tileClassName = `flex flex-col gap-[var(--space-400)] p-[var(--space-600)] ${feature.backgroundColor} rounded-[var(--radius-200)] md:rounded-[var(--radius-400)] lg:rounded-[var(--radius-500)]`;
              if (feature.href) {
                return (
                  <Link
                    key={feature.title}
                    href={feature.href}
                    className={`${tileClassName} no-underline touch-manipulation [-webkit-tap-highlight-color:transparent] hover:opacity-90 focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-invert)]`}
                  >
                    <FeatureTileBody feature={feature} />
                  </Link>
                );
              }
              return (
                <div key={feature.title} className={tileClassName}>
                  <FeatureTileBody feature={feature} />
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

export default FeatureGridView;