From a7b95f79f9cfcb28d89fa03d541e373c7a6a0618 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Tue, 24 Jan 2023 01:35:46 +0800
Subject: [PATCH] update header to use default icon

---
 components/header/Header.vue | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/components/header/Header.vue b/components/header/Header.vue
index 9b62659..9c60bd7 100644
--- a/components/header/Header.vue
+++ b/components/header/Header.vue
@@ -1,9 +1,17 @@
 <template>
 	<div class="header">
-		<img
-			class="avatar"
-			:src="avatar"
-			alt="" />
+		<div @click="profile">
+			<img
+				v-if="props.avatar"
+				class="avatar"
+				@click="profile"
+				:src="props.avatar"
+				alt="" />
+			<Icon
+				v-else
+				class="avatar"
+				name="fa6-solid:circle-user" />
+		</div>
 	</div>
 </template>
 
@@ -12,9 +20,13 @@
 		avatar?: string;
 	}
 
-	const props = withDefaults(defineProps<Props>(), {
-		avatar: 'https://www.redditstatic.com/avatars/avatar_default_02_FF4500.png',
-	});
+	const props = defineProps<Props>();
+
+	const router = useRouter();
+
+	const profile = () => {
+		router.push('/profile');
+	};
 </script>
 
 <style scoped>
@@ -23,6 +35,6 @@
 	}
 
 	.avatar {
-		@apply bg-secondary h-12 w-12 rounded-full;
+		@apply bg-secondary h-12 w-12 rounded-full hover:cursor-pointer;
 	}
 </style>