<template>
    <div
        v-if="actor"
        class="actor"
    >
        <a
            :href="`/actor/${actor.slug}`"
            class="name"
        >{{ actor.name }}</a>
    </div>
</template>

<script>
export default {
    props: {
        actor: {
            type: Object,
            default: null,
        },
    },
};
</script>

<style lang="scss" scoped>
@import 'theme';

.actor {
    background: $background;
    display: inline-block;
    margin: 0 .25rem .25rem 0;
    box-shadow: 0 0 3px $shadow-weak;
}

.name {
    color: $link;
    display: inline-block;
    padding: .5rem;
    text-decoration: none;
}
</style>
