rohanverma.net/components/ProfileList.vue

<template>
    <div class="w-full leading-normal">
        <div @click="redirect_href('twitter')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
            <p class="font-bold text-lg mb-1 group-hover:text-white"><fa :icon="faTwitter" /> <span class="pl-2">Twitter</span></p>
        </div>
        <div @click="redirect_href('github')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
            <p class="font-bold text-lg mb-1 group-hover:text-white"><fa :icon="faGithub" /> <span class="pl-2">Github</span></p>
        </div>
        <div @click="redirect_href('linkedin')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
            <p class="font-bold text-lg mb-1 group-hover:text-white"><fa :icon="faLinkedin" /> <span class="pl-2">Linkedin</span></p>
        </div>
        <div @click="redirect_href('blog')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4">
            <p class="font-bold text-lg mb-1 group-hover:text-white"><fa :icon="faWordpress" /> <span class="pl-2">Blog</span></p>
        </div>
    </div>
</template>

<script>
import { faGithub, faLinkedin, faTwitter, faWordpress } from '@fortawesome/free-brands-svg-icons'

export default {
  methods: {
    redirect_href (profile) {
        switch (profile) {
            case "linkedin":
                window.open("//www.linkedin.com/in/rhnvrm/", '_blank')
                break;
            case "twitter":
                window.open("//twitter.com/rhnvrm", '_blank')
                break;
            case "github":
                window.open("//github.com/rhnvrm", '_blank')
                break;
            case "blog":
                window.open("//blog.rohanverma.net/", '_blank')
                break;

            default:
                break;
        }
    }
  },
  computed: {
    faGithub () {
        return faGithub
    },
    faLinkedin () {
        return faLinkedin
    },
    faTwitter () {
        return faTwitter
    },
    faWordpress () {
        return faWordpress
    }
  },
}
</script>