feat: add sign in button to explorer

src/app/explorer/page.tsx

@@ -1,9 +1,8 @@
 import { AuthBoundary } from "@/components/AuthBoundary";
 import { GuildCardSkeleton } from "@/components/GuildCard";
 import { GuildCard } from "@/components/GuildCard";
-import { Button } from "@/components/ui/Button";
+import { SignInButton } from "@/components/SignInButton";
 import { env } from "@/lib/env";
-import { SignIn } from "@phosphor-icons/react/dist/ssr";
 import {
   HydrationBoundary,
   QueryClient,
@@ -79,13 +78,7 @@ async function YourGuildsSection() {
               Sign in to view your guilds or create new ones
             </p>
 
-            <Button
-              colorScheme="primary"
-              leftIcon={<SignIn weight="bold" />}
-              className="ml-auto h-10"
-            >
-              Sign in
-            </Button>
+            <SignInButton className="ml-auto" />
           </div>
         }
       >

src/components/SignInButton.tsx

@@ -1,23 +1,28 @@
 "use client";
 
 import { signInDialogOpenAtom } from "@/config/atoms";
+import { cn } from "@/lib/cssUtils";
 import { SignIn } from "@phosphor-icons/react/dist/ssr";
 import { useSetAtom } from "jotai";
+import type { ComponentProps } from "react";
 import { Button } from "./ui/Button";
-import { Card } from "./ui/Card";
 
-export const SignInButton = () => {
+export const SignInButton = ({
+  className,
+  ...props
+}: ComponentProps<typeof Button>) => {
   const setSignInDialogOpen = useSetAtom(signInDialogOpenAtom);
 
   return (
-    <Card className="rounded-xl">
-      <Button
-        className="h-10"
-        leftIcon={<SignIn weight="bold" />}
-        onClick={() => setSignInDialogOpen(true)}
-      >
-        Sign in
-      </Button>
-    </Card>
+    <Button
+      className={cn("h-10", className)}
+      variant="solid"
+      colorScheme="primary"
+      {...props}
+      leftIcon={<SignIn weight="bold" />}
+      onClick={() => setSignInDialogOpen(true)}
+    >
+      Sign in
+    </Button>
   );
 };