From 78c851aef5afa7d6955aadc82ca990d3bb7f18c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20Akg=C3=BCl?= <s86116@bht-berlin.de>
Date: Sat, 20 May 2023 20:18:18 +0200
Subject: [PATCH] work base

---
 app/(auth)/login/page.tsx                     |   7 +
 app/(auth)/signup/page.tsx                    |   7 +
 app/(content)/(blog)/blogs/page.tsx           |   7 +
 .../(community)/communities/page.tsx          |   7 +
 .../(gaming)}/games/[gameid]/loading.tsx      |   0
 .../(gaming)}/games/[gameid]/page.tsx         |   0
 app/(content)/(gaming)/games/layout.tsx       |  31 ++
 .../(gaming)}/games/loading.tsx               |   0
 app/(content)/(gaming)/games/page.tsx         |  70 ++++
 app/(content)/(thread)/threads/page.tsx       |   7 +
 app/(content)/(user)/[userid]/page.tsx        |   8 +
 app/(content)/(user)/friends/page.tsx         |   7 +
 app/(content)/(user)/notifications/page.tsx   |   7 +
 app/(content)/(user)/settings/page.tsx        |   7 +
 app/games/page.tsx                            |  65 ----
 app/layout.tsx                                |  50 ++-
 app/theme.tsx                                 |  36 ++
 components/Dashboard.tsx                      |  99 ++++++
 {app/games => components}/Game.tsx            |   0
 components/Header.tsx                         |  54 +++
 components/Search.tsx                         |  38 ++
 components/Sort.tsx                           |  37 ++
 package-lock.json                             | 336 +++++++++---------
 package.json                                  |  17 +-
 public/logo.svg                               |  10 +
 25 files changed, 643 insertions(+), 264 deletions(-)
 create mode 100644 app/(auth)/login/page.tsx
 create mode 100644 app/(auth)/signup/page.tsx
 create mode 100644 app/(content)/(blog)/blogs/page.tsx
 create mode 100644 app/(content)/(community)/communities/page.tsx
 rename app/{ => (content)/(gaming)}/games/[gameid]/loading.tsx (100%)
 rename app/{ => (content)/(gaming)}/games/[gameid]/page.tsx (100%)
 create mode 100644 app/(content)/(gaming)/games/layout.tsx
 rename app/{ => (content)/(gaming)}/games/loading.tsx (100%)
 create mode 100644 app/(content)/(gaming)/games/page.tsx
 create mode 100644 app/(content)/(thread)/threads/page.tsx
 create mode 100644 app/(content)/(user)/[userid]/page.tsx
 create mode 100644 app/(content)/(user)/friends/page.tsx
 create mode 100644 app/(content)/(user)/notifications/page.tsx
 create mode 100644 app/(content)/(user)/settings/page.tsx
 delete mode 100644 app/games/page.tsx
 create mode 100644 app/theme.tsx
 create mode 100644 components/Dashboard.tsx
 rename {app/games => components}/Game.tsx (100%)
 create mode 100644 components/Header.tsx
 create mode 100644 components/Search.tsx
 create mode 100644 components/Sort.tsx
 create mode 100644 public/logo.svg

diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
new file mode 100644
index 0000000..da79264
--- /dev/null
+++ b/app/(auth)/login/page.tsx
@@ -0,0 +1,7 @@
+export default function Login() {
+    return (
+        <div>
+            <h1>Login WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx
new file mode 100644
index 0000000..abc06fc
--- /dev/null
+++ b/app/(auth)/signup/page.tsx
@@ -0,0 +1,7 @@
+export default function Signup() {
+    return (
+        <div>
+            <h1>Signup WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/(content)/(blog)/blogs/page.tsx b/app/(content)/(blog)/blogs/page.tsx
new file mode 100644
index 0000000..1b234b5
--- /dev/null
+++ b/app/(content)/(blog)/blogs/page.tsx
@@ -0,0 +1,7 @@
+export default function BlogsPage() {
+    return (
+        <div>
+            <h1>Blog WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/(content)/(community)/communities/page.tsx b/app/(content)/(community)/communities/page.tsx
new file mode 100644
index 0000000..7a1e2cf
--- /dev/null
+++ b/app/(content)/(community)/communities/page.tsx
@@ -0,0 +1,7 @@
+export default function CommunitiesPage() {
+    return (
+        <div>
+            <h1>Community WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/games/[gameid]/loading.tsx b/app/(content)/(gaming)/games/[gameid]/loading.tsx
similarity index 100%
rename from app/games/[gameid]/loading.tsx
rename to app/(content)/(gaming)/games/[gameid]/loading.tsx
diff --git a/app/games/[gameid]/page.tsx b/app/(content)/(gaming)/games/[gameid]/page.tsx
similarity index 100%
rename from app/games/[gameid]/page.tsx
rename to app/(content)/(gaming)/games/[gameid]/page.tsx
diff --git a/app/(content)/(gaming)/games/layout.tsx b/app/(content)/(gaming)/games/layout.tsx
new file mode 100644
index 0000000..41e3240
--- /dev/null
+++ b/app/(content)/(gaming)/games/layout.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import Dashboard from "@/components/Dashboard";
+import Sort from "@/components/Sort";
+import { Grid, Hidden } from "@mui/material";
+
+export default function DashboardLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <section>
+            <Grid container spacing={2}>
+                <Grid item xs={2}>
+                    <Dashboard />
+                </Grid>
+
+                <Grid item xs={10} md={8}>
+                    {children}
+                </Grid>
+
+                <Hidden mdDown>
+                    <Grid item xs={2}>
+                        <Sort />
+                    </Grid>
+                </Hidden>
+            </Grid>
+        </section>
+    );
+}
\ No newline at end of file
diff --git a/app/games/loading.tsx b/app/(content)/(gaming)/games/loading.tsx
similarity index 100%
rename from app/games/loading.tsx
rename to app/(content)/(gaming)/games/loading.tsx
diff --git a/app/(content)/(gaming)/games/page.tsx b/app/(content)/(gaming)/games/page.tsx
new file mode 100644
index 0000000..6a88f6a
--- /dev/null
+++ b/app/(content)/(gaming)/games/page.tsx
@@ -0,0 +1,70 @@
+"use client"
+
+import Game from "@/components/Game";
+import Search from "@/components/Search";
+import { getBaseURL } from "@/lib/utils";
+import { IGame } from "@/types/types";
+import { Card, CardContent, Grid, Stack } from "@mui/material";
+import { Fragment } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useInfiniteQuery } from "react-query";
+
+// renders a list of games infinitely (presumably)
+export default function GamesPage() {
+    const {
+        data,
+        error,
+        fetchNextPage,
+        hasNextPage,
+        isFetching,
+        isFetchingNextPage,
+        status,
+    } = useInfiniteQuery(
+        'infiniteGames',
+        async ({ pageParam = 1 }) =>
+            await fetch(
+                `${getBaseURL()}/api/games/?page=${pageParam}`,
+                { cache: 'force-cache', }
+            ).then((result) => result.json() as Promise<IGame[]>),
+        {
+            getNextPageParam: (lastPage, pages) => {
+                return lastPage.length > 0 ? pages.length + 1 : undefined;
+            },
+        }
+    );
+
+    return (
+        <Stack spacing={2}>
+            <Search />
+            <Card>
+                <CardContent>
+                    {status === 'success' && (
+                        <InfiniteScroll
+                            dataLength={data?.pages.length * 20}
+                            next={fetchNextPage}
+                            hasMore={hasNextPage ? true : false}
+                            loader={<h4>Loading...</h4>}
+                            endMessage={
+                                <p style={{ textAlign: 'center' }}>
+                                    <b>Yay! You have seen it all</b>
+                                </p>
+                            }
+                        >
+                            <Grid container spacing={2} justifyContent="center">
+                                {data?.pages.map((page, i) => (
+                                    <Fragment key={i}>
+                                        {page.map((game: IGame) => (
+                                            <Grid item xs={12} ss={6} sm={4} md={3} lg={2} key={game.id}>
+                                                <Game id={game.id} name={game.name} cover={game.cover} key={game.id} />
+                                            </Grid>
+                                        ))}
+                                    </Fragment>
+                                ))}
+                            </Grid>
+                        </InfiniteScroll>
+                    )}
+                </CardContent>
+            </Card>
+        </Stack>
+    )
+}
\ No newline at end of file
diff --git a/app/(content)/(thread)/threads/page.tsx b/app/(content)/(thread)/threads/page.tsx
new file mode 100644
index 0000000..d9a8ea4
--- /dev/null
+++ b/app/(content)/(thread)/threads/page.tsx
@@ -0,0 +1,7 @@
+export default function ThreadsPage() {
+    return (
+        <div>
+            <h1>Threads WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/(content)/(user)/[userid]/page.tsx b/app/(content)/(user)/[userid]/page.tsx
new file mode 100644
index 0000000..73bad3c
--- /dev/null
+++ b/app/(content)/(user)/[userid]/page.tsx
@@ -0,0 +1,8 @@
+export default function User({ params }: { params: { userid: string } }) {
+    return (
+        <div>
+            <h1>User Profile Page WIP</h1>
+            <p>Unique UserName: {params.userid}</p>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/(content)/(user)/friends/page.tsx b/app/(content)/(user)/friends/page.tsx
new file mode 100644
index 0000000..85a520c
--- /dev/null
+++ b/app/(content)/(user)/friends/page.tsx
@@ -0,0 +1,7 @@
+export default function Friends() {
+    return (
+        <div>
+            <h1>Friends Page WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/(content)/(user)/notifications/page.tsx b/app/(content)/(user)/notifications/page.tsx
new file mode 100644
index 0000000..df96b5f
--- /dev/null
+++ b/app/(content)/(user)/notifications/page.tsx
@@ -0,0 +1,7 @@
+export default function Notifications() {
+    return (
+        <div>
+            <h1>Notifications Page WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/(content)/(user)/settings/page.tsx b/app/(content)/(user)/settings/page.tsx
new file mode 100644
index 0000000..b72aec2
--- /dev/null
+++ b/app/(content)/(user)/settings/page.tsx
@@ -0,0 +1,7 @@
+export default function Settings() {
+    return (
+        <div>
+            <h1>Settings Page WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/games/page.tsx b/app/games/page.tsx
deleted file mode 100644
index 6f0ce94..0000000
--- a/app/games/page.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-"use client"
-
-import { getBaseURL } from "@/lib/utils";
-import { IGame } from "@/types/types";
-import { Grid } from "@mui/material";
-import { Fragment } from "react";
-import InfiniteScroll from "react-infinite-scroll-component";
-import { useInfiniteQuery } from "react-query";
-import Game from "./Game";
-
-// renders a list of games infinitely (presumably)
-export default function GamesList() {
-    const {
-        data,
-        error,
-        fetchNextPage,
-        hasNextPage,
-        isFetching,
-        isFetchingNextPage,
-        status,
-    } = useInfiniteQuery(
-        'infiniteGames',
-        async ({ pageParam = 1 }) =>
-            await fetch(
-                `${getBaseURL()}/api/games/?page=${pageParam}`,
-                { cache: 'force-cache', }
-            ).then((result) => result.json() as Promise<IGame[]>),
-        {
-            getNextPageParam: (lastPage, pages) => {
-                return lastPage.length > 0 ? pages.length + 1 : undefined;
-            },
-        }
-    );
-
-    return (
-        <>
-            <h1>Games List Page</h1>
-            {status === 'success' && (
-                <InfiniteScroll
-                    dataLength={data?.pages.length * 20}
-                    next={fetchNextPage}
-                    hasMore={hasNextPage ? true : false}
-                    loader={<h4>Loading...</h4>}
-                    endMessage={
-                        <p style={{ textAlign: 'center' }}>
-                            <b>Yay! You have seen it all</b>
-                        </p>
-                    }
-                >
-                    <Grid container spacing={2} justifyContent="center">
-                        {data?.pages.map((page, i) => (
-                            <Fragment key={i}>
-                                {page.map((game: IGame) => (
-                                    <Grid item xs={12} ss={6} sm={4} md={3} lg={2} key={game.id}>
-                                        <Game id={game.id} name={game.name} cover={game.cover} key={game.id} />
-                                    </Grid>
-                                ))}
-                            </Fragment>
-                        ))}
-                    </Grid>
-                </InfiniteScroll>
-            )}
-        </>
-    )
-}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 70082c1..2e2a0aa 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,14 +1,20 @@
 "use client"
 
-import { Container, CssBaseline, ThemeProvider, createTheme, useMediaQuery } from "@mui/material"
-import { useMemo, useState } from "react"
+import { Container, CssBaseline, ThemeProvider } from "@mui/material"
+import { createContext, useState } from "react"
 import { QueryClient, QueryClientProvider } from "react-query"
+import Header from "../components/Header"
+import { Theme } from "./theme"
 
+// metadata for the website
 export const metadata = {
   title: 'GameUnity',
   description: 'Soon',
 }
 
+// for dark mode global context
+export const ColorModeContext = createContext({ toggleColorMode: () => { } });
+
 // this is the root layout for all pages ({children})
 export default function RootLayout({
   children,
@@ -17,38 +23,22 @@ export default function RootLayout({
 }) {
   const [queryClient] = useState(() => new QueryClient());
 
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode: prefersDarkMode ? 'dark' : 'light',
-        },
-        breakpoints: {
-          values: {
-            xs: 0,
-            ss: 300,
-            sm: 600,
-            md: 900,
-            lg: 1200,
-            xl: 1536,
-          },
-        },
-      }),
-    [prefersDarkMode],
-  );
+  const [theme, colorMode] = Theme();
 
   return (
     <html lang="en">
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={theme}>
-          <CssBaseline />
-          <body>
-            <Container>
-              {children}
-            </Container>
-          </body>
-        </ThemeProvider>
+        <ColorModeContext.Provider value={colorMode}>
+          <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <body>
+              <Container maxWidth={false}>
+                <Header />
+                {children}
+              </Container>
+            </body>
+          </ThemeProvider>
+        </ColorModeContext.Provider>
       </QueryClientProvider>
     </html>
   )
diff --git a/app/theme.tsx b/app/theme.tsx
new file mode 100644
index 0000000..07f336c
--- /dev/null
+++ b/app/theme.tsx
@@ -0,0 +1,36 @@
+import { Theme, createTheme } from "@mui/material";
+import { useMemo, useState } from "react";
+
+// this is the main theme for the website
+export function Theme(): [Theme, { toggleColorMode: () => void }] {
+    const [mode, setMode] = useState<'light' | 'dark'>('dark');
+
+    const colorMode = useMemo(
+        () => ({
+            toggleColorMode: () => {
+                setMode((prevMode) => (prevMode === 'dark' ? 'light' : 'dark'));
+            },
+        }),
+        [],
+    );
+
+    return [useMemo(() =>
+        createTheme({
+            palette: {
+                mode: mode,
+            },
+            breakpoints: {
+                values: {
+                    xs: 0,
+                    ss: 300,
+                    sm: 600,
+                    md: 900,
+                    lg: 1200,
+                    xl: 1536,
+                },
+            },
+        }),
+        [mode],
+    ),
+        colorMode];
+}
\ No newline at end of file
diff --git a/components/Dashboard.tsx b/components/Dashboard.tsx
new file mode 100644
index 0000000..520ee74
--- /dev/null
+++ b/components/Dashboard.tsx
@@ -0,0 +1,99 @@
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import ExploreIcon from '@mui/icons-material/Explore';
+import GroupIcon from '@mui/icons-material/Group';
+import HelpIcon from '@mui/icons-material/Help';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import PeopleIcon from '@mui/icons-material/People';
+import SettingsIcon from '@mui/icons-material/Settings';
+import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
+import { Box, Button, Hidden, Stack, Typography } from "@mui/material";
+import Link from "next/link";
+
+export default function Dashboard() {
+    const loggedIn = false;
+    const username = "coolguy123";
+
+    return (
+        <Box sx={{ position: 'sticky', top: 0 }}>
+            {loggedIn ?
+                <Stack spacing={2}>
+                    <Link href={`/${username}`}>
+                        <Button variant="text" size="large" startIcon={<AccountCircleIcon />} sx={{ borderRadius: "999px" }}>
+                            <Hidden lgDown>
+                                My Profile
+                            </Hidden>
+                        </Button>
+                    </Link>
+                    <Link href="/notifications">
+                        <Button variant="text" size="large" startIcon={<NotificationsIcon />} sx={{ borderRadius: "999px" }}>
+                            <Hidden lgDown>
+                                Notifications
+                            </Hidden>
+                        </Button>
+                    </Link>
+                    <Link href="/friends">
+                        <Button variant="text" size="large" startIcon={<PeopleIcon />} sx={{ borderRadius: "999px" }}>
+                            <Hidden lgDown>
+                                Friends
+                            </Hidden>
+                        </Button>
+                    </Link>
+                    <Link href="/games">
+                        <Button variant="text" size="large" startIcon={<SportsEsportsIcon />} sx={{ borderRadius: "999px" }}>
+                            <Hidden lgDown>
+                                Games
+                            </Hidden>
+                        </Button>
+                    </Link>
+                    <Link href="/communities">
+                        <Button variant="text" size="large" startIcon={<GroupIcon />} sx={{ borderRadius: "999px" }}>
+                            <Hidden lgDown>
+                                Communities
+                            </Hidden>
+                        </Button>
+                    </Link>
+                    <Link href="/blogs">
+                        <Button variant="text" size="large" startIcon={<ExploreIcon />} sx={{ borderRadius: "999px" }}>
+                            <Hidden lgDown>
+                                Explore
+                            </Hidden>
+                        </Button>
+                    </Link>
+
+                    <Box height={30} />
+
+                    <Link href="/settings">
+                        <Button variant="text" size="large" startIcon={<SettingsIcon />} sx={{ borderRadius: "999px" }}>
+                            <Hidden lgDown>
+                                Settings
+                            </Hidden>
+                        </Button>
+                    </Link>
+                    <Link href="/blogs">
+                        <Button variant="text" size="large" startIcon={<HelpIcon />} sx={{ borderRadius: "999px" }}>
+                            <Hidden lgDown>
+                                Help
+                            </Hidden>
+                        </Button>
+                    </Link>
+                </Stack>
+                :
+                <Stack spacing={2} sx={{ justifyContent: "center", textAlign: "center" }}>
+                    <Link href="/login">
+                        <Button variant="contained" size="large" sx={{ borderRadius: "999px" }}>
+                            Log In
+                        </Button>
+                    </Link>
+                    <Link href="/signup">
+                        <Button variant="outlined" size="large" sx={{ borderRadius: "999px" }}>
+                            Sign Up
+                        </Button>
+                    </Link>
+                    <Typography variant="subtitle1">
+                        Unlock endless possibilities - register or log in to unleash the full potential of our website.
+                    </Typography>
+                </Stack>
+            }
+        </Box>
+    )
+}
\ No newline at end of file
diff --git a/app/games/Game.tsx b/components/Game.tsx
similarity index 100%
rename from app/games/Game.tsx
rename to components/Game.tsx
diff --git a/components/Header.tsx b/components/Header.tsx
new file mode 100644
index 0000000..4d1eae3
--- /dev/null
+++ b/components/Header.tsx
@@ -0,0 +1,54 @@
+import { ColorModeContext } from "@/app/layout";
+import Brightness4Icon from '@mui/icons-material/Brightness4';
+import Brightness7Icon from '@mui/icons-material/Brightness7';
+import { Button, Container, Grid, IconButton, useTheme } from "@mui/material";
+import Image from "next/image";
+import Link from "next/link";
+import { useContext } from "react";
+import logoSvg from "../public/logo.svg";
+
+export default function Header() {
+    const theme = useTheme();
+    const colorMode = useContext(ColorModeContext);
+
+    return (
+        <Container>
+            <Grid container spacing={2} height={100} sx={{ alignItems: "center" }}>
+                <Grid item xs={2}>
+                    <Link href="/">
+                        <Image src={logoSvg} alt="GameUnity" width={50} height={50} priority />
+                    </Link>
+                </Grid>
+
+                <Grid item xs={8} sx={{ justifyContent: "center", textAlign: "center" }}>
+                    <Link href="/games">
+                        <Button variant="text" size="large" sx={{ borderRadius: "999px" }}>
+                            Games
+                        </Button>
+                    </Link>
+                    <Link href="/threads">
+                        <Button variant="text" size="large" sx={{ borderRadius: "999px" }}>
+                            Threads
+                        </Button>
+                    </Link>
+                    <Link href="/communities">
+                        <Button variant="text" size="large" sx={{ borderRadius: "999px" }}>
+                            Communities
+                        </Button>
+                    </Link>
+                    <Link href="/blogs">
+                        <Button variant="text" size="large" sx={{ borderRadius: "999px" }}>
+                            Blog
+                        </Button>
+                    </Link>
+                </Grid>
+
+                <Grid item xs={2} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+                    <IconButton sx={{ ml: 1 }} onClick={colorMode.toggleColorMode} color="inherit">
+                        {theme.palette.mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
+                    </IconButton>
+                </Grid>
+            </Grid>
+        </Container>
+    )
+}
\ No newline at end of file
diff --git a/components/Search.tsx b/components/Search.tsx
new file mode 100644
index 0000000..01532ab
--- /dev/null
+++ b/components/Search.tsx
@@ -0,0 +1,38 @@
+import ArrowCircleRightRoundedIcon from '@mui/icons-material/ArrowCircleRightRounded';
+import SearchIcon from '@mui/icons-material/Search';
+import { Container, IconButton, InputAdornment, TextField } from '@mui/material';
+
+export default function SearchInput() {
+    const handleSearch = (event: { target: { value: any; }; }) => {
+        const searchText = event.target.value;
+        console.log('Search:', searchText);
+    };
+
+    return (
+        <Container maxWidth="sm" sx={{ justifyContent: "center", textAlign: "center" }}>
+            <TextField
+                placeholder="Search"
+                variant="outlined"
+                size="small"
+                onChange={handleSearch}
+                InputProps={{
+                    startAdornment: (
+                        <InputAdornment position="start">
+                            <SearchIcon />
+                        </InputAdornment>
+                    ),
+                    endAdornment: (
+                        <InputAdornment position="end">
+                            <IconButton edge="end" aria-label="start search">
+                                <ArrowCircleRightRoundedIcon />
+                            </IconButton>
+                        </InputAdornment>
+                    ),
+                    style: {
+                        borderRadius: '999px',
+                    },
+                }}
+            />
+        </Container>
+    );
+};
\ No newline at end of file
diff --git a/components/Sort.tsx b/components/Sort.tsx
new file mode 100644
index 0000000..a21fd60
--- /dev/null
+++ b/components/Sort.tsx
@@ -0,0 +1,37 @@
+import { Box, Card, CardContent, FormControl, FormHelperText, MenuItem, Select, SelectChangeEvent, Typography } from "@mui/material";
+import { useState } from "react";
+
+// this is a single sorting helper-component, only for design purposes
+export default function Sort() {
+    const [select, setSelct] = useState('');
+
+    const handleChange = (event: SelectChangeEvent) => {
+        setSelct(event.target.value);
+    };
+
+    return (
+        <Box sx={{ position: 'sticky', top: 0 }}>
+            <Card variant="outlined" >
+                <CardContent>
+                    <Typography>Filter</Typography>
+
+                    <FormControl fullWidth>
+                        <FormHelperText>Sorty By</FormHelperText>
+                        <Select
+                            value={select}
+                            onChange={handleChange}
+                            displayEmpty
+                            inputProps={{ 'aria-label': 'Without label' }}
+                        >
+                            <MenuItem value="">
+                                <em>Any</em>
+                            </MenuItem>
+                            <MenuItem value={1}>Rating</MenuItem>
+                            <MenuItem value={2}>Release Date</MenuItem>
+                        </Select>
+                    </FormControl>
+                </CardContent>
+            </Card>
+        </Box>
+    )
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 76e0654..275e0d9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,16 +8,17 @@
       "name": "project_ss23",
       "version": "0.1.0",
       "dependencies": {
-        "@clerk/nextjs": "^4.17.3",
+        "@clerk/nextjs": "^4.18.2",
         "@emotion/react": "^11.11.0",
         "@emotion/styled": "^11.11.0",
-        "@mui/material": "^5.13.0",
-        "@types/node": "20.1.4",
+        "@mui/icons-material": "^5.11.16",
+        "@mui/material": "^5.13.1",
+        "@types/node": "20.2.1",
         "@types/react": "18.2.6",
         "@types/react-dom": "18.2.4",
-        "eslint": "8.40.0",
-        "eslint-config-next": "13.4.2",
-        "next": "13.4.2",
+        "eslint": "8.41.0",
+        "eslint-config-next": "13.4.3",
+        "next": "13.4.3",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-infinite-scroll-component": "^6.1.0",
@@ -25,7 +26,7 @@
         "typescript": "5.0.4"
       },
       "devDependencies": {
-        "prisma": "^4.14.0"
+        "prisma": "^4.14.1"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -168,11 +169,11 @@
       }
     },
     "node_modules/@clerk/backend": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/@clerk/backend/-/backend-0.18.0.tgz",
-      "integrity": "sha512-d3YoDBK56XLdoAkLq7wCyY9B3Qxd1DG0+snXTXE7qWQtG6AFJEQ7FKFRFEsNzMZaWRfiiE9jQ9GJMjWEVvLAUA==",
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@clerk/backend/-/backend-0.19.2.tgz",
+      "integrity": "sha512-9zzhoX5IwcIrwIwZxgkyYctTUoj0phFjKuq4+IwYra9jZ8+NUEZcI/RATRbDl6WcZcnoW7qChL1OH6QXRv3u+A==",
       "dependencies": {
-        "@clerk/types": "^3.36.0",
+        "@clerk/types": "^3.38.1",
         "@peculiar/webcrypto": "1.4.1",
         "@types/node": "16.18.6",
         "deepmerge": "4.2.2",
@@ -195,12 +196,12 @@
       "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
     "node_modules/@clerk/clerk-react": {
-      "version": "4.15.4",
-      "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-4.15.4.tgz",
-      "integrity": "sha512-OSimB3ua3hJtlau3qUWIhIGIOoRZVEUMBuyVSkCkEEyjCGhHnSyO81Vcbv9slUtlP3DWlxeppMpdA62KZ6L1iA==",
+      "version": "4.16.2",
+      "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-4.16.2.tgz",
+      "integrity": "sha512-7WNmIlTKtNTzo5u7iHQqjWH/qzX22AY9iGM/zND2kCbCLKD39l5A2iecJ3aNLnWmxrz9xpgYVfTVbaVYWnEzPA==",
       "dependencies": {
-        "@clerk/shared": "^0.15.7",
-        "@clerk/types": "^3.36.0",
+        "@clerk/shared": "^0.16.2",
+        "@clerk/types": "^3.38.1",
         "swr": "1.3.0",
         "tslib": "2.4.1"
       },
@@ -217,12 +218,12 @@
       "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
     "node_modules/@clerk/clerk-sdk-node": {
-      "version": "4.8.7",
-      "resolved": "https://registry.npmjs.org/@clerk/clerk-sdk-node/-/clerk-sdk-node-4.8.7.tgz",
-      "integrity": "sha512-fOlfPOL7XhBR9Jg9RnUnYqRB6yXlE+3/kVZ4RG0CcWNVLwLwGIgHz0C3+Sa3e3g+UAVpuvvnXq2/42rstm/ADA==",
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/@clerk/clerk-sdk-node/-/clerk-sdk-node-4.9.2.tgz",
+      "integrity": "sha512-JibCbTiRZZ8hkgRMiGYVip7ogI2picZ6NaTed/d+QqvziRsE5M3wyfEUOIUSeO3hfaKUytGvofczikH6AAaCyA==",
       "dependencies": {
-        "@clerk/backend": "^0.18.0",
-        "@clerk/types": "^3.36.0",
+        "@clerk/backend": "^0.19.2",
+        "@clerk/types": "^3.38.1",
         "@types/cookies": "0.7.7",
         "@types/express": "4.17.14",
         "@types/node-fetch": "2.6.2",
@@ -253,14 +254,14 @@
       "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
     "node_modules/@clerk/nextjs": {
-      "version": "4.17.3",
-      "resolved": "https://registry.npmjs.org/@clerk/nextjs/-/nextjs-4.17.3.tgz",
-      "integrity": "sha512-H6Yi9GB9odTSw5KnZjO7mtLAjuaFuBN72kUDhnjTdIQWqHL0I1+Ut+jWAZTNf2w/ocRlpuw2BxNBlcAus5Bg+A==",
-      "dependencies": {
-        "@clerk/backend": "^0.18.0",
-        "@clerk/clerk-react": "^4.15.4",
-        "@clerk/clerk-sdk-node": "^4.8.7",
-        "@clerk/types": "^3.36.0",
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/@clerk/nextjs/-/nextjs-4.18.2.tgz",
+      "integrity": "sha512-m0cXwAPhT3yUJsNyl1leAUMu/AoX46cEx/FADU/tX/D4Vf68YuB8uCivTrPSO4luASIVi/noLFQYJIo3W96qhQ==",
+      "dependencies": {
+        "@clerk/backend": "^0.19.2",
+        "@clerk/clerk-react": "^4.16.2",
+        "@clerk/clerk-sdk-node": "^4.9.2",
+        "@clerk/types": "^3.38.1",
         "path-to-regexp": "6.2.1",
         "tslib": "2.4.1"
       },
@@ -279,17 +280,20 @@
       "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
     "node_modules/@clerk/shared": {
-      "version": "0.15.7",
-      "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-0.15.7.tgz",
-      "integrity": "sha512-8kinCWFF28K8N/OCqfZYIEzxpyH8+HFZ1BmfloQLDSsiy8kpUljk3qbKkBRoHAxJKohSjZL6ax+IpBzt2FmkZw==",
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-0.16.2.tgz",
+      "integrity": "sha512-TiMw3MB1daQc0CIVolstOIkuDURo1BteHDdKIUUU8ZKTsD9p2Kdb488pYo6jMi08YZ639Yov7dhoedclcDAMHw==",
+      "dependencies": {
+        "glob-to-regexp": "0.4.1"
+      },
       "peerDependencies": {
         "react": ">=16"
       }
     },
     "node_modules/@clerk/types": {
-      "version": "3.36.0",
-      "resolved": "https://registry.npmjs.org/@clerk/types/-/types-3.36.0.tgz",
-      "integrity": "sha512-bsOIud1h3Tkvd9F0CGTqqD7NicvAF3O0hFQ2lGjuETFrNqV8houorrGM9d0ZMU72vsyzwTQ/Jw8vB4mIHIXHMQ==",
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/@clerk/types/-/types-3.38.1.tgz",
+      "integrity": "sha512-/gBeFp3f7r23uU0ag5qxmwGKUc222YokgiPCusU8NE+AFbg1PIfudrw/0eKRbSZbz6DI7E+mxVz4M3mVkTJVlQ==",
       "dependencies": {
         "csstype": "3.1.1"
       },
@@ -480,9 +484,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.40.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.40.0.tgz",
-      "integrity": "sha512-ElyB54bJIhXQYVKjDSvCkPO1iU1tSAeVQJbllWJq1XQSmmA4dgFk8CbiBGpiOPxleE48vDogxCtmMYku4HSVLA==",
+      "version": "8.41.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.41.0.tgz",
+      "integrity": "sha512-LxcyMGxwmTh2lY9FwHPGWOHmYFCZvbrFCBZL4FzSSsxsRPuhrYUg/49/0KDfW8tnIEaEHtfmn6+NPN+1DqaNmA==",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
@@ -518,14 +522,14 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "node_modules/@mui/base": {
-      "version": "5.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.0.tgz",
-      "integrity": "sha512-ap+juKvt8R8n3cBqd/pGtZydQ4v2I/hgJKnvJRGjpSh3RvsvnDHO4rXov8MHQlH6VqpOekwgilFLGxMZjNTucA==",
+      "version": "5.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.1.tgz",
+      "integrity": "sha512-xrkDCeu3JQE+JjJUnJnOrdQJMXwKhbV4AW+FRjMIj5i9cHK3BAuatG/iqbf1M+jklVWLk0KdbgioKwK+03aYbA==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
         "@emotion/is-prop-valid": "^1.2.0",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.3",
+        "@mui/utils": "^5.13.1",
         "@popperjs/core": "^2.11.7",
         "clsx": "^1.2.1",
         "prop-types": "^15.8.1",
@@ -555,25 +559,50 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.13.0",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.13.0.tgz",
-      "integrity": "sha512-5nXz2k8Rv2ZjtQY6kXirJVyn2+ODaQuAJmXSJtLDUQDKWp3PFUj6j3bILqR0JGOs9R5ejgwz3crLKsl6GwjwkQ==",
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.13.1.tgz",
+      "integrity": "sha512-qDHtNDO72NcBQMhaWBt9EZMvNiO+OXjPg5Sdk/6LgRDw6Zr3HdEZ5n2FJ/qtYsaT/okGyCuQavQkcZCOCEVf/g==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "5.11.16",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.11.16.tgz",
+      "integrity": "sha512-oKkx9z9Kwg40NtcIajF9uOXhxiyTZrrm9nmIJ4UjkU2IdHpd4QVLbCc/5hZN/y0C6qzi2Zlxyr9TGddQx2vx2A==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.13.0",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.13.0.tgz",
-      "integrity": "sha512-ckS+9tCpAzpdJdaTF+btF0b6mF9wbXg/EVKtnoAWYi0UKXoXBAVvEUMNpLGA5xdpCdf+A6fPbVUEHs9TsfU+Yw==",
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.13.1.tgz",
+      "integrity": "sha512-qSnbJZer8lIuDYFDv19/t3s0AXYY9SxcOdhCnGvetRSfOG4gy3TkiFXNCdW5OLNveTieiMpOuv46eXUmE3ZA6A==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
-        "@mui/base": "5.0.0-beta.0",
-        "@mui/core-downloads-tracker": "^5.13.0",
-        "@mui/system": "^5.12.3",
+        "@mui/base": "5.0.0-beta.1",
+        "@mui/core-downloads-tracker": "^5.13.1",
+        "@mui/system": "^5.13.1",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.3",
+        "@mui/utils": "^5.13.1",
         "@types/react-transition-group": "^4.4.6",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
@@ -613,12 +642,12 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.12.3.tgz",
-      "integrity": "sha512-o1e7Z1Bp27n4x2iUHhegV4/Jp6H3T6iBKHJdLivS5GbwsuAE/5l4SnZ+7+K+e5u9TuhwcAKZLkjvqzkDe8zqfA==",
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.1.tgz",
+      "integrity": "sha512-HW4npLUD9BAkVppOUZHeO1FOKUJWAwbpy0VQoGe3McUYTlck1HezGHQCfBQ5S/Nszi7EViqiimECVl9xi+/WjQ==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
-        "@mui/utils": "^5.12.3",
+        "@mui/utils": "^5.13.1",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -670,15 +699,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.12.3.tgz",
-      "integrity": "sha512-JB/6sypHqeJCqwldWeQ1MKkijH829EcZAKKizxbU2MJdxGG5KSwZvTBa5D9qiJUA1hJFYYupjiuy9ZdJt6rV6w==",
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.1.tgz",
+      "integrity": "sha512-BsDUjhiO6ZVAvzKhnWBHLZ5AtPJcdT+62VjnRLyA4isboqDKLg4fmYIZXq51yndg/soDK9RkY5lYZwEDku13Ow==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
-        "@mui/private-theming": "^5.12.3",
+        "@mui/private-theming": "^5.13.1",
         "@mui/styled-engine": "^5.12.3",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.3",
+        "@mui/utils": "^5.13.1",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -722,13 +751,13 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.12.3.tgz",
-      "integrity": "sha512-D/Z4Ub3MRl7HiUccid7sQYclTr24TqUAQFFlxHQF8FR177BrCTQ0JJZom7EqYjZCdXhwnSkOj2ph685MSKNtIA==",
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.1.tgz",
+      "integrity": "sha512-6lXdWwmlUbEU2jUI8blw38Kt+3ly7xkmV9ljzY4Q20WhsJMWiNry9CX8M+TaP/HbtuyR8XKsdMgQW7h7MM3n3A==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
         "@types/prop-types": "^15.7.5",
-        "@types/react-is": "^16.7.1 || ^17.0.0",
+        "@types/react-is": "^18.2.0",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
       },
@@ -749,22 +778,22 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@next/env": {
-      "version": "13.4.2",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.2.tgz",
-      "integrity": "sha512-Wqvo7lDeS0KGwtwg9TT9wKQ8raelmUxt+TQKWvG/xKfcmDXNOtCuaszcfCF8JzlBG1q0VhpI6CKaRMbVPMDWgw=="
+      "version": "13.4.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.3.tgz",
+      "integrity": "sha512-pa1ErjyFensznttAk3EIv77vFbfSYT6cLzVRK5jx4uiRuCQo+m2wCFAREaHKIy63dlgvOyMlzh6R8Inu8H3KrQ=="
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "13.4.2",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.4.2.tgz",
-      "integrity": "sha512-ZeFWgrxwckxTpYM+ANeUL9E7LOGPbZKmI94LJIjbDU69iEIgqd4WD0l2pVbOJMr/+vgoZmJ9Dx1m0WJ7WScXHA==",
+      "version": "13.4.3",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.4.3.tgz",
+      "integrity": "sha512-5B0uOnh7wyUY9vNNdIA6NUvWozhrZaTMZOzdirYAefqD0ZBK5C/h3+KMYdCKrR7JrXGvVpWnHtv54b3dCzwICA==",
       "dependencies": {
         "glob": "7.1.7"
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.4.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.2.tgz",
-      "integrity": "sha512-6BBlqGu3ewgJflv9iLCwO1v1hqlecaIH2AotpKfVUEzUxuuDNJQZ2a4KLb4MBl8T9/vca1YuWhSqtbF6ZuUJJw==",
+      "version": "13.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.3.tgz",
+      "integrity": "sha512-yx18udH/ZmR4Bw4M6lIIPE3JxsAZwo04iaucEfA2GMt1unXr2iodHUX/LAKNyi6xoLP2ghi0E+Xi1f4Qb8f1LQ==",
       "cpu": [
         "arm64"
       ],
@@ -777,9 +806,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "13.4.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.2.tgz",
-      "integrity": "sha512-iZuYr7ZvGLPjPmfhhMl0ISm+z8EiyLBC1bLyFwGBxkWmPXqdJ60mzuTaDSr5WezDwv0fz32HB7JHmRC6JVHSZg==",
+      "version": "13.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.3.tgz",
+      "integrity": "sha512-Mi8xJWh2IOjryAM1mx18vwmal9eokJ2njY4nDh04scy37F0LEGJ/diL6JL6kTXi0UfUCGbMsOItf7vpReNiD2A==",
       "cpu": [
         "x64"
       ],
@@ -792,9 +821,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.4.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.2.tgz",
-      "integrity": "sha512-2xVabFtIge6BJTcJrW8YuUnYTuQjh4jEuRuS2mscyNVOj6zUZkom3CQg+egKOoS+zh2rrro66ffSKIS+ztFJTg==",
+      "version": "13.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.3.tgz",
+      "integrity": "sha512-aBvtry4bxJ1xwKZ/LVPeBGBwWVwxa4bTnNkRRw6YffJnn/f4Tv4EGDPaVeYHZGQVA56wsGbtA6nZMuWs/EIk4Q==",
       "cpu": [
         "arm64"
       ],
@@ -807,9 +836,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.4.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.2.tgz",
-      "integrity": "sha512-wKRCQ27xCUJx5d6IivfjYGq8oVngqIhlhSAJntgXLt7Uo9sRT/3EppMHqUZRfyuNBTbykEre1s5166z+pvRB5A==",
+      "version": "13.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.3.tgz",
+      "integrity": "sha512-krT+2G3kEsEUvZoYte3/2IscscDraYPc2B+fDJFipPktJmrv088Pei/RjrhWm5TMIy5URYjZUoDZdh5k940Dyw==",
       "cpu": [
         "arm64"
       ],
@@ -822,9 +851,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.4.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.2.tgz",
-      "integrity": "sha512-NpCa+UVhhuNeaFVUP1Bftm0uqtvLWq2JTm7+Ta48+2Uqj2mNXrDIvyn1DY/ZEfmW/1yvGBRaUAv9zkMkMRixQA==",
+      "version": "13.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.3.tgz",
+      "integrity": "sha512-AMdFX6EKJjC0G/CM6hJvkY8wUjCcbdj3Qg7uAQJ7PVejRWaVt0sDTMavbRfgMchx8h8KsAudUCtdFkG9hlEClw==",
       "cpu": [
         "x64"
       ],
@@ -837,9 +866,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.4.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.2.tgz",
-      "integrity": "sha512-ZWVC72x0lW4aj44e3khvBrj2oSYj1bD0jESmyah3zG/3DplEy/FOtYkMzbMjHTdDSheso7zH8GIlW6CDQnKhmQ==",
+      "version": "13.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.3.tgz",
+      "integrity": "sha512-jySgSXE48shaLtcQbiFO9ajE9mqz7pcAVLnVLvRIlUHyQYR/WyZdK8ehLs65Mz6j9cLrJM+YdmdJPyV4WDaz2g==",
       "cpu": [
         "x64"
       ],
@@ -852,9 +881,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.4.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.2.tgz",
-      "integrity": "sha512-pLT+OWYpzJig5K4VKhLttlIfBcVZfr2+Xbjra0Tjs83NQSkFS+y7xx+YhCwvpEmXYLIvaggj2ONPyjbiigOvHQ==",
+      "version": "13.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.3.tgz",
+      "integrity": "sha512-5DxHo8uYcaADiE9pHrg8o28VMt/1kR8voDehmfs9AqS0qSClxAAl+CchjdboUvbCjdNWL1MISCvEfKY2InJ3JA==",
       "cpu": [
         "arm64"
       ],
@@ -867,9 +896,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.4.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.2.tgz",
-      "integrity": "sha512-dhpiksQCyGca4WY0fJyzK3FxMDFoqMb0Cn+uDB+9GYjpU2K5//UGPQlCwiK4JHxuhg8oLMag5Nf3/IPSJNG8jw==",
+      "version": "13.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.3.tgz",
+      "integrity": "sha512-LaqkF3d+GXRA5X6zrUjQUrXm2MN/3E2arXBtn5C7avBCNYfm9G3Xc646AmmmpN3DJZVaMYliMyCIQCMDEzk80w==",
       "cpu": [
         "ia32"
       ],
@@ -882,9 +911,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "13.4.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.2.tgz",
-      "integrity": "sha512-O7bort1Vld00cu8g0jHZq3cbSTUNMohOEvYqsqE10+yfohhdPHzvzO+ziJRz4Dyyr/fYKREwS7gR4JC0soSOMw==",
+      "version": "13.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.3.tgz",
+      "integrity": "sha512-jglUk/x7ZWeOJWlVoKyIAkHLTI+qEkOriOOV+3hr1GyiywzcqfI7TpFSiwC7kk1scOiH7NTFKp8mA3XPNO9bDw==",
       "cpu": [
         "x64"
       ],
@@ -993,9 +1022,9 @@
       }
     },
     "node_modules/@prisma/engines": {
-      "version": "4.14.0",
-      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-4.14.0.tgz",
-      "integrity": "sha512-PDNlhP/1vyTgmNyiucGqGCdXIp7HIkkvKO50si3y3PcceeHvqtiKPaH1iJdz63jCWMVMbj2MElSxXPOeBvEVIQ==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-4.14.1.tgz",
+      "integrity": "sha512-APqFddPVHYmWNKqc+5J5SqrLFfOghKOLZxobmguDUacxOwdEutLsbXPVhNnpFDmuQWQFbXmrTTPoRrrF6B1MWA==",
       "dev": true,
       "hasInstallScript": true
     },
@@ -1052,9 +1081,9 @@
       }
     },
     "node_modules/@types/express-serve-static-core": {
-      "version": "4.17.34",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.34.tgz",
-      "integrity": "sha512-fvr49XlCGoUj2Pp730AItckfjat4WNb0lb3kfrLWffd+RLeoGAMsq7UOy04PAPtoL01uKwcp6u8nhzpgpDYr3w==",
+      "version": "4.17.35",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.35.tgz",
+      "integrity": "sha512-wALWQwrgiB2AWTT91CB62b6Yt0sNHpznUXeZEcnPU3DRdlDIz74x8Qg1UUYKSVFi+va5vKOLYRBI1bRKiLLKIg==",
       "dependencies": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -1078,9 +1107,9 @@
       "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
     },
     "node_modules/@types/node": {
-      "version": "20.1.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.1.4.tgz",
-      "integrity": "sha512-At4pvmIOki8yuwLtd7BNHl3CiWNbtclUbNtScGx4OHfBd4/oWoJC8KRCIxXwkdndzhxOsPXihrsOoydxBjlE9Q=="
+      "version": "20.2.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.1.tgz",
+      "integrity": "sha512-DqJociPbZP1lbZ5SQPk4oag6W7AyaGMO6gSfRwq3PWl4PXTwJpRQJhDq4W0kzrg3w6tJ1SwlvGZ5uKFHY13LIg=="
     },
     "node_modules/@types/node-fetch": {
       "version": "2.6.2",
@@ -1130,21 +1159,11 @@
       }
     },
     "node_modules/@types/react-is": {
-      "version": "17.0.4",
-      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.4.tgz",
-      "integrity": "sha512-FLzd0K9pnaEvKz4D1vYxK9JmgQPiGk1lu23o1kqGsLeT0iPbRSF7b76+S5T9fD8aRa0B8bY7I/3DebEj+1ysBA==",
-      "dependencies": {
-        "@types/react": "^17"
-      }
-    },
-    "node_modules/@types/react-is/node_modules/@types/react": {
-      "version": "17.0.59",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.59.tgz",
-      "integrity": "sha512-gSON5zWYIGyoBcycCE75E9+r6dCC2dHdsrVkOEiIYNU5+Q28HcBAuqvDuxHcCbMfHBHdeT5Tva/AFn3rnMKE4g==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-1vz2yObaQkLL7YFe/pme2cpvDsCwI1WXIfL+5eLz0MI9gFG24Re16RzUsI8t9XZn9ZWvgLNDrJBmrqXJO7GNQQ==",
       "dependencies": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
+        "@types/react": "*"
       }
     },
     "node_modules/@types/react-transition-group": {
@@ -2057,14 +2076,14 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.40.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.40.0.tgz",
-      "integrity": "sha512-bvR+TsP9EHL3TqNtj9sCNJVAFK3fBN8Q7g5waghxyRsPLIMwL73XSKnZFK0hk/O2ANC+iAoq6PWMQ+IfBAJIiQ==",
+      "version": "8.41.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz",
+      "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
         "@eslint/eslintrc": "^2.0.3",
-        "@eslint/js": "8.40.0",
+        "@eslint/js": "8.41.0",
         "@humanwhocodes/config-array": "^0.11.8",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -2084,13 +2103,12 @@
         "find-up": "^5.0.0",
         "glob-parent": "^6.0.2",
         "globals": "^13.19.0",
-        "grapheme-splitter": "^1.0.4",
+        "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
         "is-path-inside": "^3.0.3",
-        "js-sdsl": "^4.1.4",
         "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
@@ -2113,11 +2131,11 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "13.4.2",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.4.2.tgz",
-      "integrity": "sha512-zjLJ9B9bbeWSo5q+iHfdt8gVYyT+y2BpWDfjR6XMBtFRSMKRGjllDKxnuKBV1q2Y/QpwLM2PXHJTMRyblCmRAg==",
+      "version": "13.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.4.3.tgz",
+      "integrity": "sha512-1lXwdFi29fKxzeugof/TUE7lpHyJQt5+U4LaUHyvQfHjvsWO77vFNicJv5sX6k0VDVSbnfz0lw+avxI+CinbMg==",
       "dependencies": {
-        "@next/eslint-plugin-next": "13.4.2",
+        "@next/eslint-plugin-next": "13.4.3",
         "@rushstack/eslint-patch": "^1.1.3",
         "@typescript-eslint/parser": "^5.42.0",
         "eslint-import-resolver-node": "^0.3.6",
@@ -2742,6 +2760,11 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+    },
     "node_modules/globals": {
       "version": "13.20.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
@@ -2805,10 +2828,10 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
-    "node_modules/grapheme-splitter": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
-      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
     },
     "node_modules/has": {
       "version": "1.0.3",
@@ -3309,15 +3332,6 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
-    "node_modules/js-sdsl": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.4.0.tgz",
-      "integrity": "sha512-FfVSdx6pJ41Oa+CF7RDaFmTnCaFhua+SNYQX74riGOpl96x+2jQCqEfQ2bnXu/5DPCqlRuiqyvTJM0Qjz26IVg==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/js-sdsl"
-      }
-    },
     "node_modules/js-sha3": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
@@ -3591,11 +3605,11 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
     "node_modules/next": {
-      "version": "13.4.2",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.4.2.tgz",
-      "integrity": "sha512-aNFqLs3a3nTGvLWlO9SUhCuMUHVPSFQC0+tDNGAsDXqx+WJDFSbvc233gOJ5H19SBc7nw36A9LwQepOJ2u/8Kg==",
+      "version": "13.4.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.4.3.tgz",
+      "integrity": "sha512-FV3pBrAAnAIfOclTvncw9dDohyeuEEXPe5KNcva91anT/rdycWbgtu3IjUj4n5yHnWK8YEPo0vrUecHmnmUNbA==",
       "dependencies": {
-        "@next/env": "13.4.2",
+        "@next/env": "13.4.3",
         "@swc/helpers": "0.5.1",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001406",
@@ -3610,15 +3624,15 @@
         "node": ">=16.8.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "13.4.2",
-        "@next/swc-darwin-x64": "13.4.2",
-        "@next/swc-linux-arm64-gnu": "13.4.2",
-        "@next/swc-linux-arm64-musl": "13.4.2",
-        "@next/swc-linux-x64-gnu": "13.4.2",
-        "@next/swc-linux-x64-musl": "13.4.2",
-        "@next/swc-win32-arm64-msvc": "13.4.2",
-        "@next/swc-win32-ia32-msvc": "13.4.2",
-        "@next/swc-win32-x64-msvc": "13.4.2"
+        "@next/swc-darwin-arm64": "13.4.3",
+        "@next/swc-darwin-x64": "13.4.3",
+        "@next/swc-linux-arm64-gnu": "13.4.3",
+        "@next/swc-linux-arm64-musl": "13.4.3",
+        "@next/swc-linux-x64-gnu": "13.4.3",
+        "@next/swc-linux-x64-musl": "13.4.3",
+        "@next/swc-win32-arm64-msvc": "13.4.3",
+        "@next/swc-win32-ia32-msvc": "13.4.3",
+        "@next/swc-win32-x64-msvc": "13.4.3"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -4001,13 +4015,13 @@
       }
     },
     "node_modules/prisma": {
-      "version": "4.14.0",
-      "resolved": "https://registry.npmjs.org/prisma/-/prisma-4.14.0.tgz",
-      "integrity": "sha512-+5dMl1uxMQb4RepndY6AwR9xi1cDcaGFICu+ws6/Nmgt93mFPNj8tYxSfTdmfg+rkNrUId9rk/Ac2vTgLe/oXA==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/prisma/-/prisma-4.14.1.tgz",
+      "integrity": "sha512-z6hxzTMYqT9SIKlzD08dhzsLUpxjFKKsLpp5/kBDnSqiOjtUyyl/dC5tzxLcOa3jkEHQ8+RpB/fE3w8bgNP51g==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
-        "@prisma/engines": "4.14.0"
+        "@prisma/engines": "4.14.1"
       },
       "bin": {
         "prisma": "build/index.js",
diff --git a/package.json b/package.json
index 9bd9dd3..1f745ec 100644
--- a/package.json
+++ b/package.json
@@ -9,16 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@clerk/nextjs": "^4.17.3",
+    "@clerk/nextjs": "^4.18.2",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.13.0",
-    "@types/node": "20.1.4",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.1",
+    "@types/node": "20.2.1",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
-    "eslint": "8.40.0",
-    "eslint-config-next": "13.4.2",
-    "next": "13.4.2",
+    "eslint": "8.41.0",
+    "eslint-config-next": "13.4.3",
+    "next": "13.4.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-infinite-scroll-component": "^6.1.0",
@@ -26,6 +27,6 @@
     "typescript": "5.0.4"
   },
   "devDependencies": {
-    "prisma": "^4.14.0"
+    "prisma": "^4.14.1"
   }
-}
+}
\ No newline at end of file
diff --git a/public/logo.svg b/public/logo.svg
new file mode 100644
index 0000000..a98fd48
--- /dev/null
+++ b/public/logo.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.2756 22.8622H9.13782V30C9.13782 31.1046 10.0332 32 11.1378 32H16.2756C17.3802 32 18.2756 31.1046 18.2756 30V22.8622Z" fill="black"/>
+<path d="M18.2934 22.8622L13.7067 18.2934L9.13782 22.8622H18.2934Z" fill="black"/>
+<path d="M20.8444 0H15.7067C14.6021 0 13.7067 0.895431 13.7067 2V9.13785H22.8444V2C22.8444 0.89543 21.949 0 20.8444 0Z" fill="black"/>
+<path d="M13.7067 9.15555L18.2933 13.7245L22.8622 9.15555H13.7067Z" fill="black"/>
+<path d="M9.13776 9.15555H2C0.89543 9.15555 0 10.051 0 11.1555V16.2934C0 17.398 0.895432 18.2934 2 18.2934H9.13776V9.15555Z" fill="#8E4CC2"/>
+<path d="M9.13782 18.2934L13.7067 13.7245L9.13782 9.15555V18.2934Z" fill="#8E4CC2"/>
+<path d="M29.9999 13.7245H22.8622V22.8622H29.9999C31.1045 22.8622 31.9999 21.9667 31.9999 20.8622V15.7245C31.9999 14.6199 31.1045 13.7245 29.9999 13.7245Z" fill="black"/>
+<path d="M22.8623 13.7245L18.2933 18.2934L22.8623 22.8622V13.7245Z" fill="black"/>
+</svg>
-- 
GitLab