49 lines
945 B
Vue
49 lines
945 B
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
title: string
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
title: 'No title available',
|
|
})
|
|
|
|
// some random color for tags
|
|
const color = [
|
|
'#dc2626',
|
|
'#d97706',
|
|
'#65a30d',
|
|
'#059669',
|
|
'#0891b2',
|
|
'#0284c7',
|
|
'#4f46e5',
|
|
'#7c3aed',
|
|
'#c026d3',
|
|
'#db2777',
|
|
]
|
|
|
|
// get a random number
|
|
const getRandomInt = (min: number, max: number) => {
|
|
min = Math.ceil(min)
|
|
max = Math.floor(max)
|
|
return Math.floor(Math.random() * (max - min + 1)) + min
|
|
}
|
|
|
|
const picAColor = ref(`${color.at(getRandomInt(0, 8))}`)
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="text-white px-5 py-3 rounded hover:underline randbgcolor hover:scale-[1.05] transition-all duration-500"
|
|
>
|
|
<NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-xl font-extrabold">
|
|
<h1>#{{ title }}</h1>
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.randbgcolor {
|
|
background-color: v-bind(picAColor);
|
|
}
|
|
</style>
|