feat(LinkList): add customizable links

src/shared/components/LinkList.tsx

@@ -1,14 +1,19 @@
 import Sites from '@Data/sites.json'
 import { Grid } from "@mui/material";
 import LinkCard from "./linkcard";
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { ConfigurableLinksContext } from '../contexts/ConfiguarableLinksContext';
+import { HomepageLink } from '../classes/HomeplageLink';
 
 export default function LinkList() {
-    const {configurableLinks, setConfigurableLinks} = useContext(ConfigurableLinksContext)
+    const [configurableLinks, setConfigurableLinks] = useState<Array<HomepageLink>>(
+        JSON.parse(localStorage.getItem("configurableLinks") as string) as Array<HomepageLink> ??
+        new Array<HomepageLink>
+    )
+
 
     return (
-        <Grid container spacing={2}>
+        <Grid container spacing={2} justifyContent={"center"}>
             {Sites.sites.map(site => (
                 <Grid item key={site.title}>
                     <LinkCard

src/site/App.tsx

@@ -1,5 +1,5 @@
 import Sites from '@Data/sites.json'
-import { Box, Button, debounce, FormLabel, Grid, OutlinedInput, styled, TextField, Typography } from '@mui/material'
+import { Box, Button, Container, debounce, FormLabel, Grid, OutlinedInput, styled, TextField, Typography } from '@mui/material'
 import React, { useContext, useState } from 'react'
 import MenuBar from '../shared/components/MenuBar'
 import LinkCard from '../shared/components/linkcard'
@@ -27,14 +27,14 @@ function App() {
         <>
         <MenuBar />
         <MenuDrawer />
-        <Box sx={{m: 4}} maxWidth="lg">
+        <Container sx={{ mt: 4, mb: 4 }} maxWidth="lg">
             {currentPage === 'home' ? (
                 <LinkList />
             ): null}
             {currentPage === 'edit' ? (
                 <SettingsPage />
             ): null}
-        </Box>
+        </Container>
         <AppSnackBar />
         </>
     )