feat: profile page

beat-forge · Aug 11, 2023 · bfd21d6 · bfd21d6
1 parent ff832f0
commit bfd21d6
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 5 deletions.
diff --git a/apps/web/src/app.postcss b/apps/web/src/app.postcss
@@ -33,3 +33,11 @@ select {
 img[alt] {
 	text-indent: -9999px;
 }
+
+img {
+	-webkit-user-drag: none;
+	-khtml-user-drag: none;
+	-moz-user-drag: none;
+	-o-user-drag: none;
+	user-drag: none;
+}
diff --git a/apps/web/src/lib/components/PageTransition.svelte b/apps/web/src/lib/components/PageTransition.svelte
@@ -5,7 +5,7 @@
 </script>
 
 {#key pathname}
-	<div class="beatforge-layout__animation-root w-screen h-fit relative" in:fly={{ x: -16, duration: 250, delay: 500 }} out:fly={{ x: 8, duration: 250 }}>
+	<div class="beatforge-layout__animation-root w-screen h-fit flex flex-grow relative" in:fly={{ x: -16, duration: 250, delay: 500 }} out:fly={{ x: 8, duration: 250 }}>
 		<slot />
 	</div>
 {/key}
diff --git a/apps/web/src/lib/components/layout/NavBar.svelte b/apps/web/src/lib/components/layout/NavBar.svelte
@@ -25,7 +25,7 @@
 			Discover Mods
 		</Link>
 		{#if $isAuthenticated}
-			<Link variant="secondary" href="/dashboard">
+			<Link variant="secondary" href={`/profile/${$user.user.id}`}>
 				{$user.user.username}
 				<img alt="user icon" src={$user.user.avatar} draggable="false" class="w-10 h-10 rounded-full">
 			</Link>

diff --git a/apps/web/src/routes/mod/[mod]/+page.svelte b/apps/web/src/routes/mod/[mod]/+page.svelte
@@ -13,8 +13,6 @@
     import { CalendarIcon, PersonIcon, DownloadIcon, CopyIcon, GithubIcon, CheckmarkIcon, VerifiedIcon, CategoryIcon, NotVerifiedIcon } from 'ui/icons';
     import Button from 'ui/button/Button.svelte';
 
-	console.log(modData);
-
 	const handleCopy = () => {
 		navigator.clipboard.writeText(modData.id)
 		copiedState.set(true)

diff --git a/apps/web/src/routes/profile/[id]/+page.svelte b/apps/web/src/routes/profile/[id]/+page.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { Pill } from 'ui/pill';
+	// @ts-nocheck
+	import type { PageData } from './$types';
+	import { copiedState } from '$lib/stores/mod';
+	export let data: PageData;
+
+    export let userData = data.body.data;
+    
+	import Sugar from 'sugar';
+
+    import { CalendarIcon, PersonIcon, DownloadIcon, CopyIcon, GithubIcon, CheckmarkIcon, VerifiedIcon, CategoryIcon, NotVerifiedIcon, AtSymbolIcon } from 'ui/icons';
+    import Button from 'ui/button/Button.svelte';
+
+</script>
+
+<div class="h-full w-full">
+	<div class="flex justify-center">
+		<div class="flex flex-col gap-2 w-full max-w-7xl px-4">
+			<div
+				class={`max-w-3xl min-w-full h-56 cover flex justify-center p-3 rounded-t-md ${
+					userData.banner ? `bg-[url(${userData.banner})]` : 'bg-[url("/images/glowheader.svg")]'
+				} bg-center`}
+			/>
+			<div class="flex p-4 bg-primary-850 h-20 justify-between -mt-4">
+				<div class="sm:ml-12 -mt-20">
+					<img
+						src={userData.avatar ? userData.avatar : '/icons/default.png'}
+						alt="icon"
+						class="w-32 border-primary-850 border-4 rounded-full"
+					/>
+				</div>
+			</div>
+			<div class="flex -mt-4 p-4 pb-8 bg-primary-850 rounded-b-md">
+				<div class="sm:ml-12 overflow-hidden">
+					<div class="flex">
+						<h1 class="text-white-100 text-3xl font-bold mt-3">{userData.displayName ? userData.displayName : userData.username}</h1>
+					</div>
+                    <p class="text-white-100 text-sm font-semibold py-3 opacity-70 max-w-[68ch]">
+						{userData.bio}
+					</p>
+					<div class="flex mt-5 gap-4 overflow-x-auto flex-wrap">
+                        <Pill label={`${userData.username}`}>
+                            <AtSymbolIcon className="w-5 h-5" />
+                        </Pill>
+                        <Pill label={`Joined ${Sugar.Date.relative(new Date(userData.createdAt))}`}>
+                            <CalendarIcon className="w-5 h-5" />
+                        </Pill>
+					</div>
+				</div>
+			</div>
+
+			<div class="sm:p-8 bg-primary-850 rounded-md sm:pl-16 px-3 py-4 w-full">
+				<h2 class="text-white-100 text-lg font-bold">Mods by {userData.displayName ? userData.displayName : userData.username}</h2>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+	:global(html) {
+		background-color: theme('colors.zinc.900');
+	}
+</style>
diff --git a/apps/web/src/routes/profile/[id]/+page.ts b/apps/web/src/routes/profile/[id]/+page.ts
@@ -0,0 +1,69 @@
+import type { PageLoad } from './$types';
+import { env } from '$env/dynamic/public';
+
+export const load = (async ({ params }) => {
+    const id = params.id;
+    try {
+        const response = await fetch(`${env.PUBLIC_API_URL}/graphql`, {
+            method: 'POST',
+            headers: {
+                'content-type': 'application/json'
+            },
+            body: JSON.stringify({
+                query: `
+                    query($user: Uuid!, $auth: String) {
+                        userById(id: $user, auth: $auth) {
+                            username
+                            displayName
+                            bio
+                            avatar
+                            banner
+                            id
+                            createdAt
+                            updatedAt
+                            mods {
+                                id
+                                slug
+                                name
+                                description
+                                icon
+                                cover
+                            category {
+                            name
+                            }
+                            stats {
+                            downloads
+                            }
+                            updatedAt
+                            createdAt
+                            versions {
+                                version
+                                approved
+                                supportedGameVersions
+                            }
+                        }
+                        }
+                    }
+                `,
+                variables: {
+                    user: id,
+                    auth: null
+                }
+            })
+        });
+        let data = await response.json()
+        return {
+            status: 200,
+            body: {
+                data: data.data.userById
+            }
+        };
+    } catch (error) {
+        return {
+            status: 500,
+            body: {
+                error: error.message
+            }
+        };
+    }
+}) satisfies PageLoad;
diff --git a/packages/ui/icons/AtSymbol.svelte b/packages/ui/icons/AtSymbol.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    // @ts-nocheck
+    export let className;
+  </script>
+
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class={className}>
+    <path stroke-linecap="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
+</svg>
+
diff --git a/packages/ui/icons/index.ts b/packages/ui/icons/index.ts
@@ -12,4 +12,5 @@ export { default as LogoIcon } from './Logo.svelte';
 export { default as NotVerifiedIcon } from './NotVerified.svelte';
 export { default as PersonIcon } from './Person.svelte';
 export { default as SearchIcon } from './Search.svelte';
-export { default as VerifiedIcon } from './Verified.svelte';
+export { default as VerifiedIcon } from './Verified.svelte';
+export { default as AtSymbolIcon } from './AtSymbol.svelte'