Skip to content

feat: localize Help page strings into react-i18next #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Meshmulla merged 2 commits into from
Jul 16, 2026
Merged

feat: localize Help page strings into react-i18next #22

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9124fd9
feat: localize Help page strings into react-i18next
vrickish Jul 16, 2026
2a7e1f8
Merge branch 'main' into vrick_fix_fe_5
Meshmulla Jul 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 25 additions & 24 deletions src/pages/Help.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import {
faqItems,
helpArticles,
Expand All @@ -25,6 +26,7 @@ function saveRatings(ratings: RatingMap): void {
}

export default function Help() {
const { t } = useTranslation();
const [query, setQuery] = useState("");
const [selectedCategory, setSelectedCategory] = useState<HelpCategory | "all">("all");
const [selectedArticleId, setSelectedArticleId] = useState(helpArticles[0]?.id ?? "");
Expand Down Expand Up @@ -79,17 +81,16 @@ export default function Help() {
return (
<div className="space-y-8">
<header className="space-y-3">
<h1 className="text-3xl font-bold text-stellar-text-primary">Help Center</h1>
<h1 className="text-3xl font-bold text-stellar-text-primary">{t("help.title")}</h1>
<p className="text-stellar-text-secondary max-w-3xl">
Search documentation, browse FAQs, and find contextual guidance for dashboard operations,
integrations, and incident response.
{t("help.intro")}
</p>
</header>

<section className="grid grid-cols-1 lg:grid-cols-4 gap-6">
<aside className="lg:col-span-1 space-y-4">
<div className="rounded-lg border border-stellar-border bg-stellar-card p-4">
<h2 className="text-sm font-semibold uppercase tracking-wide text-stellar-text-secondary" id="help-categories-label">Categories</h2>
<h2 className="text-sm font-semibold uppercase tracking-wide text-stellar-text-secondary" id="help-categories-label">{t("help.categories")}</h2>
<Tabs
activeTab={selectedCategory}
onTabChange={(id) => setSelectedCategory(id as HelpCategory | "all")}
Expand All @@ -105,7 +106,7 @@ export default function Help() {
inactiveClassName="text-stellar-text-secondary hover:bg-stellar-dark hover:text-stellar-text-primary border-transparent"
className="rounded-md px-3 py-2 text-left text-sm"
>
All topics
{t("help.allTopics")}
</Tab>
{helpCategories.map((category) => (
<Tab
Expand All @@ -129,16 +130,16 @@ export default function Help() {
</div>

<div className="rounded-lg border border-stellar-border bg-stellar-card p-4">
<h2 className="text-sm font-semibold uppercase tracking-wide text-stellar-text-secondary">Getting Started</h2>
<h2 className="text-sm font-semibold uppercase tracking-wide text-stellar-text-secondary">{t("help.gettingStarted")}</h2>
<ol className="mt-3 space-y-2 text-sm text-stellar-text-secondary list-decimal list-inside">
<li>Open Dashboard and verify live data connections.</li>
<li>Configure notification thresholds in Settings.</li>
<li>Enable API integrations and webhook callbacks.</li>
<li>{t("help.step1")}</li>
<li>{t("help.step2")}</li>
<li>{t("help.step3")}</li>
</ol>
</div>

<div className="rounded-lg border border-stellar-border bg-stellar-card p-4">
<h2 className="text-sm font-semibold uppercase tracking-wide text-stellar-text-secondary">Video Tutorials</h2>
<h2 className="text-sm font-semibold uppercase tracking-wide text-stellar-text-secondary">{t("help.videoTutorials")}</h2>
<div className="mt-3 space-y-2 text-sm">
{helpArticles
.filter((article) => Boolean(article.videoUrl))
Expand All @@ -160,13 +161,13 @@ export default function Help() {
<div className="lg:col-span-3 space-y-6">
<section className="rounded-lg border border-stellar-border bg-stellar-card p-4">
<label htmlFor="help-search" className="text-sm font-medium text-stellar-text-secondary">
Search documentation
{t("help.searchLabel")}
</label>
<input
id="help-search"
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="Search by keyword, topic, or workflow"
placeholder={t("help.searchPlaceholder")}
className="mt-2 w-full rounded-md border border-stellar-border bg-stellar-dark px-3 py-2 text-stellar-text-primary focus:outline-none focus:ring-2 focus:ring-stellar-blue"
/>

Expand All @@ -192,15 +193,15 @@ export default function Help() {
{selectedArticle && (
<article className="rounded-lg border border-stellar-border bg-stellar-card p-6 space-y-4">
<header className="space-y-1">
<p className="text-xs uppercase tracking-wide text-stellar-text-secondary">Documentation Viewer</p>
<p className="text-xs uppercase tracking-wide text-stellar-text-secondary">{t("help.documentationViewer")}</p>
<h2 className="text-2xl font-semibold text-stellar-text-primary">{selectedArticle.title}</h2>
<p className="text-sm text-stellar-text-secondary">{selectedArticle.summary}</p>
</header>

<p className="text-stellar-text-secondary">{selectedArticle.content}</p>

<div className="border-t border-stellar-border pt-4">
<p className="text-sm font-medium text-stellar-text-primary">Rate this article</p>
<p className="text-sm font-medium text-stellar-text-primary">{t("help.rateArticle")}</p>
<div className="mt-2 flex items-center gap-2">
{[1, 2, 3, 4, 5].map((value) => (
<button
Expand All @@ -212,7 +213,7 @@ export default function Help() {
? "border-stellar-blue bg-stellar-blue text-stellar-ink"
: "border-stellar-border text-stellar-text-secondary hover:border-stellar-blue"
}`}
aria-label={`Rate ${value} star`}
aria-label={t("help.rateStar", { value })}
>
{value}
</button>
Expand All @@ -222,7 +223,7 @@ export default function Help() {

{relatedArticles.length > 0 && (
<div className="border-t border-stellar-border pt-4">
<p className="text-sm font-medium text-stellar-text-primary">Related articles</p>
<p className="text-sm font-medium text-stellar-text-primary">{t("help.relatedArticles")}</p>
<div className="mt-2 flex flex-wrap gap-2">
{relatedArticles.map((article) => (
<button
Expand All @@ -241,7 +242,7 @@ export default function Help() {
)}

<section className="rounded-lg border border-stellar-border bg-stellar-card p-6">
<h2 className="text-lg font-semibold text-stellar-text-primary">FAQ</h2>
<h2 className="text-lg font-semibold text-stellar-text-primary">{t("help.faq")}</h2>
<div className="mt-4 space-y-3">
{filteredFaq.map((item) => (
<details key={item.id} className="rounded-md border border-stellar-border p-3">
Expand All @@ -255,22 +256,22 @@ export default function Help() {
</section>

<section className="rounded-lg border border-stellar-border bg-stellar-card p-6 space-y-4">
<h2 className="text-lg font-semibold text-stellar-text-primary">Contact Support and Feedback</h2>
<h2 className="text-lg font-semibold text-stellar-text-primary">{t("help.contactTitle")}</h2>
<p className="text-sm text-stellar-text-secondary">
Share what is missing or confusing in the docs. The team reviews feedback during each sprint.
{t("help.contactDescription")}
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<input
value={contactEmail}
onChange={(event) => setContactEmail(event.target.value)}
placeholder="Email (optional)"
placeholder={t("help.emailPlaceholder")}
className="rounded-md border border-stellar-border bg-stellar-dark px-3 py-2 text-stellar-text-primary focus:outline-none focus:ring-2 focus:ring-stellar-blue"
/>
<a
href="mailto:support@swipely.io"
className="rounded-md border border-stellar-border px-3 py-2 text-center text-sm text-stellar-blue hover:bg-stellar-dark"
>
Contact support directly
{t("help.contactDirectly")}
</a>
</div>
<textarea
Expand All @@ -279,7 +280,7 @@ export default function Help() {
setFeedback(event.target.value);
setFeedbackSent(false);
}}
placeholder="Tell us what should be improved"
placeholder={t("help.feedbackPlaceholder")}
rows={4}
className="w-full rounded-md border border-stellar-border bg-stellar-dark px-3 py-2 text-stellar-text-primary focus:outline-none focus:ring-2 focus:ring-stellar-blue"
/>
Expand All @@ -288,9 +289,9 @@ export default function Help() {
onClick={submitFeedback}
className="rounded-md bg-stellar-blue px-4 py-2 text-sm font-medium text-stellar-ink hover:bg-stellar-blue/90"
>
Send feedback
{t("help.sendFeedback")}
</button>
{feedbackSent && <p className="text-sm text-green-400">Feedback received. Thank you.</p>}
{feedbackSent && <p className="text-sm text-green-400">{t("help.feedbackReceived")}</p>}
</section>
</div>
</section>
Expand Down
Loading