feat: add zine-direction shared components

app/components/PrivacyToggle.vue

@@ -1,56 +1,67 @@
 <template>
-  <div class="flex items-center gap-3 text-sm">
-    <span class="text-guild-400 text-xs font-medium"
-      >{{ label }}:</span
-    >
-    <div class="flex items-center gap-2">
-      <span
-        class="text-xs transition-colors"
-        :class="
-          isPrivate
-            ? 'text-guild-500'
-            : 'text-candlelight-500 font-semibold'
-        "
-      >
-        Members
-      </span>
-      <USwitch
-        :model-value="isPrivate"
-        @update:model-value="togglePrivacy"
-        color="primary"
-        size="md"
-      />
-      <span
-        class="text-xs transition-colors"
-        :class="
-          isPrivate
-            ? 'text-candlelight-500 font-semibold'
-            : 'text-guild-500'
-        "
-      >
-        Private
-      </span>
-    </div>
+  <div class="priv">
+    <span
+      v-for="opt in options"
+      :key="opt.value"
+      :class="{ on: modelValue === opt.value }"
+      @click="$emit('update:modelValue', opt.value)"
+    >{{ opt.label }}</span>
   </div>
 </template>
 
 <script setup>
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: 'members',
-  },
-  label: {
-    type: String,
-    default: 'Privacy',
-  },
+defineProps({
+  modelValue: { type: String, default: 'public' },
 })
 
-const emit = defineEmits(['update:modelValue'])
+defineEmits(['update:modelValue'])
 
-const isPrivate = computed(() => props.modelValue === 'private')
-
-const togglePrivacy = (value) => {
-  emit('update:modelValue', value ? 'private' : 'members')
-}
+const options = [
+  { label: 'Public', value: 'public' },
+  { label: 'Members', value: 'members' },
+  { label: 'Private', value: 'private' },
+]
 </script>
+
+<style scoped>
+.priv {
+  display: inline-flex;
+  gap: 0;
+  font-size: 9px;
+  font-family: 'Commit Mono', monospace;
+  letter-spacing: 0.02em;
+}
+
+.priv span {
+  padding: 2px 7px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed var(--border);
+  color: var(--text-faint);
+  cursor: pointer;
+  transition: all 0.12s;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.priv span + span {
+  border-left: none;
+}
+
+.priv span:hover {
+  color: var(--text-dim);
+}
+
+.priv span.on {
+  background: var(--surface);
+  color: var(--text-bright);
+  border-color: var(--candle);
+  border-style: solid;
+}
+
+.priv span.on + span {
+  border-left-color: var(--candle);
+}
+</style>