55 lines
3.8 KiB
HTML
55 lines
3.8 KiB
HTML
<div class="h-screen w-screen flex flex-col">
|
|
<main class="flex-grow overflow-hidden">
|
|
@switch (currentView()) {
|
|
@case ('home') { <app-home></app-home> }
|
|
@case ('discover') { <app-discover></app-discover> }
|
|
@case ('create-bet') { <app-create-bet (close)="onBetActionClosed()"></app-create-bet> }
|
|
@case ('groups') { <app-groups></app-groups> }
|
|
@case ('profile') { <app-profile></app-profile> }
|
|
}
|
|
</main>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="flex-shrink-0 bg-slate-800 border-t border-slate-700">
|
|
<div class="flex justify-around items-center h-20">
|
|
<!-- Nav Item: Home -->
|
|
<button (click)="setView('home')" [class]="'flex flex-col items-center justify-center w-full transition-colors ' + (currentView() === 'home' ? 'text-cyan-400' : 'text-slate-400 hover:text-white')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
|
</svg>
|
|
<span class="text-xs mt-1">Home</span>
|
|
</button>
|
|
|
|
<!-- Nav Item: Discover -->
|
|
<button (click)="setView('discover')" [class]="'flex flex-col items-center justify-center w-full transition-colors ' + (currentView() === 'discover' ? 'text-cyan-400' : 'text-slate-400 hover:text-white')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2H4zm.293 8.293a1 1 0 011.414 0L8 12.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
</svg>
|
|
<span class="text-xs mt-1">Scopri</span>
|
|
</button>
|
|
|
|
<!-- Nav Item: Add Bet (Central) -->
|
|
<button (click)="setView('create-bet')" class="w-20 h-20 -mt-10 bg-cyan-500 rounded-full flex items-center justify-center text-white shadow-lg hover:bg-cyan-600 transition-transform transform hover:scale-110">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Nav Item: Groups -->
|
|
<button (click)="setView('groups')" [class]="'flex flex-col items-center justify-center w-full transition-colors ' + (currentView() === 'groups' ? 'text-cyan-400' : 'text-slate-400 hover:text-white')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.653-.124-1.282-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.653.124-1.282.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
</svg>
|
|
<span class="text-xs mt-1">Gruppi</span>
|
|
</button>
|
|
|
|
<!-- Nav Item: Profile -->
|
|
<button (click)="setView('profile')" [class]="'flex flex-col items-center justify-center w-full transition-colors ' + (currentView() === 'profile' ? 'text-cyan-400' : 'text-slate-400 hover:text-white')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
<span class="text-xs mt-1">Profilo</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</div> |