50 lines
996 B
Vue
50 lines
996 B
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
title: string;
|
|
count: number;
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
title: "No title available",
|
|
count: 0,
|
|
});
|
|
|
|
// some random color for tags
|
|
const color = [
|
|
"#dc2626",
|
|
"#d97706",
|
|
"#65a30d",
|
|
"#059669",
|
|
"#0891b2",
|
|
"#0284c7",
|
|
"#4f46e5",
|
|
"#7c3aed",
|
|
"#c026d3",
|
|
"#db2777",
|
|
];
|
|
|
|
// get a random number
|
|
function 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-[#F1F2F4] px-5 py-3 rounded hover:underline rand-bg-color hover:scale-[1.05] transition-all duration-500">
|
|
<NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-lg font-extrabold">
|
|
<h1>#{{ title }}({{ count }})</h1>
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.rand-bg-color {
|
|
background-color: v-bind(picAColor);
|
|
}
|
|
</style>
|