Enterprise-CMCS/macpro-mako

View on GitHub
react-app/src/features/faq/content/chpRenderSection.tsx

Summary

Maintainability
A
0 mins
Test Coverage
A
100%
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
export interface Template {
  title: string;
  text: string;
  href: string;
  subtext?: string[];
}

export const renderSection = (
  title: string,
  templates: Template[],
  filterCondition: (template: Template) => boolean,
  ulClassName: string = "",
) => (
  <>
    <p>{title}</p>
    <ul className={cn("list-disc pl-6 space-y-2", ulClassName)}>
      {templates.filter(filterCondition).map((template) => (
        <li key={template.title}>
          <a
            href={template.href}
            target="_blank"
            rel="noopener noreferrer"
            className="text-blue-600"
          >
            {template.title}: {template.text}
          </a>
          {template.subtext && template.subtext.length > 0 && (
            <ul className="list-disc pl-6 space-y-1">
              {template.subtext.map((sub, index) => (
                <li key={index} className="text-sm text-gray-600">
                  {sub}
                </li>
              ))}
            </ul>
          )}
        </li>
      ))}
    </ul>
  </>
);