feat: open to opportunities

frontend/src/pages/CertifiedParticipants.vue

@@ -50,12 +50,8 @@
 					class="flex sm:rounded px-3 py-2 sm:h-15 hover:bg-surface-gray-2"
 				>
 					<div class="flex items-center w-full space-x-3">
-						<Avatar
-							:image="participant.user_image"
-							class="size-8 rounded-full object-contain"
-							:label="participant.full_name"
-							size="2xl"
-						/>
+						<UserAvatar :user="participant" size="2xl" />
+
 						<div class="flex flex-col md:flex-row w-full">
 							<div class="flex-1">
 								<div class="text-base font-medium text-ink-gray-8">
@@ -115,6 +111,7 @@ import { computed, inject, onMounted, ref } from 'vue'
 import { GraduationCap } from 'lucide-vue-next'
 import { sessionStore } from '../stores/session'
 import EmptyState from '@/components/EmptyState.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
 
 const currentCategory = ref('')
 const filters = ref({})
@@ -156,6 +153,7 @@ const categories = createListResource({
 })
 
 const updateParticipants = () => {
+	console.log('updating participants')
 	updateFilters()
 	getMemberCount()
 	setQueryParams()
@@ -167,6 +165,7 @@ const updateParticipants = () => {
 }
 
 const updateFilters = () => {
+	console.log(currentCategory.value)
 	if (currentCategory.value) {
 		filters.value.category = currentCategory.value
 	} else {

frontend/src/pages/Lesson.vue

@@ -342,6 +342,7 @@ import {
 	TabButtons,
 	Tooltip,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import {
 	computed,
@@ -798,6 +799,10 @@ const enrollStudent = () => {
 			onSuccess() {
 				window.location.reload()
 			},
+			onError(err) {
+				toast.error(__(err.messages?.[0] || err))
+				console.error(err)
+			},
 		}
 	)
 }

frontend/src/pages/Profile.vue

@@ -50,24 +50,51 @@
 		<div class="mx-auto -mt-10 md:-mt-4 max-w-4xl translate-x-0 px-5">
 			<div class="flex flex-col md:flex-row items-center">
 				<div>
-					<img
-						v-if="profile.data.user_image"
-						:src="profile.data.user_image"
-						class="object-cover h-[100px] w-[100px] rounded-full border-4 border-white object-cover"
-					/>
-					<UserAvatar
-						v-else
-						:user="profile.data"
-						class="object-cover h-[100px] w-[100px] rounded-full border-4 border-white object-cover"
-					/>
+					<div class="relative">
+						<img
+							v-if="profile.data.user_image"
+							:src="profile.data.user_image"
+							class="object-cover h-[100px] w-[100px] rounded-full border-4 border-white object-cover"
+						/>
+						<Tooltip
+							v-if="profile.data.looking_for_job"
+							:text="__('Open to Opportunities')"
+							placement="right"
+						>
+							<div
+								class="absolute bottom-3 right-1 p-0.5 bg-surface-white rounded-full"
+							>
+								<div class="rounded-full bg-surface-green-3 w-fit">
+									<BadgeCheckIcon class="text-ink-white size-5" />
+								</div>
+							</div>
+						</Tooltip>
+					</div>
 				</div>
-				<div class="ml-6">
-					<h2 class="mt-2 text-3xl font-semibold text-ink-gray-9">
+				<div class="ml-6 mt-5">
+					<h2 class="text-3xl font-semibold text-ink-gray-9">
 						{{ profile.data.full_name }}
 					</h2>
-					<div class="mt-2 text-base text-ink-gray-7">
+					<div class="text-base text-ink-gray-7 mt-1">
 						{{ profile.data.headline }}
 					</div>
+					<div class="flex items-center space-x-4 mt-2">
+						<Twitter
+							v-if="profile.data.twitter"
+							class="size-4 text-ink-gray-5 cursor-pointer"
+							@click="navigateTo(profile.data.twitter)"
+						/>
+						<Linkedin
+							v-if="profile.data.linkedin"
+							class="size-4 text-ink-gray-5 cursor-pointer"
+							@click="navigateTo(profile.data.linkedin)"
+						/>
+						<Github
+							v-if="profile.data.github"
+							class="size-4 text-ink-gray-5 cursor-pointer"
+							@click="navigateTo(profile.data.github)"
+						/>
+					</div>
 				</div>
 				<Button
 					v-if="isSessionUser() && !readOnlyMode"
@@ -81,7 +108,7 @@
 				</Button>
 			</div>
 
-			<div class="mb-4 mt-6">
+			<div class="mb-4 mt-10">
 				<TabButtons
 					class="inline-block"
 					:buttons="getTabButtons()"
@@ -104,11 +131,19 @@ import {
 	call,
 	createResource,
 	TabButtons,
+	Tooltip,
 	usePageMeta,
 } from 'frappe-ui'
 import { computed, inject, watch, ref, onMounted, watchEffect } from 'vue'
 import { sessionStore } from '@/stores/session'
-import { Edit, RefreshCcw } from 'lucide-vue-next'
+import {
+	BadgeCheckIcon,
+	Edit,
+	Github,
+	Linkedin,
+	RefreshCcw,
+	Twitter,
+} from 'lucide-vue-next'
 import { useRoute, useRouter } from 'vue-router'
 import { convertToTitleCase } from '@/utils'
 import UserAvatar from '@/components/UserAvatar.vue'
@@ -229,6 +264,10 @@ const reloadUser = () => {
 	})
 }
 
+const navigateTo = (url) => {
+	window.open(url, '_blank')
+}
+
 const breadcrumbs = computed(() => {
 	let crumbs = [
 		{

frontend/src/pages/ProfileAbout.vue

@@ -56,11 +56,13 @@
 					</template>
 					<template #body-main>
 						<div class="w-[250px] text-base">
-							<img
-								:src="badge.badge_image"
-								:alt="badge.badge"
-								class="bg-surface-gray-2 rounded-t-md h-[200px] mx-auto"
-							/>
+							<div class="bg-surface-gray-2 rounded-t-md py-5">
+								<img
+									:src="badge.badge_image"
+									:alt="badge.badge"
+									class="h-[200px] mx-auto"
+								/>
+							</div>
 							<div class="p-5">
 								<div class="text-2xl font-semibold mb-2">
 									{{ badge.badge }}