fix: sign-in page

components/header.tsx

@@ -41,7 +41,12 @@ export async function Header() {
           {session?.user ? (
             <UserMenu user={session.user} />
           ) : (
-            <LoginButton className="-ml-2" />
+            <LoginButton
+              variant="link"
+              showGithubIcon={false}
+              text="Login"
+              className="-ml-2"
+            />
           )}
         </div>
       </div>

components/login-button.tsx

@@ -5,18 +5,24 @@ import { signIn } from 'next-auth/react'
 
 import { cn } from '@/lib/utils'
 import { Button, type ButtonProps } from '@/components/ui/button'
-import { IconSpinner } from '@/components/ui/icons'
+import { IconGitHub, IconSpinner } from '@/components/ui/icons'
 
 interface LoginButtonProps extends ButtonProps {
+  showGithubIcon?: boolean
   text?: string
 }
 
-export function LoginButton({ className, ...props }: LoginButtonProps) {
+export function LoginButton({
+  text = 'Login with GitHub',
+  showGithubIcon = true,
+  className,
+  ...props
+}: LoginButtonProps) {
   const [isLoading, setIsLoading] = React.useState(false)
 
   return (
     <Button
-      variant="link"
+      variant="outline"
       onClick={() => {
         setIsLoading(true)
         signIn('github')
@@ -25,8 +31,12 @@ export function LoginButton({ className, ...props }: LoginButtonProps) {
       className={cn(className)}
       {...props}
     >
-      {isLoading && <IconSpinner className="mr-2 animate-spin" />}
-      Login
+      {isLoading ? (
+        <IconSpinner className="mr-2 animate-spin" />
+      ) : showGithubIcon ? (
+        <IconGitHub className="mr-2" />
+      ) : null}
+      {text}
     </Button>
   )
 }