feat: integrate FAQ to webapp

src/components/AppRoot.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { MdSettings, MdHome } from 'react-icons/md';
+import { MdSettings, MdHome, MdQuestionAnswer } from 'react-icons/md';
 import { ChakraProvider, Tabs, TabList, TabPanels, Tab, TabPanel, Icon, chakra } from '@chakra-ui/react';
 
 import { MainTab } from '~/tabs/MainTab';
@@ -10,6 +10,7 @@ import { theme } from '~/theme';
 import { persistSettings } from '~/features/settings/persistSettings';
 import { setupStore } from '~/store';
 import { Footer } from '~/components/Footer';
+import { FaqTab } from '~/tabs/FaqTab';
 
 // Private to this file only.
 const store = setupStore();
@@ -30,6 +31,10 @@ export function AppRoot() {
               <Icon as={MdSettings} mr="1" />
               <chakra.span>设置</chakra.span>
             </Tab>
+            <Tab>
+              <Icon as={MdQuestionAnswer} mr="1" />
+              <chakra.span>问答</chakra.span>
+            </Tab>
           </TabList>
 
           <TabPanels overflow="auto" minW={0} flexDir="column" flex={1} display="flex">
@@ -39,6 +44,9 @@ export function AppRoot() {
             <TabPanel flex={1} display="flex">
               <SettingsTab />
             </TabPanel>
+            <TabPanel>
+              <FaqTab />
+            </TabPanel>
           </TabPanels>
         </Tabs>
 

src/components/HelpText/Header3.tsx

@@ -0,0 +1,26 @@
+import { Heading } from '@chakra-ui/react';
+import React from 'react';
+
+export interface Header3Props {
+  children: React.ReactNode;
+  id?: string;
+  className?: string;
+}
+
+export function Header3({ children, className, id }: Header3Props) {
+  return (
+    <Heading
+      as="h3"
+      id={id}
+      className={className}
+      pt={3}
+      pb={1}
+      borderBottom={'1px solid'}
+      borderColor="gray.300"
+      color="gray.800"
+      size="lg"
+    >
+      {children}
+    </Heading>
+  );
+}

src/components/HelpText/Header4.tsx

@@ -0,0 +1,16 @@
+import { Heading } from '@chakra-ui/react';
+import React from 'react';
+
+export interface Header4Props {
+  children: React.ReactNode;
+  id?: string;
+  className?: string;
+}
+
+export function Header4({ children, className, id }: Header4Props) {
+  return (
+    <Heading as="h4" id={id} className={className} pt={3} pb={1} color="gray.700" size="md">
+      {children}
+    </Heading>
+  );
+}

src/components/HelpText/HiWord.tsx

@@ -0,0 +1,9 @@
+import { Mark } from '@chakra-ui/react';
+
+export function HiWord({ children }: { children: React.ReactNode }) {
+  return (
+    <Mark bg="orange.100" borderRadius={5} px={2} mx={1}>
+      {children}
+    </Mark>
+  );
+}

src/components/HelpText/VQuote.tsx

@@ -0,0 +1,13 @@
+import { chakra, css } from '@chakra-ui/react';
+
+const cssUnselectable = css({ pointerEvents: 'none', userSelect: 'none' });
+
+export function VQuote({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <chakra.span css={cssUnselectable}>「</chakra.span>
+      {children}
+      <chakra.span css={cssUnselectable}>」</chakra.span>
+    </>
+  );
+}

src/components/ProjectIssue.tsx

@@ -0,0 +1,17 @@
+export interface ProjectIssueProps {
+  id: number | string;
+  title?: string;
+}
+
+export function ProjectIssue({ id, title }: ProjectIssueProps) {
+  return (
+    <a
+      rel="noopener noreferrer nofollow"
+      target="_blank"
+      href={`https://git.unlock-music.dev/um/um-react/issues/${id}`}
+    >
+      {`#${id}`}
+      {title && ` - ${title}`}
+    </a>
+  );
+}