traxxx/assets/components/actors/social.vue

62 lines
1.0 KiB
Vue
Raw Normal View History

2020-01-24 22:36:06 +00:00
<template>
<div
v-if="actor"
class="social"
>
<a
v-for="social in actor.social"
:key="`social-${social.id}`"
v-tooltip.bottom="social.url"
:href="social.url"
target="_blank"
rel="noopener noreferrer"
class="social-link"
>
<Icon
v-if="social.platform"
:icon="social.platform"
/>
<Icon
v-else
icon="link"
/>
</a>
</div>
</template>
<script>
export default {
props: {
actor: {
type: Object,
default: null,
},
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.social {
display: block;
}
.social-link {
display: inline-block;
padding: 0 0 0 1rem;
.icon {
color: $highlight;
fill: $highlight;
width: 1.5rem;
height: 1.5rem;
}
&:hover .icon {
fill: $primary;
}
}
</style>