36 lines
986 B
Vue
36 lines
986 B
Vue
<template>
|
|
<!-- <li class="flex-auto rounded-md border-2 px-1 py-1.5 mr-2.5 mb-2.5 font-general-medium text-base sm:text-lg cursor-pointer select-none"-->
|
|
<li :class="[isActive ? activeClass : inactiveClass, hoverClass]"
|
|
:data-filter="`.${value}`"
|
|
@click="$emit('change', value)"
|
|
>
|
|
{{ name }}
|
|
</li>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "FilterOption",
|
|
props: {
|
|
name: {type: String, required: true},
|
|
value: {type: String, required: true},
|
|
isActive: {type: Boolean, default: false},
|
|
},
|
|
|
|
data: () => ({
|
|
inactiveClass: "",
|
|
activeClass: "underline underline-offset-8",
|
|
hoverClass: "hover:underline hover:underline-offset-8",
|
|
// inactiveClass: "border-gray-700 text-gray-700",
|
|
// activeClass: "bg-secondary-dark border-secondary-dark text-white",
|
|
// hoverClass: "hover:bg-ternary-dark hover:bg-ternary-dark hover:text-white",
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
ul li {
|
|
transition: all .5s ease;
|
|
}
|
|
</style>
|