<template>
  <div @click="redirect" class="link">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
const router = useRouter()

const props = defineProps<{
  routePath: string
}>()

const redirect = () => {
  if (props.routePath) {
    router.push({
      path: props.routePath
    })
  }
}
</script>

<style lang="scss" scoped>
.link {
  width: fit-content;
  transition: 0.2s;
  cursor: pointer;
  color: $accent;
  font-size: 12px;
  font-weight: 500;

  @include hover {
    color: #5539ce;
  }
}
</style>