43 lines
800 B
Vue
43 lines
800 B
Vue
<script setup lang="ts">
|
|
defineProps({
|
|
title: String,
|
|
})
|
|
|
|
let color = [
|
|
'#dc2626',
|
|
'#d97706',
|
|
'#65a30d',
|
|
'#059669',
|
|
'#0891b2',
|
|
'#0284c7',
|
|
'#4f46e5',
|
|
'#7c3aed',
|
|
'#c026d3',
|
|
'#db2777',
|
|
]
|
|
|
|
const getRandomInt = (min: number, max: number) => {
|
|
min = Math.ceil(min)
|
|
max = Math.floor(max)
|
|
return Math.floor(Math.random() * (max - min + 1)) + min
|
|
}
|
|
|
|
const randbgcolor = 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}`" class="text-xl font-extrabold">
|
|
<h1>#{{ title }}</h1>
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.randbgcolor {
|
|
background-color: v-bind(randbgcolor);
|
|
}
|
|
</style>
|