2023-12-19 18:43:42 +01:00
|
|
|
<script lang="ts" setup>
|
|
|
|
|
defineProps<{
|
|
|
|
|
title: string
|
|
|
|
|
count: number
|
|
|
|
|
selected?: boolean
|
|
|
|
|
}>()
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div
|
|
|
|
|
hover:bg-app-bg-grey
|
|
|
|
|
:class="[selected ? 'bg-app-white' : 'bg-transparent']"
|
2024-09-02 15:13:43 +02:00
|
|
|
flex
|
|
|
|
|
items-center
|
|
|
|
|
gap-8px
|
|
|
|
|
py-10px
|
|
|
|
|
px-16px
|
|
|
|
|
text-18px
|
|
|
|
|
font-400
|
|
|
|
|
leading-24px
|
|
|
|
|
cursor-pointer
|
2023-12-19 18:43:42 +01:00
|
|
|
>
|
2024-09-02 15:13:43 +02:00
|
|
|
<h1
|
|
|
|
|
hover:text-app-white
|
|
|
|
|
:class="[selected ? 'text-app-black font-700 opacity-100' : 'text-app-white opacity-50']"
|
|
|
|
|
>
|
2023-12-19 18:43:42 +01:00
|
|
|
{{ title }}
|
|
|
|
|
</h1>
|
|
|
|
|
<p text-app-text-grey>
|
|
|
|
|
({{ count }})
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
