pub.solar/_includes/Services.tsx

import { md, mdi } from '../filters.ts';

const badges = [
  "support",
  "backups",
  "anonymousUsage",
  "zeroKnowledge",,
  "loggingMinimized",
  "decentralized",
  "storageEncrypted",
] as string[];

export default ({ data, language, className = '', }) => {
  const { services, strings } = data;
  return <>
    {services.map((service, i) => {
      return <section key={i} className={`${className} ps-service`}>
        <header className="ps-service--header">
          <h2 className="ps-service--title" id={service.id}>{service.name}</h2>

          <div className="ps-service--links">
            <a href={service.link} target="_blank">Visit service</a>
            {service.wiki ? <a href={service.wiki} target="_blank">Wiki help page</a> : null}
          </div>
        </header>

        <div
          className="ps-service--description"
          dangerouslySetInnerHTML={{ __html: md(service.description[language.slug]) }}
        ></div>
        
        <div className="ps-service--badges">
          {badges.map((badge, i) => {
            const { status, comment } = service[badge];

            return <details key={i} className={`ps-service--badge ps-service--badge_${status}`}>
              <summary className="ps-service--badge-header">
                <div className="ps-service--badge-title">{strings[badge].name[language.slug]}</div> 
                <div className="ps-service--badge-status">{strings.states[status][language.slug]}</div>
              </summary>

              <p dangerouslySetInnerHTML={{ __html: md(strings[badge].description[language.slug]) }}></p>
              
              <p dangerouslySetInnerHTML={{ __html: md(strings[badge].states[status][language.slug]) }}></p>

              {comment ? <p dangerouslySetInnerHTML={{ __html: md(comment[language.slug]) }}></p> : null }
            </details>;
          })}
        </div>

      </section>;
    })}
  </>;
};