78 lines
3.5 KiB
PHP
78 lines
3.5 KiB
PHP
<div class="flex h-dvh flex-col bg-surface-page">
|
|
|
|
{{-- HEADER --}}
|
|
<header class="shrink-0 z-50 bg-surface border-b border-border shadow-sm
|
|
flex items-center justify-between px-5 pb-4 md:px-8"
|
|
style="padding-top: max(1rem, env(safe-area-inset-top))">
|
|
|
|
<a href="{{ route('home') }}" class="flex items-center gap-2.5">
|
|
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary shadow-md md:h-10 md:w-10">
|
|
<iconify-icon icon="lucide:fuel" class="text-lg text-white md:text-xl"></iconify-icon>
|
|
</div>
|
|
<span class="text-xl font-black tracking-tighter text-primary md:text-2xl">FuelAlert</span>
|
|
</a>
|
|
|
|
<nav class="hidden items-center gap-8 md:flex">
|
|
<a href="#" class="text-sm font-semibold text-text-muted transition-colors hover:text-primary">Prices</a>
|
|
<a href="#" class="text-sm font-semibold text-text-muted transition-colors hover:text-primary">Alerts</a>
|
|
<a href="#" class="text-sm font-semibold text-text-muted transition-colors hover:text-primary">Trends</a>
|
|
</nav>
|
|
|
|
@auth
|
|
<a href="{{ route('dashboard') }}"
|
|
class="flex h-9 w-9 items-center justify-center rounded-full border border-border bg-surface-subtle">
|
|
<iconify-icon icon="lucide:user" class="text-base text-text-muted"></iconify-icon>
|
|
</a>
|
|
@else
|
|
<a href="{{ route('login') }}"
|
|
class="flex h-9 w-9 items-center justify-center rounded-full border border-border bg-surface-subtle">
|
|
<iconify-icon icon="lucide:user" class="text-base text-text-muted"></iconify-icon>
|
|
</a>
|
|
@endauth
|
|
</header>
|
|
|
|
{{-- MAIN --}}
|
|
<main class="flex-1 overflow-y-auto" style="-ms-overflow-style:none;scrollbar-width:none;">
|
|
<div class="md:mx-auto md:max-w-3xl">
|
|
|
|
<livewire:public.fuel.search />
|
|
<livewire:public.fuel.recommendation />
|
|
<livewire:public.fuel.map />
|
|
<livewire:public.fuel.station-list />
|
|
|
|
<section class="px-5 pb-8">
|
|
<x-fuel.forecast />
|
|
</section>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
{{-- BOTTOM TAB BAR --}}
|
|
@php
|
|
$tabs = [
|
|
['label' => 'Prices', 'icon' => 'lucide:fuel', 'route' => 'home'],
|
|
['label' => 'Alerts', 'icon' => 'lucide:bell', 'route' => null],
|
|
['label' => 'Forecourts', 'icon' => 'lucide:map-pin', 'route' => null],
|
|
['label' => 'Trends', 'icon' => 'lucide:trending-up', 'route' => null],
|
|
];
|
|
@endphp
|
|
<nav class="shrink-0 border-t border-border bg-surface md:hidden"
|
|
style="padding-bottom: max(0.5rem, env(safe-area-inset-bottom))">
|
|
<div class="flex pt-3">
|
|
@foreach ($tabs as $tab)
|
|
@php $active = $tab['route'] && request()->routeIs($tab['route']); @endphp
|
|
<div class="flex flex-1 flex-col items-center gap-1">
|
|
<iconify-icon
|
|
icon="{{ $tab['icon'] }}"
|
|
class="text-xl {{ $active ? 'text-primary' : 'text-text-muted' }}"
|
|
></iconify-icon>
|
|
<span class="text-[10px] font-bold uppercase tracking-wide {{ $active ? 'text-primary' : 'text-text-muted' }}">
|
|
{{ $tab['label'] }}
|
|
</span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</nav>
|
|
|
|
</div>
|