refactor feature folders by code type

2026-04-28 14:14:15 +02:00
parent eebeee9ed8
commit 2251a81ac1
22 changed files with 24 additions and 24 deletions
@@ -0,0 +1,51 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { useDocsLanguage } from "@/hooks/docs/useDocsLanguage";
+
+interface DocsDocumentProps {
+  title: string;
+  meta: string;
+  content: string;
+  frContent: string;
+}
+
+export function DocsDocument({
+  title,
+  meta,
+  content,
+  frContent,
+}: DocsDocumentProps): React.JSX.Element {
+  const { language, toggleLanguage } = useDocsLanguage();
+  const translatedContent = language === "fr" ? frContent : content;
+
+  return (
+    <div className="docs-content">
+      <header className="docs-content__header">
+        <span>{title}</span>
+        <button
+          className="docs-language-toggle"
+          type="button"
+          onClick={toggleLanguage}
+          aria-label="Changer la langue de la documentation"
+        >
+          <span className={language === "fr" ? "is-active" : undefined}>
+            FR
+          </span>
+          <span className={language === "en" ? "is-active" : undefined}>
+            EN
+          </span>
+        </button>
+      </header>
+
+      <article className="docs-section">
+        <div className="docs-section__eyebrow">
+          <span>{title}</span>
+          <span>{meta}</span>
+        </div>
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+          {translatedContent}
+        </ReactMarkdown>
+      </article>
+    </div>
+  );
+}
@@ -0,0 +1,53 @@
+import { Link, Outlet } from "@tanstack/react-router";
+import { Home } from "lucide-react";
+import { docGroups } from "@/data/docs/docsSections";
+import { DocsLanguageProvider } from "@/providers/docs/DocsLanguageProvider";
+
+export function DocsLayout(): React.JSX.Element {
+  return (
+    <DocsLanguageProvider>
+      <main className="docs-page">
+        <aside className="docs-sidebar" aria-label="Documentation">
+          <header className="docs-sidebar__header">
+            <h1>Folders</h1>
+            <Link
+              className="docs-home-link"
+              to="/"
+              aria-label="Retour à l'accueil"
+            >
+              <Home size={18} strokeWidth={2.25} aria-hidden="true" />
+            </Link>
+          </header>
+
+          <nav>
+            {docGroups.map((group) => (
+              <section className="docs-nav-group" key={group.label}>
+                <h2>{group.label}</h2>
+
+                {group.sections.map((section) => (
+                  <Link
+                    activeProps={{
+                      className: "docs-nav-item docs-nav-item--active",
+                    }}
+                    activeOptions={{ exact: true }}
+                    className="docs-nav-item"
+                    key={section.path}
+                    to={section.path}
+                  >
+                    <span>
+                      <strong>{section.title}</strong>
+                      <small>{section.subtitle}</small>
+                    </span>
+                    <span className="docs-nav-item__meta">{section.meta}</span>
+                  </Link>
+                ))}
+              </section>
+            ))}
+          </nav>
+        </aside>
+
+        <Outlet />
+      </main>
+    </DocsLanguageProvider>
+  );
+}