81 lines
1.9 KiB
Vue
81 lines
1.9 KiB
Vue
<template>
|
|
<n-popover trigger="hover" placement="top">
|
|
<template #trigger>
|
|
<div
|
|
class="rounded-4xl aspect-square flex items-center justify-center mb-1"
|
|
:style="`background-color: ${verificationColor}; width: ${
|
|
props.size ?? 16
|
|
}px; height: ${props.size ?? 16}px`"
|
|
>
|
|
<component
|
|
:is="verificationIcon"
|
|
fill="white"
|
|
stroke="white"
|
|
style="padding: 0.2rem"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<div class="max-w-xs">
|
|
<div class="font-bold">{{ mark.title || "No title" }}</div>
|
|
<div class="text-sm mt-1">{{ mark.description || "No description" }}</div>
|
|
</div>
|
|
</n-popover>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from "vue"
|
|
import type { SnVerification } from "~/types/api/publisher"
|
|
import {
|
|
Wrench,
|
|
BadgeCheck,
|
|
ShieldCheck,
|
|
Landmark,
|
|
Palette,
|
|
Code,
|
|
Drama
|
|
} from "lucide-vue-next"
|
|
|
|
interface Props {
|
|
mark: SnVerification
|
|
size?: number
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
// Icon mapping based on verification type
|
|
const verificationIcons = [
|
|
Wrench, // 0: build_circle equivalent
|
|
BadgeCheck, // 1: verified
|
|
ShieldCheck, // 2: verified (alternative)
|
|
Landmark, // 3: account_balance
|
|
Palette, // 4: palette
|
|
Code, // 5: code
|
|
Drama // 6: masks
|
|
]
|
|
|
|
// Color mapping based on verification type
|
|
const verificationColors = [
|
|
"#14b8a6", // teal
|
|
"#03a9f4", // lightBlue
|
|
"#3f51b5", // indigo
|
|
"#f44336", // red
|
|
"#ff9800", // orange
|
|
"#2196f3", // blue
|
|
"#448aff" // blueAccent
|
|
]
|
|
|
|
const verificationIcon = computed(() => {
|
|
const type = props.mark.type
|
|
return type >= 0 && type < verificationIcons.length
|
|
? verificationIcons[type]
|
|
: BadgeCheck
|
|
})
|
|
|
|
const verificationColor = computed(() => {
|
|
const type = props.mark.type
|
|
return type >= 0 && type < verificationColors.length
|
|
? verificationColors[type]
|
|
: "#2196f3"
|
|
})
|
|
</script>
|