Add new dependencies and update routing

package.json

@@ -19,10 +19,14 @@
     "@emotion/styled": "^11.11.0",
     "axios": "^1.5.0",
     "framer-motion": "^10.16.4",
+    "localforage": "^1.10.0",
+    "match-sorter": "^6.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
-    "recoil": "^0.7.7"
+    "react-router-dom": "^6.20.0",
+    "recoil": "^0.7.7",
+    "sort-by": "^1.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.tsx

@@ -1,10 +1,10 @@
-import { Box, Center, Heading, Image, Link, Text, Flex, IconButton, Highlight  } from '@chakra-ui/react';
+import { Box, Center, Heading, Image, Link, Text, Highlight  } from '@chakra-ui/react';
 import { useEffect } from 'react';
 import { useRecoilState } from 'recoil';
-import { FaGithub } from "react-icons/fa";
 import { platformLatestData, requestCount } from './states';
 import { getLatestVersionDataFOrThisPlatform } from './libs/helper';
 import DownloadButton from './components/DownloadButton';
+import Header from './components/Header';
 
 function App() {
   const [platformLatestDataInfo, setPlatformLatestData] = useRecoilState(platformLatestData);
@@ -50,24 +50,7 @@ function App() {
 
   return (
     <div className="">
-      <Box w="100%" p={2} h="10vh">
-        <Flex>
-          <Box flexBasis='70%'>
-          </Box>
-          <Box flexBasis='30%' p={2} h="100%">
-            <Center w='100%' h="100%">
-              <Link href="https://github.com/codad5/google-task-tauri" isExternal>
-                <IconButton
-                  variant='outline'
-                  colorScheme='teal'
-                  aria-label='Send email'
-                  icon={<FaGithub />}
-                  />
-              </Link>
-            </Center>
-          </Box>
-        </Flex>
-      </Box>
+      <Header />
       <Box w="100%" p={0} h="90vh" pt="10vh">
         <Box w="100%" p={0} h="40vh">
             <Box w="100%" p={0} >

src/components/Header.tsx

@@ -0,0 +1,43 @@
+import { Box, Flex, Center, IconButton, Link } from '@chakra-ui/react'
+import { Link as ReactRouterLink } from "react-router-dom";
+import { FaGithub } from "react-icons/fa";
+
+export default function Header() {
+    return (
+        <Box w="100%" p={2} h="10vh">
+        <Flex justifyContent='space-between' alignItems='center' h="100%">
+          <Box flexBasis='50%'>
+          </Box>
+            <Box flexBasis='50%' p={2} h="100%">
+                <Flex>
+                <Center w='100%' h="100%" flexBasis='50%' px={2} >
+                    <Link href="/" textDecoration='underline' to="/"  as={ReactRouterLink}>
+                        Home
+                    </Link>
+                </Center>
+                <Center w='100%' h="100%" flexBasis='50%' px={2} >
+                    <Link href="/privacy-policy" textDecoration='underline' to="/privacy-policy"  as={ReactRouterLink}>
+                        Privacy Policy
+                    </Link>
+                </Center>
+                <Center w='100%' h="100%" flexBasis='50%' px={2} >
+                    <Link href="/tos" textDecoration='underline' to="/tos"  as={ReactRouterLink}>
+                        Terms of Service
+                    </Link>
+                </Center>
+                <Center h="100%">
+                    <Link href="https://github.com/codad5/google-task-tauri" isExternal>
+                        <IconButton
+                        variant='outline'
+                        colorScheme='teal'
+                        aria-label='Send email'
+                        icon={<FaGithub />}
+                        />
+                    </Link>
+                </Center>
+            </Flex>
+          </Box>
+        </Flex>
+      </Box>
+    )
+}