<template>
  <a :href="href" aria-label="twitter" class="flex items-center action px-2 py-1" target="_blank">
    <span v-if="!!$slots.default" class="flex-grow"><slot></slot></span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-44.7006 -60.54775 387.4052 363.2865" class="h-6 w-auto"
      fill="currentColor">
      <path
        d="M93.719 242.19c112.46 0 173.96-93.168 173.96-173.96 0-2.646-.054-5.28-.173-7.903a124.338 124.338 0 0030.498-31.66c-10.955 4.87-22.744 8.148-35.11 9.626 12.622-7.57 22.313-19.543 26.885-33.817a122.62 122.62 0 01-38.824 14.841C239.798 7.433 223.915 0 206.326 0c-33.764 0-61.144 27.381-61.144 61.132 0 4.798.537 9.465 1.586 13.941-50.815-2.557-95.874-26.886-126.03-63.88a60.977 60.977 0 00-8.279 30.73c0 21.212 10.794 39.938 27.208 50.893a60.685 60.685 0 01-27.69-7.647c-.009.257-.009.507-.009.781 0 29.61 21.075 54.332 49.051 59.934a61.218 61.218 0 01-16.122 2.152 60.84 60.84 0 01-11.491-1.103c7.784 24.293 30.355 41.971 57.115 42.465-20.926 16.402-47.287 26.171-75.937 26.171-4.929 0-9.798-.28-14.584-.846 27.059 17.344 59.189 27.464 93.722 27.464" />
    </svg>
  </a>
</template>

<script>
  export default {
  props: {
    href: { type: String, default: 'https://twitter.com/backlight_dev' },
  },
};
</script>