55 lines
1.9 KiB
TypeScript
55 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">
|
|
<h2 className="ps-service--title" id={service.id}>{service.name}</h2>
|
|
|
|
<div className="ps-service--links">
|
|
<a href={service.link} target="_blank">{ strings.visit_service[language.slug] }</a>
|
|
{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>;
|
|
})}
|
|
</>;
|
|
};
|