siimee/frontend/src/components/PairingButton.vue

<template lang="pug">
.pairing-button.w-flex.row
    template(v-if='status == "pristine"')
        w-button(:class='status' @click='pass')
            p.pa4.text-upper pass
        w-button(:class='status' @click='pair')
            p.pa4.text-upper pair
    template(v-else-if='status == "pending"')
        w-button(:class='status')
            p.pa4.text-upper pending
    template(v-else)
        w-button(:class='status')
            p.pa4.text-upper paired
</template>

<script>
export default {
    props: {
        status: {
            required: false,
            type: String,
            default: 'pristine',
        },
    },
    emits: ['pair', 'pass'],
    methods: {
        pair() {
            this.$emit('pair')
        },
        pass() {
            this.$emit('pass')
        },
    },
}
</script>

<style lang="sass">
.w-button
    p
        font-size: 1.6em
        font-weight: bold
    &.pristine
        background-color: #000
        border: 2px solid #4D9127
        max-width: 350px
        width: 50%
        margin: 11px 0
        padding: 22px
    &.pending
        background-image: linear-gradient(to right, #4C5264, #A8A8A8)
        min-width: 350px
        width: 100%
        margin: 11px 0
        padding: 22px
    &.paired
        background: #8168F8
        min-width: 350px
        width: 100%
        margin: 11px 0
        padding: 22px
</style>