search tabs added

This commit is contained in:
Benjamin Takats
2022-12-01 00:10:37 +01:00
parent 8769b0bb52
commit d2427cf3d0
16 changed files with 210 additions and 85 deletions

View File

@@ -0,0 +1,13 @@
<?php
namespace App\Http\Livewire\Frontend;
use Livewire\Component;
class Footer extends Component
{
public function render()
{
return view('livewire.frontend.footer');
}
}

View File

@@ -5,7 +5,7 @@ namespace App\Http\Livewire\Frontend;
use App\Models\Country;
use Livewire\Component;
class SearchCities extends Component
class Header extends Component
{
public Country $country;
public string $c = 'de';
@@ -29,6 +29,6 @@ class SearchCities extends Component
public function render()
{
return view('livewire.frontend.search-cities');
return view('livewire.frontend.header');
}
}

View File

@@ -0,0 +1,16 @@
<?php
namespace App\Http\Livewire\Frontend;
use App\Models\Country;
use Livewire\Component;
class SearchCity extends Component
{
public Country $country;
public function render()
{
return view('livewire.frontend.search-city');
}
}

View File

@@ -0,0 +1,13 @@
<?php
namespace App\Http\Livewire\Frontend;
use Livewire\Component;
class SearchCourse extends Component
{
public function render()
{
return view('livewire.frontend.search-course');
}
}

View File

@@ -0,0 +1,13 @@
<?php
namespace App\Http\Livewire\Frontend;
use Livewire\Component;
class SearchEvent extends Component
{
public function render()
{
return view('livewire.frontend.search-event');
}
}

View File

@@ -0,0 +1,16 @@
<?php
namespace App\Http\Livewire\Frontend;
use App\Models\Country;
use Livewire\Component;
class SearchLecturer extends Component
{
public Country $country;
public function render()
{
return view('livewire.frontend.search-lecturer');
}
}

View File

@@ -0,0 +1,13 @@
<?php
namespace App\Http\Livewire\Frontend;
use Livewire\Component;
class SearchTabs extends Component
{
public function render()
{
return view('livewire.frontend.search-tabs');
}
}

View File

@@ -3,6 +3,7 @@
namespace App\Http\Livewire\Tables;
use App\Models\Lecturer;
use Illuminate\Database\Eloquent\Builder;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;
use Rappasoft\LaravelLivewireTables\Views\Columns\BooleanColumn;
@@ -43,4 +44,9 @@ class LecturerTable extends DataTableComponent
];
}
public function builder(): Builder
{
return Lecturer::query();
}
}

View File

@@ -0,0 +1,33 @@
<div class="bottom-0 py-6 bg-gray-900 w-full">
<div class="px-10 mx-auto max-w-7xl">
<div class="flex flex-col items-center md:flex-row md:justify-between">
<a href="#_">
<img src="{{ asset('img/einundzwanzig-horizontal-inverted.svg') }}"
class="text-white fill-current" alt="">
</a>
<div class="flex flex-row justify-center mb-4 -ml-4 -mr-4">
<a href="#"
class="p-4 text-gray-700 hover:text-gray-400">
</a>
<a href="#" class="p-4 text-gray-700 hover:text-gray-400">
</a>
<a href="#" class="p-4 text-gray-700 hover:text-gray-400">
</a>
</div>
</div>
<div class="flex flex-col justify-between text-center md:flex-row">
<p class="order-last text-sm leading-tight text-gray-500 md:order-first"> Built with ❤️ by our
team. </p>
<ul class="flex flex-row justify-center pb-3 -ml-4 -mr-4 text-sm">
{{--<li> <a href="#_" class="px-4 text-gray-500 hover:text-white">Contact</a> </li>
<li> <a href="#_" class="px-4 text-gray-500 hover:text-white">About US</a> </li>
<li> <a href="#_" class="px-4 text-gray-500 hover:text-white">FAQ's</a> </li>
<li> <a href="#_" class="px-4 text-gray-500 hover:text-white">Terms</a></li>--}}
</ul>
</div>
</div>
</div>

View File

@@ -1,5 +1,4 @@
<div class="bg-21gray flex flex-col h-screen justify-between">
{{-- HEADER --}}
<div>
<section class="w-full">
<div class="max-w-7xl mx-auto px-10">
<div class="flex flex-col flex-wrap items-center justify-between py-7 mx-auto md:flex-row max-w-7xl">
@@ -72,80 +71,4 @@
</div>
</div>
</section>
{{-- MAIN --}}
<section class="w-full mb-12">
<div class="max-w-7xl mx-auto px-10">
<div class="border-b border-gray-200 pb-5 sm:pb-0 my-6">
<h3 class="text-lg font-medium leading-6 text-gray-200">Suche</h3>
<div class="mt-3 sm:mt-4">
<!-- Dropdown menu on small screens -->
<div class="sm:hidden">
<label for="current-tab" class="sr-only">Select a tab</label>
<select id="current-tab" name="current-tab"
class="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
<option selected>Städte</option>
<option>Dozenten</option>
<option>Kurse</option>
<option>Termine</option>
</select>
</div>
<!-- Tabs at small breakpoint and up -->
<div class="hidden sm:block">
<nav class="-mb-px flex space-x-8">
@php
$currentTab = 'border-amber-500 text-amber-600';
$notCurrentTab = 'border-transparent text-gray-200 hover:text-gray-400 hover:border-gray-300';
@endphp
<a href="#"
class="{{ $currentTab }} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">Städte</a>
<a href="#"
class="{{ $notCurrentTab }} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">Dozenten</a>
<a href="#"
class="{{ $notCurrentTab }} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">Kurse</a>
<a href="#"
class="{{ $notCurrentTab }} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">Termine</a>
</nav>
</div>
</div>
</div>
<livewire:tables.city-table :country="$c"/>
</div>
</section>
{{-- FOOTER --}}
<div class="bottom-0 py-6 bg-gray-900 w-full">
<div class="px-10 mx-auto max-w-7xl">
<div class="flex flex-col items-center md:flex-row md:justify-between">
<a href="#_">
<img src="{{ asset('img/einundzwanzig-horizontal-inverted.svg') }}"
class="text-white fill-current" alt="">
</a>
<div class="flex flex-row justify-center mb-4 -ml-4 -mr-4">
<a href="#"
class="p-4 text-gray-700 hover:text-gray-400">
</a>
<a href="#" class="p-4 text-gray-700 hover:text-gray-400">
</a>
<a href="#" class="p-4 text-gray-700 hover:text-gray-400">
</a>
</div>
</div>
<div class="flex flex-col justify-between text-center md:flex-row">
<p class="order-last text-sm leading-tight text-gray-500 md:order-first"> Built with ❤️ by our
team. </p>
<ul class="flex flex-row justify-center pb-3 -ml-4 -mr-4 text-sm">
{{--<li> <a href="#_" class="px-4 text-gray-500 hover:text-white">Contact</a> </li>
<li> <a href="#_" class="px-4 text-gray-500 hover:text-white">About US</a> </li>
<li> <a href="#_" class="px-4 text-gray-500 hover:text-white">FAQ's</a> </li>
<li> <a href="#_" class="px-4 text-gray-500 hover:text-white">Terms</a></li>--}}
</ul>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,13 @@
<div class="bg-21gray flex flex-col h-screen justify-between">
{{-- HEADER --}}
<livewire:frontend.header :country="$country"/>
{{-- MAIN --}}
<section class="w-full mb-12">
<div class="max-w-7xl mx-auto px-10">
<livewire:frontend.search-tabs/>
<livewire:tables.city-table :country="$country->code"/>
</div>
</section>
{{-- FOOTER --}}
<livewire:frontend.footer/>
</div>

View File

@@ -0,0 +1,3 @@
<div>
{{-- Be like water. --}}
</div>

View File

@@ -0,0 +1,3 @@
<div>
{{-- The best athlete wants his opponent at his best. --}}
</div>

View File

@@ -0,0 +1,13 @@
<div class="bg-21gray flex flex-col h-screen justify-between">
{{-- HEADER --}}
<livewire:frontend.header :country="$country"/>
{{-- MAIN --}}
<section class="w-full mb-12">
<div class="max-w-7xl mx-auto px-10">
<livewire:frontend.search-tabs/>
<livewire:tables.lecturer-table/>
</div>
</section>
{{-- FOOTER --}}
<livewire:frontend.footer/>
</div>

View File

@@ -0,0 +1,38 @@
<div>
<div class="border-b border-gray-200 pb-5 sm:pb-0 my-6">
<h3 class="text-lg font-medium leading-6 text-gray-200">Suche</h3>
<div class="mt-3 sm:mt-4">
<!-- Dropdown menu on small screens -->
<div class="sm:hidden">
<label for="current-tab" class="sr-only">Select a tab</label>
<select id="current-tab" name="current-tab"
class="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
<option selected>Städte</option>
<option>Dozenten</option>
<option>Kurse</option>
<option>Termine</option>
</select>
</div>
<!-- Tabs at small breakpoint and up -->
<div class="hidden sm:block">
<nav class="-mb-px flex space-x-8">
@php
$currentTab = 'border-amber-500 text-amber-600';
$notCurrentTab = 'border-transparent text-gray-200 hover:text-gray-400 hover:border-gray-300';
@endphp
<a href="{{ route('search.city', ['country' => 'de']) }}"
class="{{ request()->routeIs('search.city') ? $currentTab : $notCurrentTab }} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">Städte</a>
<a href="{{ route('search.lecturer', ['country' => 'de']) }}"
class="{{ request()->routeIs('search.lecturer') ? $currentTab : $notCurrentTab }} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">Dozenten</a>
<a href="{{ route('search.course', ['country' => 'de']) }}"
class="{{ request()->routeIs('search.course') ? $currentTab : $notCurrentTab }} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">Kurse</a>
<a href="{{ route('search.event', ['country' => 'de']) }}"
class="{{ request()->routeIs('search.event') ? $currentTab : $notCurrentTab }} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">Termine</a>
</nav>
</div>
</div>
</div>
</div>

View File

@@ -14,12 +14,21 @@ use Illuminate\Support\Facades\Route;
*/
Route::get('/', function () {
return to_route('search.cities', ['country' => 'de']);
return to_route('search.city', ['country' => 'de']);
})
->name('welcome');
Route::get('/{country:code}/suche', \App\Http\Livewire\Frontend\SearchCities::class)
->name('search.cities');
Route::get('/{country:code}/suche/stadt', \App\Http\Livewire\Frontend\SearchCity::class)
->name('search.city');
Route::get('/{country:code}/suche/dozent', \App\Http\Livewire\Frontend\SearchLecturer::class)
->name('search.lecturer');
Route::get('/{country:code}/suche/kurs', \App\Http\Livewire\Frontend\SearchCity::class)
->name('search.course');
Route::get('/{country:code}/suche/termin', \App\Http\Livewire\Frontend\SearchCity::class)
->name('search.event');
Route::get('/dozenten', \App\Http\Livewire\Guest\Welcome::class)
->name('search.lecturers');