feat: posts and mentions in profile (#17)

components/common/CommonTabs.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue: string
+  options: string[]
+}>()
+defineEmits(['update:modelValue'])
+
+function toValidName(otpion: string) {
+  return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
+}
+</script>
+
+<template>
+  <div flex w-full>
+    <template v-for="option in options" :key="option">
+      <input
+        :id="`tab-${toValidName(option)}`" :checked="modelValue === option" :value="option" type="radio" name="tabs" display="none" @change="$emit('update:modelValue', option)"
+      ><label flex w-full justify-center h-8 cursor-pointer :for="`tab-${toValidName(option)}`" :class="modelValue === option ? 'color-primary' : 'hover:color-purple'" tabindex="1" @keypress.enter="$emit('update:modelValue', option)">{{ option }}</label>
+    </template>
+  </div>
+</template>