refactor: deep link for faq

src/tabs/FaqTab.tsx

@@ -1,43 +1,27 @@
-import { ComponentType, Fragment } from 'react';
-import { Header3 } from '~/components/HelpText/Headers';
-import { KuwoFAQ } from '~/faq/KuwoFAQ';
-import { OtherFAQ } from '~/faq/OtherFAQ';
-import { QQMusicFAQ } from '~/faq/QQMusicFAQ';
-import { KugouFAQ } from '~/faq/KugouFAQ.tsx';
-
-type FAQEntry = {
-  id: string;
-  title: string;
-  Help: ComponentType;
-};
-
-const faqEntries: FAQEntry[] = [
-  { id: 'qqmusic', title: 'QQ 音乐', Help: QQMusicFAQ },
-  { id: 'kuwo', title: '酷我音乐', Help: KuwoFAQ },
-  { id: 'kugou', title: '酷狗音乐', Help: KugouFAQ },
-  { id: 'other', title: '其它问题', Help: OtherFAQ },
-];
+import { Outlet } from 'react-router';
+import { FAQ_PAGES } from '~/faq/FAQPages';
+import { ResponsiveNav } from '~/features/nav/ResponsiveNav';
+import { TabNavLink } from '~/features/nav/TabNavLink';
 
 export function FaqTab() {
   return (
-    <section className="container pb-10 px-4">
-      <h2 className="text-3xl font-bold text-center">常见问题解答</h2>
-      <Header3>答疑目录</Header3>
-      <ul className="list-disc pl-6">
-        {faqEntries.map(({ id, title }) => (
-          <li key={id}>
-            <a className="link link-info no-underline" href={`#faq-${id}`}>
-              {title}
-            </a>
-          </li>
-        ))}
-      </ul>
-      {faqEntries.map(({ id, title, Help }) => (
-        <Fragment key={id}>
-          <Header3 id={`faq-${id}`}>{title}</Header3>
-          <Help />
-        </Fragment>
-      ))}
-    </section>
+    <div className="flex flex-col flex-1 container w-full">
+      <ResponsiveNav
+        className="grow h-full overflow-auto"
+        contentClassName="flex flex-col overflow-auto pl-6"
+        navigationClassName="overflow-x-auto pb-[2px] md:pb-0 h-full md:items-center [&]:md:flex"
+        navigation={
+          <div role="tablist" className="tabs gap-1 flex-nowrap md:flex-col grow items-center">
+            {FAQ_PAGES.map(({ id, name }) => (
+              <TabNavLink key={id} to={`/questions/${id}`}>
+                {name}
+              </TabNavLink>
+            ))}
+          </div>
+        }
+      >
+        <Outlet />
+      </ResponsiveNav>
+    </div>
   );
 }