87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
import { A, useParams } from '@solidjs/router';
|
|
import { getArticleBySlug } from '~/lib/help-center';
|
|
import PublicHeader from '~/components/PublicHeader';
|
|
|
|
function categoryTitle(input: string) {
|
|
return input
|
|
.split('-')
|
|
.filter(Boolean)
|
|
.map((chunk) => chunk[0].toUpperCase() + chunk.slice(1))
|
|
.join(' ');
|
|
}
|
|
|
|
export default function HelpCenterArticlePage() {
|
|
const params = useParams();
|
|
const article = getArticleBySlug(params.slug || '');
|
|
|
|
if (!article) {
|
|
return (
|
|
<main class="lp-main">
|
|
<div class="lp-bg" aria-hidden="true">
|
|
<div class="lp-dark-base" />
|
|
<div class="lp-mesh" />
|
|
<div class="lp-ribbon" />
|
|
<div class="lp-noise" />
|
|
</div>
|
|
<div class="lp-content">
|
|
<PublicHeader />
|
|
<section class="public-section scene-light">
|
|
<div class="container panel panel-light">
|
|
<h1 class="title">Article not found</h1>
|
|
<p class="subtitle">The requested Help Center article is unavailable.</p>
|
|
<div class="actions">
|
|
<A class="btn primary" href="/help-center">Back to Help Center</A>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<main class="lp-main">
|
|
<div class="lp-bg" aria-hidden="true">
|
|
<div class="lp-dark-base" />
|
|
<div class="lp-mesh" />
|
|
<div class="lp-ribbon" />
|
|
<div class="lp-noise" />
|
|
</div>
|
|
<div class="lp-content">
|
|
<PublicHeader />
|
|
<section class="public-section scene-light">
|
|
<div class="container panel panel-light" style={{ 'max-width': '960px' }}>
|
|
<p class="eyebrow">{categoryTitle(article.categoryKey)}</p>
|
|
<h1 class="title">{article.title}</h1>
|
|
<p class="subtitle">{article.summary}</p>
|
|
|
|
<div class="help-article-tags" style={{ 'margin-top': '10px' }}>
|
|
{article.tags.map((tag) => <span class="help-article-tag">{tag}</span>)}
|
|
</div>
|
|
<p class="note">Updated {new Date(article.updatedAt).toLocaleDateString()}</p>
|
|
|
|
<div class="help-article-body">
|
|
<p>{article.content}</p>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<A class="btn" href="/help-center">Back to Help Center</A>
|
|
<A class="btn primary" href="/auth/register?intent=customer&redirect=/users/onboarding/customer">Get Started</A>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="public-section scene-light">
|
|
<div class="container panel panel-light" style={{ 'max-width': '960px' }}>
|
|
<h2>Need more help?</h2>
|
|
<p class="sub">If this article does not solve your issue, send your question with context to support.</p>
|
|
<div class="actions">
|
|
<a class="btn primary" href="mailto:support@nxtgauge.com?subject=Nxtgauge%20Help%20Center%20Question">Email support</a>
|
|
<A class="btn" href="/help-center">Browse more articles</A>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|