68 lines
2.2 KiB
Vue
68 lines
2.2 KiB
Vue
<!-- pages/members/index.vue -->
|
|
<template>
|
|
<UDashboard>
|
|
<UDashboardPanel>
|
|
<UDashboardHeader>
|
|
<template #title> Welcome back, {{ member?.name }}! </template>
|
|
</UDashboardHeader>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<UCard>
|
|
<template #header>Your Circle</template>
|
|
<p class="text-xl font-semibold">{{ circleLabel }}</p>
|
|
<p class="text-sm text-zinc-600 mt-1">{{ circleDescription }}</p>
|
|
<UButton variant="soft" size="sm" class="mt-2">
|
|
Request Circle Change
|
|
</UButton>
|
|
</UCard>
|
|
|
|
<UCard>
|
|
<template #header>Your Contribution</template>
|
|
<p class="text-xl font-semibold">{{ contributionLabel }}</p>
|
|
<p class="text-sm text-zinc-600">Supporting 2 solidarity spots</p>
|
|
<UButton variant="soft" size="sm" class="mt-2">
|
|
Adjust Contribution
|
|
</UButton>
|
|
</UCard>
|
|
</div>
|
|
|
|
<UCard class="mt-6">
|
|
<template #header>Quick Links</template>
|
|
<UList>
|
|
<li><NuxtLink to="/members/resources">Resource Library</NuxtLink></li>
|
|
<li><a href="https://gamma-space.slack.com">Slack Community</a></li>
|
|
<li><NuxtLink to="/members/events">Upcoming Events</NuxtLink></li>
|
|
</UList>
|
|
</UCard>
|
|
</UDashboardPanel>
|
|
</UDashboard>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { getCircleByValue } from '~/config/circles'
|
|
import { getContributionTierByValue } from '~/config/contributions'
|
|
|
|
// Mock member data - in real app this would come from authentication/API
|
|
const member = ref({
|
|
name: 'Guest User',
|
|
circle: 'community',
|
|
contributionTier: '15'
|
|
})
|
|
|
|
// Computed properties for display labels
|
|
const circleLabel = computed(() => {
|
|
const circle = getCircleByValue(member.value?.circle)
|
|
return circle?.label || member.value?.circle
|
|
})
|
|
|
|
const circleDescription = computed(() => {
|
|
const circle = getCircleByValue(member.value?.circle)
|
|
return circle?.description || ''
|
|
})
|
|
|
|
const contributionLabel = computed(() => {
|
|
const tier = getContributionTierByValue(member.value?.contributionTier)
|
|
return tier?.label || `$${member.value?.contributionTier}/month`
|
|
})
|
|
</script>
|