bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implement experimenta product listing page and enhance navigation components

Browse Source 
- Added a new page for displaying experimenta annual passes, integrating ProductCard and ProductGrid components for product presentation.
- Updated API to filter products by category, allowing for specific product queries.
- Enhanced navigation components, including AreaTabs and RoleSwitcher, to improve user experience and accessibility.
- Refactored existing components for better styling consistency and responsiveness.
- Improved dropdown menu components with updated styles and hover effects for better usability.
This commit is contained in:
Bastian Masanek
2025-11-01 20:08:28 +01:00
parent 81495d5e17
commit a826ea1344
9 changed files with 207 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
app/components/navigation/AreaTabs.vue
View File

@@ -8,16 +8,26 @@ interface ProductArea {
label: string
icon: any
enabled: boolean
visible: boolean
badge?: string
route: string
}
const areas: ProductArea[] = [
{
id: 'makerspace',
label: 'Makerspace',
id: 'experimenta-annual-passes',
label: 'experimenta Jahreskarten',
icon: Sparkles,
enabled: true,
visible: false,
route: '/experimenta',
},
{
id: 'makerspace-annual-passes',
label: 'Makerspace Jahreskarten',
icon: Wrench,
enabled: true,
visible: true,
route: '/products',
},
{
@@ -25,17 +35,10 @@ const areas: ProductArea[] = [
label: 'Labore',
icon: FlaskConical,
enabled: false,
visible: false,
badge: 'Demnächst',
route: '/labs',
},
{
id: 'experimenta',
label: 'experimenta',
icon: Sparkles,
enabled: false,
badge: 'Demnächst',
route: '/experimenta',
},
]
const route = useRoute()
@@ -64,17 +67,11 @@ function navigateToArea(area: ProductArea) {
<!-- Desktop: Tabs -->
<Tabs :model-value="currentArea" class="hidden md:block">
<TabsList class="h-auto p-1 bg-muted/50">
<TabsTrigger
v-for="area in areas"
:key="area.id"
:value="area.id"
:disabled="!area.enabled"
:class="[
<TabsTrigger v-for="area in areas.filter(area => area.visible)" :key="area.id" :value="area.id"
:disabled="!area.enabled" :class="[
'gap-2 data-[state=active]:bg-white dark:data-[state=active]:bg-zinc-900',
!area.enabled && 'opacity-60 cursor-not-allowed',
]"
@click="navigateToArea(area)"
>
]" @click="navigateToArea(area)">
<component :is="area.icon" class="h-4 w-4" />
<span>{{ area.label }}</span>
<Badge v-if="area.badge" variant="secondary" class="ml-1 text-[10px] px-1.5 py-0">
@@ -87,29 +84,17 @@ function navigateToArea(area: ProductArea) {
<!-- Mobile: Horizontal scroll with cards -->
<div class="md:hidden overflow-x-auto scrollbar-hide">
<div class="flex gap-2 p-1 min-w-max">
<button
v-for="area in areas"
:key="area.id"
:disabled="!area.enabled"
:class="[
'flex items-center gap-2 px-4 py-2 rounded-lg border-2 transition-all whitespace-nowrap',
currentArea === area.id
? 'bg-purple-600 text-white border-purple-600'
: 'bg-white dark:bg-zinc-900 border-border hover:border-purple-300',
!area.enabled && 'opacity-60 cursor-not-allowed',
]"
@click="navigateToArea(area)"
>
<component
:is="area.icon"
:class="['h-4 w-4', currentArea === area.id ? 'text-white' : '']"
/>
<button v-for="area in areas.filter(area => area.visible)" :key="area.id" :disabled="!area.enabled" :class="[
'flex items-center gap-2 px-4 py-2 rounded-lg border-2 transition-all whitespace-nowrap',
currentArea === area.id
? 'bg-purple-600 text-white border-purple-600'
: 'bg-white dark:bg-zinc-900 border-border hover:border-purple-300',
!area.enabled && 'opacity-60 cursor-not-allowed',
]" @click="navigateToArea(area)">
<component :is="area.icon" :class="['h-4 w-4', currentArea === area.id ? 'text-white' : '']" />
<span class="font-medium">{{ area.label }}</span>
<Badge
v-if="area.badge"
:variant="currentArea === area.id ? 'secondary' : 'outline'"
class="text-[10px] px-1.5 py-0"
>
<Badge v-if="area.badge" :variant="currentArea === area.id ? 'secondary' : 'outline'"
class="text-[10px] px-1.5 py-0">
{{ area.badge }}
</Badge>
</button>