pub.solar/_includes/Services.tsx
Benjamin Yule Bädorf 4e0d44af35
UX: improve navigation
This commit adds the links to the most important services back to the
homepage, and makes the titles of the services on the services overview
page links to that web service.

The reason for this is that I've noticed a bunch of people trying to
navigate to e.g. Nextcloud and just getting lost on the homepage.
2024-06-06 20:02:49 +02:00

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} class="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>;
})}
</>;
};