Component styles

src/components/KarKarCarAuth.astro

@@ -1,19 +1,14 @@
 ---
-import type { KarKarCarSession } from "../api/index.ts"
 import { getUser } from "../api/index"
 
-import type  FullAuthConfig  from 'auth-astro'
 import config  from 'auth:config'
+import authConfig  from 'auth:config'
 
-interface Props {
-	authConfig?: typeof config
-}
-
-const { authConfig = config } = Astro.props as Props
+const { class: className, ...rest } = Astro.props;
 
 let session = await getUser(Astro.request, authConfig)
 ---
 
-<div>
+<div class={className}>
 	<Fragment set:html={Astro.slots.render('default', [session])} />
 </div>

src/components/UserInfo.astro

@@ -0,0 +1,22 @@
+---
+import type { KarKarCarSession } from "../api/index.ts";
+
+interface Props {
+  session: KarKarCarSession | null;
+}
+
+const { session } = Astro.props;
+---
+
+<div class="p-4 rounded-lg bg-gray-100 my-4">
+  {session ? (
+    <div class="text-gray-700">
+      <h2 class="m-0 mb-4 text-slate-800">{session.user?.name} | {session.user?.email}</h2>
+      <div class="bg-white p-4 rounded shadow-sm">
+        <p>Zure saldoa: {session.userData.amount}</p>
+      </div>
+    </div>
+  ) : (
+    <p class="text-gray-600 italic">Sartu zure kontua</p>
+  )}
+</div> 

src/pages/index.astro

@@ -5,28 +5,25 @@ import {  SignIn, SignOut } from 'auth-astro/components';
 import KarKarCarAuth from "../components/KarKarCarAuth.astro"
 // 1. Import any dependencies (Full support for JavaScript/TypeScript)
 
-import type { KarKarCarSession } from "../api/index.ts"
+import { getUser, type KarKarCarSession } from "../api/index.ts"
+import UserInfo from "../components/UserInfo.astro"
+import config  from 'auth:config'
 
 
 
+const session = await getUser(Astro.request, config);
 
 ---
 <Layout>
+	<UserInfo session={session} />
 	<KarKarCarAuth>
 		{(session: KarKarCarSession) => (
-							
 		  <>
 			{session ? 
-				<SignOut>Logout</SignOut>
+				<SignOut class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200 font-medium">Logout</SignOut>
 			:
-				<SignIn provider="keycloak">Login</SignIn>
+				<SignIn provider="keycloak" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium">Login</SignIn>
 			}
-			<p>
-			
-				{session ? `Logged in as ${session.user?.name}` : 'Not logged in'}
-				{session ? `Amount ${session.userData.amount}` : ''}
-	
-			</p>
 		  </>
 		)}
 	</KarKarCarAuth>