Updated cookies

src/app/(main)/layout.tsx

@@ -4,7 +4,7 @@ export default function RootLayout({ children }: LayoutProps<"/">) {
     return (
         <>
             <Header />
-            <div>
+            <div className="pt-header">
                 {children}
             </div>
         </>

src/app/(main)/settings/page.tsx

@@ -0,0 +1,13 @@
+import ClearCookiesButton from "@/components/clear-cookies"
+
+export default function SettingsPage() {
+    return (
+        <div className="p-8 space-y-4">
+            <div>
+                <h2 className="text-2xl font-bold">Cookies</h2>
+                <p>The site stores cookies to save prefrences. If you wish to delete these cookies use the bottom bellow.</p>
+            </div>
+            <ClearCookiesButton />
+        </div>
+    )
+}

src/app/(stats)/player/[ign]/page.tsx

@@ -78,7 +78,7 @@ async function SuspendedPage({ params }: Pick<PageProps<"/player/[ign]">, "param
     const { data: layout } = schema.safeParse(JSON.parse(c.get(COOKIE_VALUES.statsOrder)?.value ?? "null"))
 
     return (
-        <div className="flex flex-col items-center pt-20 pb-5">
+        <div className="flex flex-col items-center pb-5 pt-15">
             <DisplayName
                 ign={player.displayname}
                 uuid={player.uuid}

src/components/clear-cookies.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { COOKIE_VALUES } from "@/data/general"
+import Cookies from "js-cookie"
+import { toast } from "sonner"
+import { Button } from "./ui/button"
+
+export default function ClearCookiesButton() {
+    return (
+        <Button
+            onClick={() => {
+                const values = Object.values(COOKIE_VALUES)
+                let existing: number = 0
+
+                for (const val of values) {
+                    const c = Cookies.get(val)
+                    if (c) existing++
+
+                    Cookies.remove(val)
+                }
+
+                if (existing === 0) {
+                    toast.success("No cookies to clear")
+                } else {
+                    toast.success("Cleared " + existing + " cookies")
+                }
+            }}
+            variant="destructive"
+        >
+            Clear Cookies
+        </Button>
+    )
+}

src/components/header.tsx

@@ -1,3 +1,4 @@
+import { Settings } from "lucide-react"
 import Link from "next/link"
 import { SearchBar } from "./search-bar"
 import { ThemeSwitcher } from "./theme-switcher"
@@ -10,7 +11,12 @@ export default function Header({ searchBar = false }: { searchBar?: boolean }) {
                     <span className="text-lg font-semibold">HypStats</span>
                 </Link>
                 {searchBar && <SearchBar navbar />}
+                <div className="flex gap-2 items-center">
                     <ThemeSwitcher />
+                    <Link href="/settings">
+                        <Settings />
+                    </Link>
+                </div>
             </nav>
         </header>
     )