feat: try add token tabs

src/components/TokenForm/index.tsx

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
-import { Paper, Typography } from '@material-ui/core';
+import { Paper, Typography, Tabs, Tab, TabPanel } from '@material-ui/core';
 import SearchRepo from '@/components/github/SearchRepo';
+import { SupportedStorageServices } from '@services/types';
 
-import { GithubTokenForm } from '../github/git-token-form';
-
-const SyncContainer = styled(Paper)`
+const Container = styled(Paper)`
   margin-top: 5px;
 `;
 const GithubRepoLink = styled(Typography)`
@@ -16,25 +15,39 @@ const GithubRepoLink = styled(Typography)`
   }
 `;
 
+const a11yProps = (
+  index: SupportedStorageServices,
+): {
+  id: string;
+  'aria-controls': string;
+} => ({
+  id: index,
+  'aria-controls': `simple-tabpanel-${index}`,
+});
+
+/**
+ * Create storage provider's token.
+ * @returns
+ */
 export function TokenForm(): JSX.Element {
+  const [currentTab, currentTabSetter] = useState<SupportedStorageServices>(SupportedStorageServices.github);
   return (
-    <SyncContainer elevation={2} square>
-    <GithubTokenForm>
-      {githubWikiUrl?.length > 0 ? (
-        <GithubRepoLink onClick={async () => await window.service.native.open(githubWikiUrl)} variant="subtitle2" align="center">
-          ({githubWikiUrl})
-        </GithubRepoLink>
-      ) : undefined}
-      <SearchRepo
-        githubWikiUrl={githubWikiUrl}
-        accessToken={accessToken}
-        githubWikiUrlSetter={githubWikiUrlSetter}
-        userInfo={userInfo}
-        currentTab={currentTab}
-        wikiFolderNameSetter={wikiFolderNameSetter}
-        isCreateMainWorkspace={isCreateMainWorkspace}
-      />
-    </GithubTokenForm>
-  </SyncContainer>
-  )
-}
+    <Container elevation={2} square>
+      <Tabs
+        orientation="vertical"
+        variant="scrollable"
+        value={currentTab}
+        onChange={(_event, newValue: SupportedStorageServices) => currentTabSetter(newValue)}
+        aria-label="Vertical tabs example">
+        <Tab label="GitHub" {...a11yProps(SupportedStorageServices.github)} />
+        <Tab label="GitLab" {...a11yProps(SupportedStorageServices.gitlab)} />
+      </Tabs>
+      <TabPanel value={currentTab} index={0}>
+        Item One
+      </TabPanel>
+      <TabPanel value={currentTab} index={1}>
+        Item Two
+      </TabPanel>
+    </Container>
+  );
+}