hajeebtok-frontend/src/components/ProfileSearchResult.vue

<script>
import { defineComponent } from 'vue'
import { config } from '@/main.js'
import { useRouter } from 'vue-router'
import Checkmark2Icon from '@/components/icons/Checkmark2.vue'

export default defineComponent({
	name: 'ProfileSearchResult',
	components: { Checkmark2Icon },
	computed: {
		config() {
			return config
		},
	},
	props: {
		id: {
			type: String, // this is incase id = "myself"
			required: true,
		},
		username: {
			type: String,
			required: true,
		},
		following: {
			type: Number,
			required: true,
		},
		followers: {
			type: Number,
			required: true,
		},
		socialCredit: {
			type: Number,
			required: true,
		},
		verified: {
			type: Boolean,
			required: true
		}
	},
	setup() {
		const router = useRouter();
		return {router}
	}
})
</script>

<template>
	<div class="search-result flex-row" @click="this.router.push(`/profile/${id}`)">
		<img :src="`${config.serverURL}/account/${id}/picture`" alt="profile picture" class="profile-picture" />
		<div class="flex-column">
			<div class="flex-row">
				<h2>{{ username }}</h2>
				<Checkmark2Icon v-if="verified" class="checkmark" />
			</div>
			<div class="flex-row">
				<span class="flex-row">
					<span>{{ followers }}</span>
					<p class="dark">followers</p>
				</span>

				<span class="flex-row">
					<span>{{ following }}</span>
					<p class="dark">following</p>
				</span>

				<span class="flex-row">
					<span>{{ socialCredit }}</span>
					<p class="dark">social credit</p>
				</span>
			</div>
		</div>
	</div>
</template>

<style scoped>
.search-result:hover {
	animation-name: interaction;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;

	cursor: pointer;
}

.profile-picture {
	width: 100px;
	height: 100px;
	border-radius: 100%;
}

.flex-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	gap: 10px;
}

.flex-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	gap: 10px;
}

.checkmark {
	width: 50px;
	height: 40px;
}

.dark {
	color: var(--secondary-background-color);
}
</style>