Adding features

app/components/PrivacyToggle.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="flex items-center gap-2 text-sm">
+    <span class="text-gray-600 dark:text-gray-400">{{ label }}:</span>
+    <UButtonGroup size="xs">
+      <UButton
+        :variant="modelValue === 'public' ? 'solid' : 'ghost'"
+        :color="modelValue === 'public' ? 'blue' : 'gray'"
+        @click="updateValue('public')"
+      >
+        Public
+      </UButton>
+      <UButton
+        :variant="modelValue === 'members' ? 'solid' : 'ghost'"
+        :color="modelValue === 'members' ? 'blue' : 'gray'"
+        @click="updateValue('members')"
+      >
+        Members
+      </UButton>
+      <UButton
+        :variant="modelValue === 'private' ? 'solid' : 'ghost'"
+        :color="modelValue === 'private' ? 'blue' : 'gray'"
+        @click="updateValue('private')"
+      >
+        Private
+      </UButton>
+    </UButtonGroup>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: 'members'
+  },
+  label: {
+    type: String,
+    default: 'Privacy'
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const updateValue = (value) => {
+  emit('update:modelValue', value)
+}
+</script>