2 files changed, 101 insertions, 0 deletions
diff --git a/src/lib/APITypes.d.ts b/src/lib/APITypes.d.ts
index e01a950..04cd554 100644
--- a/src/lib/APITypes.d.ts
+++ b/src/lib/APITypes.d.ts
@@ -59,6 +59,7 @@ export interface CleanPlayer extends CleanBasicPlayer {
 	socials: CleanSocialMedia
 	profiles?: CleanBasicProfile[]
 	claimed?: ClaimedSkyBlockItem[]
+	achievements?: Achievements
 }
 
 export interface StatItem {
@@ -454,3 +455,22 @@ export interface ItemAuctionsSchema {
 	sbId: string
 	auctions: SimpleAuctionSchema[]
 }
+
+interface TieredAchievement {
+	id: string
+	name: string
+	value: number | null
+	description: string
+}
+
+interface ChallengeAchievement {
+	id: string
+	name: string
+	unlocked: boolean
+	description: string
+}
+
+export interface Achievements {
+	tiered: TieredAchievement[]
+	challenge: ChallengeAchievement[]
+}
diff --git a/src/lib/sections/Achievements.svelte b/src/lib/sections/Achievements.svelte
new file mode 100644
index 0000000..61f320e
--- /dev/null
+++ b/src/lib/sections/Achievements.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import Tooltip from '$lib/Tooltip.svelte'
+	export let data: CleanMemberProfile
+</script>
+
+{#if data.member.achievements}
+	<h3>
+		Tiered
+		<span class="achievement-count">
+			({data.member.achievements.tiered.filter(a => a.value).length}/{data.member.achievements
+				.tiered.length})
+		</span>
+	</h3>
+	<ul>
+		{#each data.member.achievements.tiered as achievement}
+			<li class="achievement">
+				<Tooltip>
+					<span slot="tooltip">
+						{achievement.description}
+					</span>
+
+					{#if achievement.value}
+						<span>
+							{achievement.name}: <b>{achievement.value}</b>
+						</span>
+					{:else}
+						<span class="achievement-locked">
+							{achievement.name}
+						</span>
+					{/if}
+				</Tooltip>
+			</li>
+		{/each}
+	</ul>
+
+	<h3>
+		Challenge
+		<span class="achievement-count">
+			({data.member.achievements.challenge.filter(a => a.unlocked).length}/{data.member.achievements
+				.challenge.length})
+		</span>
+	</h3>
+	<ul>
+		{#each data.member.achievements.challenge as achievement}
+			<li class="achievement">
+				<Tooltip>
+					<span slot="tooltip">
+						{achievement.description}
+					</span>
+
+					{#if achievement.unlocked}
+						<span>
+							{achievement.name}
+						</span>
+					{:else}
+						<span class="achievement-locked">
+							{achievement.name}
+						</span>
+					{/if}
+				</Tooltip>
+			</li>
+		{/each}
+	</ul>
+{/if}
+
+<style>
+	ul {
+		margin: 0;
+		padding-left: 1em;
+	}
+
+	.achievement-locked {
+		opacity: 0.5;
+	}
+
+	.achievement-count {
+		color: var(--theme-darker-text);
+		font-weight: normal;
+	}
+</style>