ghostguild-org/app/components/PrivacyToggle.vue
Jennie Robinson Faber a62e167876 Migrate design system from ethereal/cool to warm/craft/guild theme
Replace ghost/whisper/sparkle color palettes with guild/candlelight/parchment/ember/earth tokens.
Switch typography from NB Television Pro to Quietism serif. Update all 25 Vue components,
layouts, and pages to new design system. Add circle color tokens, typography scale, prose-guild
class, and warm texture effects. Clean up stale documentation files.
2026-02-24 20:01:11 +00:00

56 lines
1.2 KiB
Vue

<template>
<div class="flex items-center gap-3 text-sm">
<span class="text-gray-700 dark: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-gray-500 dark:text-guild-500'
: 'text-blue-600 dark:text-blue-400 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-blue-600 dark:text-blue-400 font-semibold'
: 'text-gray-500 dark:text-guild-500'
"
>
Private
</span>
</div>
</div>
</template>
<script setup>
const props = defineProps({
modelValue: {
type: String,
default: "members",
},
label: {
type: String,
default: "Privacy",
},
});
const emit = defineEmits(["update:modelValue"]);
const isPrivate = computed(() => props.modelValue === "private");
const togglePrivacy = (value) => {
emit("update:modelValue", value ? "private" : "members");
};
</script>