import { createClient } from "@/utils/supabase/server"; import Link from "next/link"; import { redirect } from "next/navigation"; import crypto from 'crypto'; export default async function AuthButton() { const supabase = createClient(); const { data: { user }, } = await supabase.auth.getUser(); const signOut = async () => { "use server"; const supabase = createClient(); await supabase.auth.signOut(); return redirect("/login"); }; if(user){ let email = user.email; if(email != null){ const emailHash = crypto.createHash('md5').update(email.trim().toLowerCase()).digest('hex'); const gravatarUrl = `https://www.gravatar.com/avatar/${emailHash}`; return( <div className="flex justify-center items-center pt-2 "> <nav className="w-1/3 bg-neroshi-blue-300 bg-opacity-10 flex justify-center h-16 animate-in rounded-3xl" style={{ backdropFilter: 'blur(10px)' }}> <div className="w-full max-w-2xl flex justify-between items-center p-3 text-sm"> <div className="flex items-center gap-2 "> <Link href="/gallery" className="py-2 px-3 flex rounded-3xl no-underline bg-neroshi-blue-900 hover:bg-neroshi-blue-800" > Gallery </Link> <Link href="/livestream" className="py-2 px-3 flex rounded-3xl no-underline bg-neroshi-blue-900 hover:bg-neroshi-blue-800" > Stream </Link> <Link href="/commissions" className="py-2 px-3 flex rounded-3xl no-underline bg-neroshi-blue-900 hover:bg-neroshi-blue-800" > Commissions </Link> <Link href="/subscriptions" className="py-2 px-3 flex rounded-3xl no-underline bg-neroshi-blue-900 hover:bg-neroshi-blue-800" > Subscription </Link> </div> <div className="flex items-center gap-2"> <form action={signOut}> <button className="py-2 px-4 rounded-3xl no-underline bg-neroshi-blue-900 hover:bg-neroshi-blue-800"> Logout </button> </form> <img src={gravatarUrl} alt="Profile" className="w-10 h-10 object-cover rounded-full cursor-pointer" /> </div> </div> </nav> </div>) } } else{ return( <div className="flex justify-center items-center pt-2 "> <nav className="w-1/3 bg-neroshi-blue-300 bg-opacity-10 flex justify-center h-16 animate-in rounded-3xl" style={{ backdropFilter: 'blur(10px)' }}> <div className="w-full max-w-2xl flex justify-between items-center p-3 text-sm"> <div className="flex items-center gap-2 "> <Link href="/gallery" className="py-2 px-3 flex rounded-3xl no-underline bg-neroshi-blue-900 hover:bg-neroshi-blue-800" > Gallery </Link> <Link href="/livestream" className="py-2 px-3 flex rounded-3xl no-underline bg-neroshi-blue-900 hover:bg-neroshi-blue-800" > Stream </Link> <Link href="/commissions" className="py-2 px-3 flex rounded-3xl no-underline bg-neroshi-blue-900 hover:bg-neroshi-blue-800" > Commissions </Link> <Link href="/subscriptions" className="py-2 px-3 flex rounded-3xl no-underline bg-neroshi-blue-900 hover:bg-neroshi-blue-800" > Subscription </Link> </div> <div className="flex items-center gap-2"> <Link href="/login" className="py-2 px-3 flex rounded-3xl no-underline bg-neroshi-blue-900 hover:bg-neroshi-blue-800" > Login </Link> <Link href="/login" className="py-2 px-3 flex rounded-3xl no-underline bg-neroshi-blue-900 hover:bg-neroshi-blue-800" > Signup </Link> </div> </div> </nav> </div>) } }