feat(index): Show default player login btn

busybox11 · Nov 22, 2024 · 8013002 · 8013002
1 parent 88efbbd
commit 8013002
Showing 1 changed file with 27 additions and 2 deletions.
diff --git 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}