geovisio-website/src/components/Link.vue

<template>
  <a
    v-if="type === 'external'"
    :href="pathExternal"
    :target="target"
    :class="['default', look, { disabled }]"
    :title="titleImg"
    v-bind="$attrs"
    @click="$emit('trigger')"
  >
    <i v-if="icon" :class="[icon, 'icon']"></i>
    <img v-if="image" :src="img(image.url)" :alt="image.alt" class="logo" />
    <span v-if="text" class="text">{{ text }}</span>
  </a>
  <router-link
    v-else
    :to="route"
    :target="target"
    :class="['default', look, { disabled }]"
    :title="text"
  >
    <i v-if="icon" :class="[icon, 'icon']"></i>
    <img v-if="image" :src="img(image.url)" :alt="image.alt" class="logo" />
    <span v-if="text" class="text">{{ text }}</span>
  </router-link>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import { computed } from 'vue'
import type { PropType } from 'vue'
import type { RouteLocationRaw } from 'vue-router'
import { img } from '../utils/image'

const { t } = useI18n()
interface ImageInterface {
  url: string
  alt: string
}

const props = defineProps({
  text: { type: String, default: null },
  route: { type: Object as PropType<RouteLocationRaw>, default: {} },
  pathExternal: { type: String, default: '' },
  look: { type: String, default: '' },
  type: { type: String, default: null },
  alt: { type: String, default: '' },
  icon: { type: String, default: null },
  target: { type: String, default: null },
  image: { type: Object as PropType<ImageInterface>, default: null },
  disabled: { type: Boolean, default: false }
})

const titleImg = computed<string>(() =>
  props.disabled ? t('general.header.contribute_text') : ''
)
</script>

<style lang="scss" scoped>
.default {
  @include text(s-regular);
  display: flex;
  align-items: center;
  color: var(--black);
  text-decoration: none;
  .icon {
    margin-right: toRem(1);
  }
  &:hover {
    opacity: toRem(0.8);
  }
}
.icon {
  color: var(--black);
  font-size: toRem(2.4);
}
.logo {
  height: toRem(4);
  border-radius: toRem(0.5);
  margin-right: toRem(1);
}
.button {
  height: toRem(4);
  border-radius: toRem(0.5);
  padding: toRem(1.3) toRem(2) toRem(1.3);
  background-color: var(--black);
  color: var(--white);
}
.text {
  width: 100%;
  white-space: break-spaces;
}
.link:hover {
  background-color: transparent;
  text-decoration: underline;
}
.button--white {
  background-color: var(--white);
  color: var(--black);
  border: toRem(0.1) solid var(--black);
  .icon {
    font-size: toRem(1.6);
  }
  &:hover {
    background-color: var(--black);
    color: var(--white);
    .icon {
      color: white;
    }
  }
}
.button--white-blue {
  background-color: var(--white);
  border: toRem(0.1) solid var(--blue);
  .icon {
    font-size: toRem(1.4);
    color: var(--blue);
  }
}
.button--blue {
  background-color: var(--blue);
  border: toRem(0.1) solid var(--blue);
  .icon {
    font-size: toRem(1.4);
    color: var(--white);
  }
}
.disabled {
  color: grey;
  cursor: not-allowed;
  .icon {
    color: grey;
    cursor: not-allowed;
  }
  &:hover {
    text-decoration: none;
  }
}
.button--rounded {
  background-color: var(--black);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: 0;
  height: toRem(4);
  width: toRem(4);
  .icon {
    color: var(--white);
    font-size: toRem(2.8);
    margin-right: 0;
  }
}
.no-text {
  height: toRem(3);
  width: toRem(3);
  padding: 0;
  .icon {
    margin: auto;
  }
}
@media (max-width: toRem(50)) {
  .icon {
    margin-right: toRem(0.5);
  }
  .button {
    padding-right: toRem(1);
    padding-left: toRem(1);
  }
  .disable-mobile {
    pointer-events: none;
  }
}
</style>