feat(kgm): kgm v5 (aka. kgg) support

src/tabs/FaqTab.tsx

@@ -1,8 +1,23 @@
+import { FC, Fragment } from 'react';
 import { Center, Container, Heading, Link, ListItem, UnorderedList } from '@chakra-ui/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: FC;
+};
+
+const faqEntries: FAQEntry[] = [
+  { id: 'qqmusic', title: 'QQ 音乐', Help: QQMusicFAQ },
+  { id: 'kuwo', title: '酷我音乐', Help: KuwoFAQ },
+  { id: 'kugou', title: '酷狗音乐', Help: KugouFAQ },
+  { id: 'other', title: '其它问题', Help: OtherFAQ },
+];
 
 export function FaqTab() {
   return (
@@ -12,22 +27,18 @@ export function FaqTab() {
       </Center>
       <Header3>答疑目录</Header3>
       <UnorderedList>
-        <ListItem>
-          <Link href="#faq-qqmusic">QQ 音乐</Link>
-        </ListItem>
-        <ListItem>
-          <Link href="#faq-kuwo">酷我音乐</Link>
-        </ListItem>
-        <ListItem>
-          <Link href="#faq-other">其它问题</Link>
-        </ListItem>
+        {faqEntries.map(({ id, title }) => (
+          <ListItem key={id}>
+            <Link href={`#faq-${id}`}>{title}</Link>
+          </ListItem>
+        ))}
       </UnorderedList>
-      <Header3 id="faq-qqmusic">QQ 音乐</Header3>
-      <QQMusicFAQ />
-      <Header3 id="faq-kuwo">酷我音乐</Header3>
-      <KuwoFAQ />
-      <Header3 id="faq-other">其它问题</Header3>
-      <OtherFAQ />
+      {faqEntries.map(({ id, title, Help }) => (
+        <Fragment key={id}>
+          <Header3 id={`faq-${id}`}>{title}</Header3>
+          <Help />
+        </Fragment>
+      ))}
     </Container>
   );
 }