fix: show sign in button if user is not signed in

Author: Brandon Chen

web/src/app/login/page.tsx

@@ -1,16 +1,15 @@
 'use client'
 
 import { BackgroundBeams } from '@/components/ui/background-beams'
-import { SignInButton } from '@/components/navbar/sign-in-button'
 import { useSearchParams } from 'next/navigation'
 import {
   Card,
   CardHeader,
   CardTitle,
   CardDescription,
-  CardFooter,
 } from '@/components/ui/card'
 import CardWithBeams from '@/components/card-with-beams'
+import { SignInCardFooter } from '@/components/sign-in/sign-in-card-footer'
 
 const Home = () => {
   const searchParams = useSearchParams()
@@ -55,16 +54,7 @@ const Home = () => {
                   averted, phew!)
                 </CardDescription>
               </CardHeader>
-              <CardFooter className="flex flex-col space-y-2">
-                <SignInButton
-                  providerDomain="github.com"
-                  providerName="github"
-                />
-                {/* <SignInButton
-                  providerDomain="google.com"
-                  providerName="google"
-                /> */}
-              </CardFooter>
+              <SignInCardFooter />
             </Card>
           ) : (
             <Card>
@@ -74,16 +64,7 @@ const Home = () => {
                   Increased rate limits, priority support, and more!
                 </CardDescription>
               </CardHeader>
-              <CardFooter className="flex flex-col space-y-2">
-                <SignInButton
-                  providerDomain="github.com"
-                  providerName="github"
-                />
-                {/* <SignInButton
-                  providerDomain="google.com"
-                  providerName="google"
-                /> */}
-              </CardFooter>
+              <SignInCardFooter />
             </Card>
           )}
         </div>

web/src/app/referrals/page.tsx

@@ -4,7 +4,13 @@ import { useSession } from 'next-auth/react'
 import { useQuery } from '@tanstack/react-query'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
 import { toast } from '@/components/ui/use-toast'
 import { ReferralData } from '@/app/api/referrals/route'
 import { Skeleton } from '@/components/ui/skeleton'
@@ -15,6 +21,7 @@ import { Separator } from '@/components/ui/separator'
 import Link from 'next/link'
 import { CREDITS_REFERRAL_BONUS } from 'common/constants'
 import { getReferralLink } from 'common/util/referral'
+import { SignInCardFooter } from '@/components/sign-in/sign-in-card-footer'
 
 const copyReferral = (link: string) => {
   navigator.clipboard.writeText(link)
@@ -64,8 +71,10 @@ const ReferralsPage = () => {
       <Card className="mb-6">
         <CardHeader>
           <CardTitle>You&apos;re not logged in.</CardTitle>
+          <CardDescription>No code for you!</CardDescription>
         </CardHeader>
-        <CardContent>No referral code for you!</CardContent>
+        <CardContent>Log in here to get a referral code</CardContent>
+        <SignInCardFooter />
       </Card>
     )
   }

web/src/components/navbar/navbar.tsx

@@ -20,11 +20,12 @@ export const Navbar = async () => {
         <Link href="/pricing" className="hover:text-blue-400 transition-colors">
           Pricing
         </Link>
-        {session && (
-          <Link href="/referrals" className="hover:text-blue-400 transition-colors">
-            Referrals
-          </Link>
-        )}
+        <Link
+          href="/referrals"
+          className="hover:text-blue-400 transition-colors"
+        >
+          Referrals
+        </Link>
       </nav>
       <div className="flex items-center space-x-4">
         {session ? (

web/src/components/navbar/sign-in-button.tsx renamed to web/src/components/sign-in/sign-in-button.tsx

@@ -1,14 +1,13 @@
 'use client'
 
-import { useState, useTransition } from 'react'
+import { useTransition } from 'react'
 import { signIn } from 'next-auth/react'
 
 import { Icons } from '@/components/icons'
 import { Button } from '@/components/ui/button'
 import { OAuthProviderType } from 'next-auth/providers/oauth-types'
 import { sleep } from 'common/util/helpers'
 import { toast } from '../ui/use-toast'
-import Image from 'next/image'
 
 export const SignInButton = ({
   providerName,
@@ -38,10 +37,9 @@ export const SignInButton = ({
       className="flex items-center gap-2"
     >
       {isPending && <Icons.loader className="mr-2 size-4 animate-spin" />}
-      <Image
+      <img
         src={`https://s2.googleusercontent.com/s2/favicons?domain=${providerDomain}`}
         className="rounded-full"
-        alt={providerName + ' logo'}
       />
       Continue with{' '}
       {providerName.charAt(0).toUpperCase() + providerName.slice(1)}

web/src/components/sign-in/sign-in-card-footer.tsx

@@ -0,0 +1,14 @@
+import { SignInButton } from './sign-in-button'
+import { CardFooter } from '../ui/card'
+
+export const SignInCardFooter = () => {
+  return (
+    <CardFooter className="flex flex-col space-y-2">
+      <SignInButton providerDomain="github.com" providerName="github" />
+      {/* <SignInButton
+                providerDomain="google.com"
+                providerName="google"
+              /> */}
+    </CardFooter>
+  )
+}