nextui/apps/docs/components/marketing/features-grid.tsx

"use client";

import type {ReactNode} from "react";
import type {LinkProps, SlotsToClasses} from "@heroui/react";

import React from "react";
import {usePostHog} from "posthog-js/react";
import {tv} from "tailwind-variants";
import {Card, CardHeader, CardBody} from "@heroui/react";
import {useRouter} from "next/navigation";
import {LinkIcon} from "@heroui/shared-icons";

const styles = tv({
  slots: {
    base: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4",
    card: "border-transparent bg-white/5 dark:bg-default-400/10 backdrop-blur-lg backdrop-saturate-[1.8]",
    header: "gap-2 pb-0",
    body: "",
    iconWrapper:
      "flex justify-center p-2 rounded-full items-center bg-secondary-100/80 text-pink-500",
    title: "text-base font-semibold",
    description: "font-normal text-medium text-default-500",
  },
});

export type FeaturesGridSlots = keyof ReturnType<typeof styles>;

export interface Feature extends LinkProps {
  title: string;
  icon: ReactNode;
  description?: string | ReactNode;
}

interface FeaturesGridProps {
  features: Feature[];
  classNames?: SlotsToClasses<FeaturesGridSlots>;
}

export const FeaturesGrid: React.FC<FeaturesGridProps> = ({features, classNames, ...props}) => {
  const router = useRouter();

  const posthog = usePostHog();

  const slots = styles();

  const handleClick = (feat: Feature) => {
    posthog.capture("FeaturesGrid - Click", {
      name: feat.title,
      action: "click",
      category: "docs",
      data: feat.href ?? "",
    });

    if (!feat.href) {
      return;
    }

    if (feat.isExternal) {
      window.open(feat.href, "_blank");

      return;
    }
    router.push(feat.href);
  };

  return (
    <div className={slots.base({class: classNames?.base})} {...props}>
      {features.map((feat: Feature, index: number) => (
        <Card
          key={`${feat.title}_${index}`}
          isBlurred
          className={slots.card({class: classNames?.card})}
          isPressable={!!feat.href}
          onPress={() => handleClick(feat)}
        >
          <CardHeader className={slots.header({class: classNames?.header})}>
            <div className={slots.iconWrapper({class: classNames?.iconWrapper})}>{feat.icon}</div>
            <p className={slots.title({class: classNames?.title})}>{feat.title}</p>
            {feat.isExternal && <LinkIcon height={18} width={18} />}
          </CardHeader>
          {feat.description ? (
            <CardBody className={slots.body({class: classNames?.body})}>
              <p className={slots.description({class: classNames?.description})}>
                {feat.description}
              </p>
            </CardBody>
          ) : null}
        </Card>
      ))}
    </div>
  );
};