Component styles

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>