pub.solar/_includes/Services.tsx

56 lines
1.9 KiB
TypeScript

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">
<a href={service.link} className="ps-service--title-link" target="_blank">
<h2 className="ps-service--title" id={service.id}>{service.name} </h2>
</a>
<div className="ps-service--links">
{service.wiki ? <a href={service.wiki} target="_blank">{ strings.wiki_help_page[language.slug] }</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>;
})}
</>;
};