put Sources and Extensions in the same screen

src/screens/manga/Browse.tsx

@@ -5,8 +5,45 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useState } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import TabPanel from 'components/util/TabPanel';
+import Sources from 'screens/manga/Sources';
+import Extensions from 'screens/manga/Extensions';
+
+const useStyles = makeStyles({
+    noCapitalize: {
+        textTransform: 'none',
+    },
+});
 
 export default function Browse() {
-    return <h1>fek</h1>;
+    const classes = useStyles();
+    const [tabNum, setTabNum] = useState<number>(0);
+
+    return (
+        <>
+            <Tabs
+                value={tabNum}
+                onChange={(e, newTab) => setTabNum(newTab)}
+                indicatorColor="primary"
+                textColor="primary"
+                centered
+                variant="fullWidth"
+                scrollButtons
+                allowScrollButtonsMobile
+            >
+                <Tab className={classes.noCapitalize} label="Sources" />
+                <Tab className={classes.noCapitalize} label="Extensions" />
+            </Tabs>
+            <TabPanel index={0} currentIndex={tabNum}>
+                <Sources />
+            </TabPanel>
+            <TabPanel index={1} currentIndex={tabNum}>
+                <Extensions />
+            </TabPanel>
+        </>
+    );
 }

src/screens/manga/Sources.tsx

@@ -37,7 +37,7 @@ function groupByLang(sources: ISource[]) {
     return result;
 }
 
-export default function MangaSources() {
+export default function Sources() {
     const { setTitle, setAction } = useContext(NavbarContext);
 
     const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', sourceDefualtLangs());