From 8013002b6d2a9e7d13214492cfce7e8fd809ea26 Mon Sep 17 00:00:00 2001
From: busybox <busybox11th@gmail.com>
Date: Fri, 22 Nov 2024 23:36:00 +0100
Subject: [PATCH] feat(index): Show default player login btn

---
 app/routes/index.tsx | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/app/routes/index.tsx b/app/routes/index.tsx
index c66f596..9ab577e 100644
--- a/app/routes/index.tsx
+++ b/app/routes/index.tsx
@@ -1,13 +1,31 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { MiscLinks } from "@/components/MiscLinks";
 import { usePlayerProviders } from "@/components/contexts/PlayerProviders";
+import { useMemo } from "react";
 
 export const Route = createFileRoute("/")({
   component: Home,
 });
 
 function Home() {
-  const { providers, activePlayer } = usePlayerProviders();
+  const { providers, activePlayer, lastUsedProvider } = usePlayerProviders();
+
+  const { defaultProvider, otherProviders } = useMemo(() => {
+    const defaultProviderId =
+      lastUsedProvider ? lastUsedProvider.id : "spotify";
+
+    const defaultProvider = Object.values(providers).find(
+      (provider) => provider.meta.id === defaultProviderId
+    )!;
+    const otherProviders = Object.values(providers).filter(
+      (provider) => provider.meta.id !== defaultProviderId
+    );
+
+    return {
+      defaultProvider,
+      otherProviders,
+    };
+  }, [providers]);
 
   return (
     <main className="flex flex-col items-center justify-center h-screen gap-12">
@@ -26,7 +44,14 @@ function Home() {
       </section>
 
       <div className="flex flex-col gap-4">
-        {Object.entries(providers).map(([id, provider]) => {
+        <button
+          onClick={() => defaultProvider.authenticate()}
+          className="bg-[#15883D] px-12 py-3 rounded-full text-lg tracking-wide active:scale-95 transition mx-auto"
+        >
+          Login with {defaultProvider.meta.name}
+        </button>
+
+        {Object.entries(otherProviders).map(([id, provider]) => {
           return (
             <button
               key={id}