explorer-app/components/Category.vue

34 lines
582 B
Vue
Raw Permalink Normal View History

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']"
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
>
<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>