fixed issues and added buttons

d3rpp-dev · Nov 19, 2024 · ccdec03 · ccdec03
1 parent 9d7717a
commit ccdec03
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 16 deletions.
diff --git a/src/lib/components/account/account-header-component.svelte b/src/lib/components/account/account-header-component.svelte
@@ -24,15 +24,13 @@
 					? "h-10 w-10"
 					: undefined}
 		>
-			{#snippet children()}
-				{#if user && user.profilePicture}
-					<Avatar.Image
-						src={`/api/public_assets/${user.profilePicture}`}
-						alt="Profile Photo"
-					/>
-				{/if}
-				<Avatar.Fallback><User /></Avatar.Fallback>
-			{/snippet}
+			{#if user && user.profilePicture}
+				<Avatar.Image
+					src={`/api/public_assets/${user.profilePicture}`}
+					alt="Profile Photo"
+				/>
+			{/if}
+			<Avatar.Fallback><User /></Avatar.Fallback>
 		</Avatar.Root>
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content align="end" class="w-[350px]">

diff --git a/src/lib/components/headers/landing-header.svelte b/src/lib/components/headers/landing-header.svelte
@@ -11,13 +11,17 @@
 </script>
 
 <header
-	class="sticky top-0 z-50 h-28 w-full bg-gradient-to-b from-[#000013] to-[#000000] shadow-lg"
+	class="sticky top-0 z-50 flex h-28 w-full flex-row justify-between bg-gradient-to-b from-[#000013] to-[#000000] shadow-lg"
 >
-	<div class="flex h-full items-center justify-end px-20 py-4">
-		<AccountHeaderComponent {user} avatar_size="custom" />
+	<div class="w-28">
+		<!-- empty -->
 	</div>
 
-	<div class="absolute inset-0 flex items-center justify-center">
+	<div class="grid w-28 place-items-center">
 		<img src={LogoGreen} alt="JailBird Green" class="h-20" />
 	</div>
+
+	<div class="flex h-full items-center justify-end px-20 py-4">
+		<AccountHeaderComponent {user} avatar_size="custom" />
+	</div>
 </header>
diff --git a/src/routes/(landing)/+page.svelte b/src/routes/(landing)/+page.svelte
@@ -1,14 +1,35 @@
 <script lang="ts">
 	import type { User } from "lucia";
-	import { AccountHeaderComponent } from "@/account";
+	import type { ValidOauthMethods } from "$lib/server/auth/oauth_methods";
+
+	import { goto } from "$app/navigation";
 
 	import Main from "@/main.svelte";
+	import { Button } from "@/ui/button";
+
+	import { ArrowRight } from "lucide-svelte";
+	import { GithubLogo } from "svelte-radix";
 
 	interface Props {
 		user: User | null;
 	}
 
 	const { user }: Props = $props();
+
+	const oauthLoginGenerator =
+		(provider: ValidOauthMethods) => (ev: MouseEvent) => {
+			ev.stopPropagation();
+			ev.preventDefault();
+
+			goto(`/oauth/${provider}`);
+		};
+
+	const gotoApp = (ev: MouseEvent) => {
+		ev.stopPropagation();
+		ev.preventDefault();
+
+		goto(`/app`);
+	};
 </script>
 
 <Main>
@@ -27,8 +48,26 @@
 			Application.
 		</h1>
 
-		<div class="flex flex-1 items-center justify-end">
-			<AccountHeaderComponent {user} avatar_size="custom" />
+		<div class="flex flex-1 items-center justify-center">
+			{#if user != null}
+				<Button
+					class="flex w-36 flex-row justify-start gap-4"
+					variant="default"
+					onclick={gotoApp}
+				>
+					<span>Go to App</span>
+					<ArrowRight />
+				</Button>
+			{:else}
+				<Button
+					class="flex w-72 flex-row justify-start gap-4 hover:bg-white hover:text-[#1f2328]"
+					variant="outline"
+					onclick={oauthLoginGenerator("github")}
+				>
+					<GithubLogo />
+					<span>Log In with GitHub</span>
+				</Button>
+			{/if}
 		</div>
 	</div>
 </Main>