Implement SignIn/SignOut

src/components/Button.astro

@@ -1,12 +0,0 @@
----
-const { class: className } = Astro.props
----
-
-<button
-  class:list={[
-    'bg-blue-600 hover:bg-blue-700 py-2 px-3.5 rounded-lg',
-    className
-  ]}
->
-  <slot />
-</button>

src/components/Button.tsx

@@ -0,0 +1,26 @@
+import type { PropsWithChildren } from 'react'
+import clsx from 'clsx'
+import { BarsRotateFade } from 'react-svg-spinners'
+
+export default function Button(props: PropsWithChildren<{ className?: string; loading?: boolean }>) {
+  const { children, className, loading = false, ...restProps } = props
+  return (
+    <button
+      className={clsx(
+        loading ? 'bg-blue-400 cursor-progress' : 'bg-blue-600 hover:bg-blue-700',
+        'py-2 px-3.5 rounded-lg',
+        className
+      )}
+      {...restProps}
+    >
+      <div className='relative flex'>
+        <span className={clsx({ invisible: loading })}>{children}</span>
+        {loading ? (
+          <div className='absolute top-0 left-0 w-full flex justify-center'>
+            <BarsRotateFade color='white' />
+          </div>
+        ) : null}
+      </div>
+    </button>
+  )
+}

src/components/Header.astro

@@ -1,6 +1,6 @@
 ---
 import { gql } from '@/graphql/__generated__/client/index.js'
-import { getApolloClient } from '@/graphql/apolloClient.js'
+import { getApolloClient } from '@/graphql/apolloClientSSR.js'
 import { Image, Picture } from 'astro:assets'
 import { getSession } from 'auth-astro/server'
 import * as m from '../paraglide/messages.js'
@@ -8,11 +8,11 @@ import * as m from '../paraglide/messages.js'
 import logo from 'img/logos/winter.png'
 // import logoEs from 'img/logos/default_es.png'
 
-import Button from './Button.astro'
 import Dropdown from './header/Dropdown.astro'
 import DropdownItem from './header/DropdownItem.astro'
 import Toggler from './header/Toggler.astro'
 import NavButton from './header/NavButton.astro'
+import LoginNav from './header/LoginNav.astro'
 
 const headerQuery = gql(`
     query HeaderInfo {
@@ -48,16 +48,7 @@ const session = await getSession(Astro.request)
         <Image src={logo} class='h-full py-0.5 w-auto' alt='logo' height={150} width={265} />
       </a>
 
-      <div class='absolute top-0 right-0 space-x-2 mr-10'>
-        {
-          session === null ? (
-            <Button class='rounded-t-none'>{m.login()}</Button>
-          ) : (
-            <Button class='rounded-t-none'>{m.logout()}</Button>
-          )
-        }
-        <Button class='rounded-t-none'>{m.register()}</Button>
-      </div>
+      <LoginNav />
     </div>
   </div>
   <nav class='w-full md:h-[55px] bg-dark'>

src/components/header/LoginNav.astro

@@ -0,0 +1,15 @@
+---
+import { getSession } from 'auth-astro/server'
+import { SignIn, SignOut } from 'auth-astro/components'
+
+import RegisterBtn from './RegisterButton'
+import * as m from 'paraglide/messages.js'
+
+const session = await getSession(Astro.request)
+const btnClass = 'bg-blue-600 hover:bg-blue-700 py-2 px-3.5 rounded-lg rounded-t-none'
+---
+
+<div class='absolute top-0 right-0 space-x-2 mr-10'>
+  {session === null ? <SignIn class={btnClass}>{m.login()}</SignIn> : <SignOut class={btnClass}>{m.logout()}</SignOut>}
+  {!session ? <RegisterBtn client:only='react' /> : null}
+</div>

src/components/header/NavButton.astro

@@ -1,14 +1,15 @@
 ---
-import Button from '../Button.astro'
+import Button from '../Button'
+import clsx from 'clsx'
 
 const { class: className } = Astro.props
 ---
 
 <Button
-  class:list={[
+  className={clsx(
     'w-full md:w-fit md:h-full bg-dark hover:bg-dark-hover py-3.5 md:py-1 px-2 rounded-none text-left md:text-center',
     className
-  ]}
+  )}
 >
   <slot />
 </Button>