Fiscal Sponsorship page: display user's avatar if they're signed in to HCB (#1229)

* Fiscal Sponsorship page: display user's avatar if they're signed in to HCB

* yeah

components/fiscal-sponsorship/sign-in.js

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react'
+import { Button, Image } from 'theme-ui'
+
+export default function SignIn() {
+  const [user, setUser] =
+    /** @type {ReturnType<typeof useState<{name?: string, avatar?: string} | null>>} */ (
+      useState(null)
+    )
+
+  useEffect(() => {
+    ;(async () => {
+      const _user = await fetch('https://hcb.hackclub.com/api/current_user', {
+        credentials: 'include'
+      })
+        .then(r => (r.ok ? r.json() : null))
+        .catch(() => {})
+
+      if (_user) setUser(_user)
+    })()
+  }, [])
+
+  return (
+    <Button
+      as="a"
+      href="https://hcb.hackclub.com"
+      variant="outline"
+      sx={{ color: 'white' }}
+    >
+      {user ? (
+        <>
+          <Image
+            src={user.avatar}
+            alt={`${user.name}'s HCB avatar`}
+            width={30}
+            sx={{ borderRadius: 'circle', mr: 2, boxShadow: 'elevated' }}
+          />
+          Continue to HCB
+        </>
+      ) : (
+        'Sign in'
+      )}
+    </Button>
+  )
+}

pages/fiscal-sponsorship/index.js

@@ -24,6 +24,7 @@ import Tilt from '../../components/tilt'
 import ContactBanner from '../../components/fiscal-sponsorship/contact'
 import Features from '../../components/fiscal-sponsorship/features'
 import OuternetImgFile from '../../public/home/outernet-110.jpg'
+import SignIn from '../../components/fiscal-sponsorship/sign-in'
 
 const organizations = [
   {
@@ -247,14 +248,7 @@ export default function Page() {
                 Apply now
               </Button>
             </Link>
-            <Button
-              as="a"
-              href="https://hcb.hackclub.com"
-              variant="outline"
-              sx={{ color: 'white' }}
-            >
-              Sign in
-            </Button>
+            <SignIn />
           </Flex>
         </Container>
       </Box>