Files
solidtime/resources/js/Components/Common/TabBar/TabBarItem.vue
Gregor Vostrak df2fe1da1e add light mode
2025-03-28 14:54:31 +01:00

31 lines
692 B
Vue

<script setup lang="ts">
import { twMerge } from 'tailwind-merge';
import { computed } from 'vue';
const props = defineProps<{
active?: boolean;
}>();
const activeClass = computed(() => {
if (props.active) {
return 'bg-tab-background border border-tab-border text-text-primary font-semibold';
}
return '';
});
</script>
<template>
<button
role="tab"
:class="
twMerge(
'rounded-md px-2 sm:px-3 py-1 sm:py-1.5 text-xs sm:text-sm font-medium hover:text-text-primary focus-visible:outline-none',
activeClass
)
">
<slot></slot>
</button>
</template>
<style scoped></style>