work base

components/Sort.tsx

+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

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

public/logo.svg

+<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>