Readying for design

This commit is contained in:
Jennie Robinson Faber 2026-03-04 18:24:20 +00:00
parent d73256ca2b
commit fadf473dde
50 changed files with 1478 additions and 1259 deletions

View file

@ -1,45 +1,45 @@
<template>
<div>
<h1 class="text-2xl font-bold mb-6">Members</h1>
<div v-if="pending" class="text-center">Loading...</div>
<div v-else-if="error" class="text-red-600">
<h1 class="text-display font-bold mb-6 text-guild-100">Members</h1>
<div v-if="pending" class="text-center text-guild-400">Loading...</div>
<div v-else-if="error" class="text-ember-400">
Error loading members: {{ error }}
</div>
<div v-else class="space-y-4">
<div class="bg-white rounded-lg border p-4">
<h3 class="font-semibold mb-2">Total Members: {{ members?.length || 0 }}</h3>
<div v-for="member in members" :key="member._id" class="border-b pb-2 mb-2 last:border-b-0">
<div class="bg-guild-900 rounded-lg border border-guild-700 p-4">
<h3 class="font-semibold mb-2 text-guild-100">Total Members: {{ members?.length || 0 }}</h3>
<div v-for="member in members" :key="member._id" class="border-b border-guild-700 pb-2 mb-2 last:border-b-0">
<div class="flex justify-between items-center">
<div>
<p class="font-medium">{{ member.name }}</p>
<p class="text-gray-600 text-sm">{{ member.email }}</p>
<p class="font-medium text-guild-100">{{ member.name }}</p>
<p class="text-guild-400 text-sm">{{ member.email }}</p>
</div>
<div class="text-right">
<span class="inline-block px-2 py-1 text-xs rounded bg-blue-100 text-blue-800">
<span class="inline-block px-2 py-1 text-xs rounded bg-candlelight-900/20 text-candlelight-400">
{{ member.circle }}
</span>
<p class="text-sm text-gray-500">${{ member.contributionTier }}/month</p>
<p class="text-sm text-guild-500 text-ui-mono">${{ member.contributionTier }}/month</p>
</div>
</div>
</div>
</div>
<!-- Simple Add Member Form -->
<div class="bg-white rounded-lg border p-4">
<h3 class="font-semibold mb-4">Add Member</h3>
<div class="bg-guild-900 rounded-lg border border-guild-700 p-4">
<h3 class="text-display-sm font-semibold mb-4 text-guild-100">Add Member</h3>
<div class="grid grid-cols-2 gap-4">
<input v-model="newMember.name" placeholder="Name" class="border rounded p-2" />
<input v-model="newMember.email" placeholder="Email" class="border rounded p-2" />
<select v-model="newMember.circle" class="border rounded p-2">
<input v-model="newMember.name" placeholder="Name" class="border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded p-2" />
<input v-model="newMember.email" placeholder="Email" class="border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded p-2" />
<select v-model="newMember.circle" class="border border-guild-700 bg-guild-800 text-guild-100 rounded p-2">
<option value="community">Community</option>
<option value="founder">Founder</option>
<option value="practitioner">Practitioner</option>
</select>
<select v-model="newMember.contributionTier" class="border rounded p-2">
<select v-model="newMember.contributionTier" class="border border-guild-700 bg-guild-800 text-guild-100 rounded p-2">
<option value="0">$0/month</option>
<option value="5">$5/month</option>
<option value="15">$15/month</option>
@ -47,7 +47,7 @@
<option value="50">$50/month</option>
</select>
</div>
<button @click="createMember" :disabled="creating" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50">
<button @click="createMember" :disabled="creating" class="mt-4 bg-candlelight-600 text-white px-4 py-2 rounded hover:bg-candlelight-700 disabled:opacity-50">
{{ creating ? 'Adding...' : 'Add Member' }}
</button>
</div>
@ -75,21 +75,21 @@ const createMember = async () => {
alert('Please fill in name and email')
return
}
creating.value = true
try {
await $fetch('/api/admin/members', {
method: 'POST',
body: newMember
})
Object.assign(newMember, {
name: '',
email: '',
circle: 'community',
contributionTier: '0'
})
await refresh()
alert('Member added successfully!')
} catch (error) {
@ -98,4 +98,4 @@ const createMember = async () => {
creating.value = false
}
}
</script>
</script>