add swc and fix up nav

components/Nav.tsx

@@ -41,21 +41,21 @@ const Nav: React.FC<Props> = (props) => {
                 </div>
                 <div className="flex flex-row items-center text-right">
                     {!user && (
-                        <Link className="text-lg font-medium text-gray-800 dark:text-gray-300 hover:text-gray-600 hover:dark:text-gray-200" href="/login">Login</Link>
+                        <Link className="text-lg font-medium text-gray-800 dark:text-gray-300 hover:text-gray-600 hover:dark:text-gray-200" href="/auth/signin">Sign in</Link>
                     )}
                     {user && (
                         <span className="flex flex-row items-center gap-x-4 text-lg font-medium text-gray-800 dark:text-gray-300 hover:text-gray-600 hover:dark:text-gray-200">
                             Hello, {user?.user_metadata?.full_name}
                             <button onClick={toggleUserInfo}>
-                                <img className="rounded-xl w-12" alt="Avatar name" src={user?.user_metadata?.avatar_url} />
+                                <img referrerPolicy="no-referrer" className="rounded-xl w-12" alt="Avatar name" src={user?.user_metadata?.avatar_url} />
                             </button>
                         </span>
                     )}
                 </div>
             </nav>
             <div className={`${userInfoOpened ? "flex" : "hidden"} items- flex-col gap-y-4 absolute right-0 bg-gray-300 dark:bg-nav-bg transition ease-in-out rounded-bl-xl z-[40]`}>
                 <div className="flex items-center flex-col gap-y-4 px-16 pt-8 pb-2">
-                    <img className="rounded-xl w-24" alt="Avatar name" src={user?.user_metadata?.avatar_url} />
+                    <img referrerPolicy="no-referrer" className="rounded-xl w-24" alt="Avatar name" src={user?.user_metadata?.avatar_url} />
                     <div>
                         <h1 className="text-xl font-bold text-gray-800 dark:text-gray-200 text-center">
                             {user?.user_metadata?.full_name}
@@ -89,7 +89,7 @@ const Nav: React.FC<Props> = (props) => {
                     } finally {
                         setLoading(false)
                         setUserInfoOpened(false) // we need this to make it so if they logout it closes the user info page <3
-                        router.reload()
+                        router.push("/")
                     }
                 }} variant="outlined" startIcon={<Logout />} className="mx-12 dark:text-gray-300 text-gray-800 border-gray-800 hover:border-gray-700 dark:border-gray-300 hover:dark:border-gray-200 font-sans font-bold normal-case">
                     Sign out

lib/providers.tsx

@@ -1,25 +1,32 @@
 import { Google, GitHub, Twitter } from "@mui/icons-material";
+import { SiMicrosoft, SiSpotify, SiGitlab } from "react-icons/si";
+
+let standardClasses = "text-xl"
+
 const pages = {
     "google": {
         displayName: "Google",
-        icon: <Google />
+        icon: <Google className={standardClasses} />
     },
     "spotify": {
-        displayName: "Spotify"
+        displayName: "Spotify",
+        icon: <SiSpotify className={standardClasses} />
     },
     "azure": {
-        displayName: "Microsoft"
+        displayName: "Microsoft",
+        icon: <SiMicrosoft className={standardClasses} />
     },
     "twitter": {
         displayName: "Twitter",
-        icon: <Twitter />
+        icon: <Twitter className={standardClasses} />
     },
     "github": {
         displayName: "Github",
-        icon: <GitHub />
+        icon: <GitHub className={standardClasses} />
     },
     "gitlab": {
-        displayName: "Gitlab"
+        displayName: "Gitlab",
+        icon: <SiGitlab className={standardClasses} />
     }
 }
 

next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  swcMinify: true
 }
 
 module.exports = nextConfig

pages/auth/signin.tsx

@@ -0,0 +1,55 @@
+import { useState, useEffect } from "react"
+import type { NextPage } from "next"
+import providers from "../../lib/providers"
+import { Tooltip, Button, Badge } from "@mui/material"
+import { Logout, Menu, Notifications, Settings } from "@mui/icons-material"
+import { supabase } from "../../lib/supabase"
+import useUser from "../../hooks/useUser"
+import { useRouter } from "next/router"
+
+const Login: NextPage = () => {
+    const router = useRouter()
+    const { user } = useUser()
+
+    const [loading, setLoading] = useState(false)
+    const [email, setEmail] = useState("")
+
+    useEffect(() => {
+        if (user) router.push("/")
+    })
+
+    async function handleLogin(provider) {
+        setLoading(true)
+        try {
+            await supabase.auth.signIn({
+                provider
+            })
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <>
+        <div className="flex flex-col justify-center gap-y-2 items-center">
+                <h2 className="text-3xl dark:text-gray-300 text-gray-800 text-center">Sign in to Flame</h2>
+                <div className="flex flex-row items-center gap-x-2">
+                    {
+                        Object.keys(providers).map((provider, index) => (
+                            <Button key={provider} onClick={
+                                async (e) => {
+                                    handleLogin(provider)
+                                }
+                            }
+                            variant="outlined" className="dark:text-gray-300 text-gray-800 border-gray-800 hover:border-gray-700 dark:border-gray-300 hover:dark:border-gray-200 font-sans font-bold normal-case">
+                                {providers[provider].icon || <></>}
+                            </Button>
+                        ))
+                    }
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default Login