remove mui and change to tailwindcss, npm build throws error though

components/Header.tsx

-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

components/InfiniteScroll.tsx

+"use client"
+
+import Game from "@/components/Game";
+import { Card, CardContent } from "@/components/ui/card";
+import { getBaseURL } from "@/lib/utils";
+import { IGame } from "@/types/igdb-types";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { Fragment } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
+
+export function InfiniteScrollGames() {
+    const {
+        status,
+        data,
+        error,
+        fetchNextPage,
+        hasNextPage,
+    } = 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 (
+        <Card className="p-5">
+            {status === 'error'
+                ?
+                (<span>Error: {(error as Error).message}</span>)
+                :
+                (status === 'success' && (
+                    <InfiniteScroll
+                        dataLength={data?.pages.length * 20}
+                        next={fetchNextPage}
+                        hasMore={hasNextPage ? true : false}
+                        loader={<h4>Loading more...</h4>}
+                        endMessage={
+                            <p style={{ textAlign: 'center' }}>
+                                <b>Yay! You have seen it all</b>
+                            </p>
+                        }
+                    >
+                        <div className="">
+                            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 lg:gap-8">
+                                {data.pages.map((page, i) => (
+                                    <Fragment key={i}>
+                                        {page.map((game: IGame) => (
+                                            <Game id={game.id} name={game.name} cover={game.cover} key={game.id} />
+                                        ))}
+                                    </Fragment>
+                                ))}
+                            </div>
+                        </div>
+                    </InfiniteScroll>
+                ))}
+        </Card>
+    )
+}
\ No newline at end of file

components/PostMessageForm.tsx

@@ -11,7 +11,7 @@ export default function PostMessageForm(props: { data: Message[] | null }) {
     e.preventDefault()
     // setMessages([...messagesState, formData])
     console.log(formData)
-    const response = await fetch('http://localhost:3000/api/threads', {
+    const response = await fetch('http://localhost:3000/api/messages', {
       method: 'POST',
       body: JSON.stringify(formData)
     })

components/Search.tsx

-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

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

components/mode-toggle.tsx

+"use client"
+
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Icons } from "@/components/ui/icons"
+
+export function ModeToggle() {
+    const { setTheme } = useTheme()
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="h-8 w-8 px-0">
+                    <Icons.sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                    <Icons.moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                    <span className="sr-only">Toggle theme</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => setTheme("light")}>
+                    <Icons.sun className="mr-2 h-4 w-4" />
+                    <span>Light</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme("dark")}>
+                    <Icons.moon className="mr-2 h-4 w-4" />
+                    <span>Dark</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme("system")}>
+                    <Icons.laptop className="mr-2 h-4 w-4" />
+                    <span>System</span>
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}
\ No newline at end of file

components/nav.tsx

+"use client"
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { buttonVariants } from "@/components/ui/button";
+import { Icons, IconsType } from "@/components/ui/icons";
+import { cn } from "@/lib/utils";
+import { SidebarNavItem } from "@/types";
+import { UserButton, useUser } from "@clerk/nextjs";
+import { ModeToggle } from "./mode-toggle";
+
+interface DashboardNavProps {
+    items: SidebarNavItem[]
+}
+
+export default function DashboardNav({ items }: DashboardNavProps) {
+    const path = usePathname()
+
+    const { isLoaded, user } = useUser()
+
+    if (!items?.length) {
+        return null
+    }
+
+    return (
+        <nav className="grid items-start gap-2">
+            <div className="flex items-center py-2">
+                <Link href="/" className={cn("rounded-full p-3 hover:bg-accent")}>
+                    <Icons.logo className="h-7 w-7 dark:hidden" />
+                    <Icons.logoWhite className="h-7 w-7 hidden dark:block" />
+                </Link>
+            </div>
+            {isLoaded && user ?
+                (items.map((item, index) => {
+                    const Icon = Icons[item.icon as keyof IconsType || "arrowRight"];
+                    if (item.title === "My Profile") {
+                        item.href = `/${user.username}`
+                    }
+                    return (
+                        item.href && (
+                            <Link key={index} href={item.disabled ? "/" : item.href} className={index == 6 ? "mt-10" : ""}>
+                                <span
+                                    className={cn(
+                                        "group flex items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
+                                        path === item.href ? "bg-accent" : "transparent",
+                                        item.disabled && "cursor-not-allowed opacity-80"
+                                    )}
+                                >
+                                    <Icon className="mr-2 h-4 w-4" />
+                                    <span>{item.title}</span>
+                                </span>
+                            </Link>
+                        )
+                    )
+                }))
+                :
+                <div className="space-x-2 space-y-2 justify-center text-center">
+                    <Link href="/login" className={cn(buttonVariants({ size: "lg" }))}>Log In</Link>
+                    <Link href="/signup" className={cn(buttonVariants({ size: "lg", variant: "outline" }))}>Sign Up</Link>
+                    <p>
+                        Unlock endless possibilities - register or log in to unleash the full potential of our website.
+                    </p>
+                </div>
+            }
+            {/* <UserButton afterSignOutUrl="/" /> */}
+            <ModeToggle />
+        </nav>
+    )
+}
\ No newline at end of file

components/react-query/getQueryClient.ts

+import { QueryClient } from "@tanstack/query-core";
+import { cache } from "react";
+
+const getQueryClient = cache(() => new QueryClient());
+export default getQueryClient;
\ No newline at end of file

components/react-query/hydrate.client.tsx

+"use client";
+
+import { HydrateProps, Hydrate as RQHydrate } from "@tanstack/react-query";
+
+export default function Hydrate(props: HydrateProps) {
+    return <RQHydrate {...props} />;
+}
\ No newline at end of file

components/react-query/provider.tsx

+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React from "react";
+
+export default function Providers({ children }: React.PropsWithChildren) {
+    const [client] = React.useState(
+        new QueryClient({ defaultOptions: { queries: { staleTime: 5000 } } })
+    );
+
+    return (
+        <QueryClientProvider client={client}>
+            {children}
+        </QueryClientProvider>
+    );
+}
\ No newline at end of file

components/site-footer.tsx

+import { Icons } from "@/components/ui/icons"
+import { cn } from "@/lib/utils"
+
+export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
+    return (
+        <footer className={cn(className)}>
+            <div className="container flex flex-col items-center justify-between gap-4 py-10 md:h-24 md:flex-row md:py-0">
+                <div className="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
+                    <span>
+                        <Icons.logo className="h-7 w-7 dark:hidden" />
+                    </span>
+                    <Icons.logoWhite className="h-7 w-7 hidden dark:block" />
+                    <span className="px-3">
+                        <Icons.logoName className="dark:hidden" />
+                        <Icons.logoWhiteName className="hidden dark:block" />
+                    </span>
+                    <p className="text-center text-sm leading-loose md:text-left">
+                        Built by
+                        Yusuf Akgül,
+                        Omar Kasbah,
+                        Caner Ilaslan,
+                        David Jakszta,
+                        Serdar Dorak,
+                        and Valeria Luft
+                        with ❤️
+                    </p>
+                </div>
+            </div>
+        </footer>
+    )
+}
\ No newline at end of file

components/ui/button.tsx

+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "underline-offset-4 hover:underline text-primary",
+      },
+      size: {
+        default: "h-10 py-2 px-4",
+        sm: "h-9 px-3 rounded-md",
+        lg: "h-11 px-8 rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

components/ui/card.tsx

+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(" flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

components/ui/dropdown-menu.tsx

+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

components/ui/icons.tsx

+import {
+    AlertTriangle,
+    ArrowRight,
+    Check,
+    ChevronLeft,
+    ChevronRight,
+    CreditCard,
+    File,
+    FileText,
+    HelpCircle,
+    Image,
+    Laptop,
+    Loader2,
+    LucideProps,
+    Moon,
+    MoreVertical,
+    Pizza,
+    Plus,
+    Settings,
+    SunMedium,
+    Trash,
+    User,
+    X,
+    type Icon as LucideIcon,
+} from "lucide-react";
+
+export type IconsType = {
+    [key: string]: LucideIcon;
+};
+
+export type Icon = LucideIcon
+
+export const Icons: IconsType = {
+    logo: ({ ...props }: LucideProps) => (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path d="M13.7067 17.1466V22C13.7067 23.1046 12.8113 24 11.7067 24H8.85339C7.74882 24 6.85339 23.1046 6.85339 22V17.1466L10.3417 13.6667L13.7067 17.1466Z" fill="#16161A" />
+            <path d="M12.2799 0H15.1332C16.2378 0 17.1332 0.895431 17.1332 2V6.85339L13.6776 10.3333L10.2799 6.85339V2C10.2799 0.895429 11.1753 0 12.2799 0Z" fill="#16161A" />
+            <path d="M2 6.86666H6.85332L10.3416 10.3333L6.85332 13.72H2C0.895432 13.72 0 12.8246 0 11.72V8.86666C0 7.76209 0.895431 6.86666 2 6.86666Z" fill="#7F5AF0" />
+            <path d="M17.1466 10.2934H21.9999C23.1045 10.2934 23.9999 11.1888 23.9999 12.2934V15.1466C23.9999 16.2512 23.1045 17.1466 21.9999 17.1466H17.1466L13.6776 13.6667L17.1466 10.2934Z" fill="#16161A" />
+        </svg>),
+    logoWhite: ({ ...props }: LucideProps) => (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path d="M13.7067 17.1466V22C13.7067 23.1046 12.8113 24 11.7067 24H8.85339C7.74882 24 6.85339 23.1046 6.85339 22V17.1466L10.3417 13.6667L13.7067 17.1466Z" fill="#FFFFFE" />
+            <path d="M12.2799 0H15.1332C16.2378 0 17.1332 0.895431 17.1332 2V6.85339L13.6776 10.3333L10.2799 6.85339V2C10.2799 0.895429 11.1753 0 12.2799 0Z" fill="#FFFFFE" />
+            <path d="M2 6.86666H6.85332L10.3416 10.3333L6.85332 13.72H2C0.895432 13.72 0 12.8246 0 11.72V8.86666C0 7.76209 0.895431 6.86666 2 6.86666Z" fill="#FFFFFE" />
+            <path d="M17.1466 10.2934H21.9999C23.1045 10.2934 23.9999 11.1888 23.9999 12.2934V15.1466C23.9999 16.2512 23.1045 17.1466 21.9999 17.1466H17.1466L13.6776 13.6667L17.1466 10.2934Z" fill="#FFFFFE" />
+        </svg>),
+    logoName: ({ ...props }: LucideProps) => (
+        <svg width="114" height="22" viewBox="0 0 114 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path d="M11.1 6.24C10.78 5.65333 10.34 5.20667 9.78 4.9C9.22 4.59333 8.56667 4.44 7.82 4.44C6.99333 4.44 6.26 4.62667 5.62 5C4.98 5.37333 4.48 5.90667 4.12 6.6C3.76 7.29333 3.58 8.09333 3.58 9C3.58 9.93333 3.76 10.7467 4.12 11.44C4.49333 12.1333 5.00667 12.6667 5.66 13.04C6.31333 13.4133 7.07333 13.6 7.94 13.6C9.00667 13.6 9.88 13.32 10.56 12.76C11.24 12.1867 11.6867 11.3933 11.9 10.38H7.1V8.24H14.66V10.68C14.4733 11.6533 14.0733 12.5533 13.46 13.38C12.8467 14.2067 12.0533 14.8733 11.08 15.38C10.12 15.8733 9.04 16.12 7.84 16.12C6.49333 16.12 5.27333 15.82 4.18 15.22C3.1 14.6067 2.24667 13.76 1.62 12.68C1.00667 11.6 0.7 10.3733 0.7 9C0.7 7.62667 1.00667 6.4 1.62 5.32C2.24667 4.22667 3.1 3.38 4.18 2.78C5.27333 2.16667 6.48667 1.86 7.82 1.86C9.39333 1.86 10.76 2.24667 11.92 3.02C13.08 3.78 13.88 4.85333 14.32 6.24H11.1ZM16.0116 10.42C16.0116 9.3 16.2316 8.30667 16.6716 7.44C17.1249 6.57333 17.7316 5.90667 18.4916 5.44C19.2649 4.97333 20.1249 4.74 21.0716 4.74C21.8982 4.74 22.6182 4.90667 23.2316 5.24C23.8582 5.57333 24.3582 5.99333 24.7316 6.5V4.92H27.5516V16H24.7316V14.38C24.3716 14.9 23.8716 15.3333 23.2316 15.68C22.6049 16.0133 21.8782 16.18 21.0516 16.18C20.1182 16.18 19.2649 15.94 18.4916 15.46C17.7316 14.98 17.1249 14.3067 16.6716 13.44C16.2316 12.56 16.0116 11.5533 16.0116 10.42ZM24.7316 10.46C24.7316 9.78 24.5982 9.2 24.3316 8.72C24.0649 8.22667 23.7049 7.85333 23.2516 7.6C22.7982 7.33333 22.3116 7.2 21.7916 7.2C21.2716 7.2 20.7916 7.32667 20.3516 7.58C19.9116 7.83333 19.5516 8.20667 19.2716 8.7C19.0049 9.18 18.8716 9.75333 18.8716 10.42C18.8716 11.0867 19.0049 11.6733 19.2716 12.18C19.5516 12.6733 19.9116 13.0533 20.3516 13.32C20.8049 13.5867 21.2849 13.72 21.7916 13.72C22.3116 13.72 22.7982 13.5933 23.2516 13.34C23.7049 13.0733 24.0649 12.7 24.3316 12.22C24.5982 11.7267 24.7316 11.14 24.7316 10.46ZM44.0463 4.76C45.4063 4.76 46.4996 5.18 47.3263 6.02C48.1663 6.84667 48.5863 8.00667 48.5863 9.5V16H45.7863V9.88C45.7863 9.01333 45.5663 8.35333 45.1263 7.9C44.6863 7.43333 44.0863 7.2 43.3263 7.2C42.5663 7.2 41.9596 7.43333 41.5063 7.9C41.0663 8.35333 40.8463 9.01333 40.8463 9.88V16H38.0463V9.88C38.0463 9.01333 37.8263 8.35333 37.3863 7.9C36.9463 7.43333 36.3463 7.2 35.5863 7.2C34.8129 7.2 34.1996 7.43333 33.7463 7.9C33.3063 8.35333 33.0863 9.01333 33.0863 9.88V16H30.2863V4.92H33.0863V6.26C33.4463 5.79333 33.9063 5.42667 34.4663 5.16C35.0396 4.89333 35.6663 4.76 36.3463 4.76C37.2129 4.76 37.9863 4.94667 38.6663 5.32C39.3463 5.68 39.8729 6.2 40.2463 6.88C40.6063 6.24 41.1263 5.72667 41.8063 5.34C42.4996 4.95333 43.2463 4.76 44.0463 4.76ZM61.5433 10.22C61.5433 10.62 61.5166 10.98 61.4633 11.3H53.3633C53.4299 12.1 53.7099 12.7267 54.2033 13.18C54.6966 13.6333 55.3033 13.86 56.0233 13.86C57.0633 13.86 57.8033 13.4133 58.2433 12.52H61.2633C60.9433 13.5867 60.3299 14.4667 59.4233 15.16C58.5166 15.84 57.4033 16.18 56.0833 16.18C55.0166 16.18 54.0566 15.9467 53.2033 15.48C52.3633 15 51.7033 14.3267 51.2233 13.46C50.7566 12.5933 50.5233 11.5933 50.5233 10.46C50.5233 9.31333 50.7566 8.30667 51.2233 7.44C51.6899 6.57333 52.3433 5.90667 53.1833 5.44C54.0233 4.97333 54.9899 4.74 56.0833 4.74C57.1366 4.74 58.0766 4.96667 58.9033 5.42C59.7433 5.87333 60.3899 6.52 60.8433 7.36C61.3099 8.18667 61.5433 9.14 61.5433 10.22ZM58.6433 9.42C58.6299 8.7 58.3699 8.12667 57.8633 7.7C57.3566 7.26 56.7366 7.04 56.0033 7.04C55.3099 7.04 54.7233 7.25333 54.2433 7.68C53.7766 8.09333 53.4899 8.67333 53.3833 9.42H58.6433ZM74.047 4.92V16H71.227V14.6C70.867 15.08 70.3937 15.46 69.807 15.74C69.2337 16.0067 68.607 16.14 67.927 16.14C67.0604 16.14 66.2937 15.96 65.627 15.6C64.9604 15.2267 64.4337 14.6867 64.047 13.98C63.6737 13.26 63.487 12.4067 63.487 11.42V4.92H66.287V11.02C66.287 11.9 66.507 12.58 66.947 13.06C67.387 13.5267 67.987 13.76 68.747 13.76C69.5204 13.76 70.127 13.5267 70.567 13.06C71.007 12.58 71.227 11.9 71.227 11.02V4.92H74.047ZM82.9497 4.76C84.2697 4.76 85.3364 5.18 86.1497 6.02C86.963 6.84667 87.3697 8.00667 87.3697 9.5V16H84.5697V9.88C84.5697 9 84.3497 8.32667 83.9097 7.86C83.4697 7.38 82.8697 7.14 82.1097 7.14C81.3364 7.14 80.723 7.38 80.2697 7.86C79.8297 8.32667 79.6097 9 79.6097 9.88V16H76.8097V4.92H79.6097V6.3C79.983 5.82 80.4564 5.44667 81.0297 5.18C81.6164 4.9 82.2564 4.76 82.9497 4.76ZM91.4523 3.6C90.959 3.6 90.5457 3.44667 90.2123 3.14C89.8923 2.82 89.7323 2.42667 89.7323 1.96C89.7323 1.49333 89.8923 1.10667 90.2123 0.799999C90.5457 0.479999 90.959 0.319999 91.4523 0.319999C91.9457 0.319999 92.3523 0.479999 92.6723 0.799999C93.0057 1.10667 93.1723 1.49333 93.1723 1.96C93.1723 2.42667 93.0057 2.82 92.6723 3.14C92.3523 3.44667 91.9457 3.6 91.4523 3.6ZM92.8323 4.92V16H90.0323V4.92H92.8323ZM98.8588 7.22V12.58C98.8588 12.9533 98.9454 13.2267 99.1188 13.4C99.3054 13.56 99.6121 13.64 100.039 13.64H101.339V16H99.5788C97.2188 16 96.0388 14.8533 96.0388 12.56V7.22H94.7188V4.92H96.0388V2.18H98.8588V4.92H101.339V7.22H98.8588ZM113.953 4.92L107.093 21.24H104.113L106.513 15.72L102.073 4.92H105.213L108.073 12.66L110.973 4.92H113.953Z" fill="black" />
+        </svg>),
+    logoWhiteName: ({ ...props }: LucideProps) => (
+        <svg width="114" height="22" viewBox="0 0 114 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path d="M11.1 6.24C10.78 5.65333 10.34 5.20667 9.78 4.9C9.22 4.59333 8.56667 4.44 7.82 4.44C6.99333 4.44 6.26 4.62667 5.62 5C4.98 5.37333 4.48 5.90667 4.12 6.6C3.76 7.29333 3.58 8.09333 3.58 9C3.58 9.93333 3.76 10.7467 4.12 11.44C4.49333 12.1333 5.00667 12.6667 5.66 13.04C6.31333 13.4133 7.07333 13.6 7.94 13.6C9.00667 13.6 9.88 13.32 10.56 12.76C11.24 12.1867 11.6867 11.3933 11.9 10.38H7.1V8.24H14.66V10.68C14.4733 11.6533 14.0733 12.5533 13.46 13.38C12.8467 14.2067 12.0533 14.8733 11.08 15.38C10.12 15.8733 9.04 16.12 7.84 16.12C6.49333 16.12 5.27333 15.82 4.18 15.22C3.1 14.6067 2.24667 13.76 1.62 12.68C1.00667 11.6 0.7 10.3733 0.7 9C0.7 7.62667 1.00667 6.4 1.62 5.32C2.24667 4.22667 3.1 3.38 4.18 2.78C5.27333 2.16667 6.48667 1.86 7.82 1.86C9.39333 1.86 10.76 2.24667 11.92 3.02C13.08 3.78 13.88 4.85333 14.32 6.24H11.1ZM16.0116 10.42C16.0116 9.3 16.2316 8.30667 16.6716 7.44C17.1249 6.57333 17.7316 5.90667 18.4916 5.44C19.2649 4.97333 20.1249 4.74 21.0716 4.74C21.8982 4.74 22.6182 4.90667 23.2316 5.24C23.8582 5.57333 24.3582 5.99333 24.7316 6.5V4.92H27.5516V16H24.7316V14.38C24.3716 14.9 23.8716 15.3333 23.2316 15.68C22.6049 16.0133 21.8782 16.18 21.0516 16.18C20.1182 16.18 19.2649 15.94 18.4916 15.46C17.7316 14.98 17.1249 14.3067 16.6716 13.44C16.2316 12.56 16.0116 11.5533 16.0116 10.42ZM24.7316 10.46C24.7316 9.78 24.5982 9.2 24.3316 8.72C24.0649 8.22667 23.7049 7.85333 23.2516 7.6C22.7982 7.33333 22.3116 7.2 21.7916 7.2C21.2716 7.2 20.7916 7.32667 20.3516 7.58C19.9116 7.83333 19.5516 8.20667 19.2716 8.7C19.0049 9.18 18.8716 9.75333 18.8716 10.42C18.8716 11.0867 19.0049 11.6733 19.2716 12.18C19.5516 12.6733 19.9116 13.0533 20.3516 13.32C20.8049 13.5867 21.2849 13.72 21.7916 13.72C22.3116 13.72 22.7982 13.5933 23.2516 13.34C23.7049 13.0733 24.0649 12.7 24.3316 12.22C24.5982 11.7267 24.7316 11.14 24.7316 10.46ZM44.0463 4.76C45.4063 4.76 46.4996 5.18 47.3263 6.02C48.1663 6.84667 48.5863 8.00667 48.5863 9.5V16H45.7863V9.88C45.7863 9.01333 45.5663 8.35333 45.1263 7.9C44.6863 7.43333 44.0863 7.2 43.3263 7.2C42.5663 7.2 41.9596 7.43333 41.5063 7.9C41.0663 8.35333 40.8463 9.01333 40.8463 9.88V16H38.0463V9.88C38.0463 9.01333 37.8263 8.35333 37.3863 7.9C36.9463 7.43333 36.3463 7.2 35.5863 7.2C34.8129 7.2 34.1996 7.43333 33.7463 7.9C33.3063 8.35333 33.0863 9.01333 33.0863 9.88V16H30.2863V4.92H33.0863V6.26C33.4463 5.79333 33.9063 5.42667 34.4663 5.16C35.0396 4.89333 35.6663 4.76 36.3463 4.76C37.2129 4.76 37.9863 4.94667 38.6663 5.32C39.3463 5.68 39.8729 6.2 40.2463 6.88C40.6063 6.24 41.1263 5.72667 41.8063 5.34C42.4996 4.95333 43.2463 4.76 44.0463 4.76ZM61.5433 10.22C61.5433 10.62 61.5166 10.98 61.4633 11.3H53.3633C53.4299 12.1 53.7099 12.7267 54.2033 13.18C54.6966 13.6333 55.3033 13.86 56.0233 13.86C57.0633 13.86 57.8033 13.4133 58.2433 12.52H61.2633C60.9433 13.5867 60.3299 14.4667 59.4233 15.16C58.5166 15.84 57.4033 16.18 56.0833 16.18C55.0166 16.18 54.0566 15.9467 53.2033 15.48C52.3633 15 51.7033 14.3267 51.2233 13.46C50.7566 12.5933 50.5233 11.5933 50.5233 10.46C50.5233 9.31333 50.7566 8.30667 51.2233 7.44C51.6899 6.57333 52.3433 5.90667 53.1833 5.44C54.0233 4.97333 54.9899 4.74 56.0833 4.74C57.1366 4.74 58.0766 4.96667 58.9033 5.42C59.7433 5.87333 60.3899 6.52 60.8433 7.36C61.3099 8.18667 61.5433 9.14 61.5433 10.22ZM58.6433 9.42C58.6299 8.7 58.3699 8.12667 57.8633 7.7C57.3566 7.26 56.7366 7.04 56.0033 7.04C55.3099 7.04 54.7233 7.25333 54.2433 7.68C53.7766 8.09333 53.4899 8.67333 53.3833 9.42H58.6433ZM74.047 4.92V16H71.227V14.6C70.867 15.08 70.3937 15.46 69.807 15.74C69.2337 16.0067 68.607 16.14 67.927 16.14C67.0604 16.14 66.2937 15.96 65.627 15.6C64.9604 15.2267 64.4337 14.6867 64.047 13.98C63.6737 13.26 63.487 12.4067 63.487 11.42V4.92H66.287V11.02C66.287 11.9 66.507 12.58 66.947 13.06C67.387 13.5267 67.987 13.76 68.747 13.76C69.5204 13.76 70.127 13.5267 70.567 13.06C71.007 12.58 71.227 11.9 71.227 11.02V4.92H74.047ZM82.9497 4.76C84.2697 4.76 85.3364 5.18 86.1497 6.02C86.963 6.84667 87.3697 8.00667 87.3697 9.5V16H84.5697V9.88C84.5697 9 84.3497 8.32667 83.9097 7.86C83.4697 7.38 82.8697 7.14 82.1097 7.14C81.3364 7.14 80.723 7.38 80.2697 7.86C79.8297 8.32667 79.6097 9 79.6097 9.88V16H76.8097V4.92H79.6097V6.3C79.983 5.82 80.4564 5.44667 81.0297 5.18C81.6164 4.9 82.2564 4.76 82.9497 4.76ZM91.4523 3.6C90.959 3.6 90.5457 3.44667 90.2123 3.14C89.8923 2.82 89.7323 2.42667 89.7323 1.96C89.7323 1.49333 89.8923 1.10667 90.2123 0.799999C90.5457 0.479999 90.959 0.319999 91.4523 0.319999C91.9457 0.319999 92.3523 0.479999 92.6723 0.799999C93.0057 1.10667 93.1723 1.49333 93.1723 1.96C93.1723 2.42667 93.0057 2.82 92.6723 3.14C92.3523 3.44667 91.9457 3.6 91.4523 3.6ZM92.8323 4.92V16H90.0323V4.92H92.8323ZM98.8588 7.22V12.58C98.8588 12.9533 98.9454 13.2267 99.1188 13.4C99.3054 13.56 99.6121 13.64 100.039 13.64H101.339V16H99.5788C97.2188 16 96.0388 14.8533 96.0388 12.56V7.22H94.7188V4.92H96.0388V2.18H98.8588V4.92H101.339V7.22H98.8588ZM113.953 4.92L107.093 21.24H104.113L106.513 15.72L102.073 4.92H105.213L108.073 12.66L110.973 4.92H113.953Z" fill="#FFFFFE" />
+        </svg>),
+    close: X,
+    spinner: Loader2,
+    chevronLeft: ChevronLeft,
+    chevronRight: ChevronRight,
+    trash: Trash,
+    post: FileText,
+    page: File,
+    media: Image,
+    settings: Settings,
+    billing: CreditCard,
+    ellipsis: MoreVertical,
+    add: Plus,
+    warning: AlertTriangle,
+    user: User,
+    arrowRight: ArrowRight,
+    help: HelpCircle,
+    pizza: Pizza,
+    sun: SunMedium,
+    moon: Moon,
+    laptop: Laptop,
+    check: Check,
+}
\ No newline at end of file

components/ui/skeleton.tsx

+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

components/ui/theme-provider.tsx

+"use client"
+
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { ThemeProviderProps } from "next-themes/dist/types"
+import * as React from "react"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
\ No newline at end of file

lib/config/dashboard.ts

+import { DashboardConfig } from "@/types";
+
+export const dashboardConfig: DashboardConfig = {
+    sidebarNav: [
+        {
+            title: "Home",
+            href: "/home",
+            icon: "post",
+        },
+        {
+            title: "Games",
+            href: "/games",
+            icon: "billing",
+        },
+        {
+            title: "Communities",
+            href: "/communities",
+            icon: "settings",
+        },
+        {
+            title: "Notifications",
+            href: "/notifications",
+            icon: "settings",
+        },
+        {
+            title: "Followers",
+            href: "/followers",
+            icon: "settings",
+        },
+        {
+            title: "My Profile",
+            href: "",
+            icon: "settings",
+        },
+        {
+            title: "Settings",
+            href: "/settings",
+            icon: "settings",
+        },
+        {
+            title: "Help",
+            href: "/help",
+            icon: "settings",
+        },
+    ],
+}
\ No newline at end of file

lib/config/site.ts

+import { SiteConfig } from "@/types"
+
+export const siteConfig: SiteConfig = {
+    name: "GameUnity",
+    description:
+        "Your game tracker to finally get an overview of your games built using the new router, server components and everything new in Next.js 13.",
+    url: "",
+    ogImage: "",
+}
\ No newline at end of file

lib/igdb.ts

-import { IAuth, IGame } from "@/types/types"
-import { calculateOffset, getImageURL } from "./utils"
+import { calculateOffset, getImageURL } from "@/lib/utils"
+import { IAuth, IGame } from "@/types/igdb-types"
 
 const TWITCH_AUTH_BASE_URL = process.env.TWITCH_AUTH_BASE_URL ?? ''
 const IGDB_BASE_URL = process.env.IGDB_BASE_URL ?? ''
@@ -7,7 +7,7 @@ const IGDB_BASE_URL = process.env.IGDB_BASE_URL ?? ''
 const CLIENT_ID = process.env.TWITCH_CLIENT_ID ?? ''
 const CLIENT_SECRET = process.env.TWITCH_CLIENT_SECRET ?? ''
 
-const limit = 200
+const limit = 100
 
 let _auth: IAuth
 let _lastUpdate = 0