<template>
  <div @click="$router.push(props.href)" class="qi-link">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  href: {
    type: String,
    required: true,
  },
})

</script>

<style scoped>
.qi-link {
  cursor: pointer;
  transition: 0.5s;
  padding: 0.5rem 0rem;
  border: 3px solid transparent;
}

.qi-link:hover {
    color: var(--td-brand-color-hover);
  border-bottom: 3px solid var(--td-brand-color-7);
}
</style>
