mohadese namavar
58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
<template>
|
|
<div class="sort">
|
|
<h3>
|
|
<i class="isax isax-document-filter"></i>
|
|
<span>{{ $t('sortBy') }}:</span>
|
|
</h3>
|
|
<ul>
|
|
<li v-for="(btn, key) in btns.sort" :key="key">
|
|
<Button v-bind="btn.props" @click="sort(key)" :active="sorted == key" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { btns } = inject('init')
|
|
let { comments } = inject('data')
|
|
const sorted = ref('createdAt')
|
|
const sort = (key) => {
|
|
sorted.value = key
|
|
comments = comments.sort((a, b) => {
|
|
return key == 'createdAt' ?
|
|
new Date(b.createdAt) - new Date(a.createdAt) :
|
|
b.point - a.point
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product .comments .sort {
|
|
@apply flex gap-4;
|
|
|
|
h3 {
|
|
@apply flex items-center gap-2 text-[#333333] ml-9;
|
|
|
|
i {
|
|
@apply text-2xl;
|
|
}
|
|
|
|
span {
|
|
@apply text-lg font-medium font-iran-sans;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
@apply flex;
|
|
|
|
button {
|
|
@apply h-10 py-1.5 font-iran-sans font-medium text-lg text-[#B2B2B2] #{!important};
|
|
|
|
&[active=true] {
|
|
@apply text-primary-600 #{!important};
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |