mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-app.git
synced 2025-12-15 12:16:47 +00:00
🚀 Add courses and lecturers management functionality
This commit is contained in:
HolgerHatGarKeineNode
164
resources/views/livewire/courses/landingpage.blade.php
Normal file
164
resources/views/livewire/courses/landingpage.blade.php
Normal file
@@ -0,0 +1,164 @@
|
||||
<?php
|
||||
|
||||
use App\Models\Course;
|
||||
use App\Models\CourseEvent;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component {
|
||||
public Course $course;
|
||||
|
||||
public $country = 'de';
|
||||
|
||||
public function mount(): void
|
||||
{
|
||||
$this->country = request()->route('country');
|
||||
}
|
||||
|
||||
public function with(): array
|
||||
{
|
||||
return [
|
||||
'course' => $this->course->load('lecturer'),
|
||||
'events' => $this->course
|
||||
->courseEvents()
|
||||
->where('from', '>=', now())
|
||||
->orderBy('from', 'asc')
|
||||
->get(),
|
||||
];
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<!-- Left Column: Course Details -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center space-x-4">
|
||||
<flux:avatar class="[:where(&)]:size-32 [:where(&)]:text-base" size="xl"
|
||||
src="{{ $course->getFirstMedia('logo') ? $course->getFirstMediaUrl('logo') : asset('android-chrome-512x512.png') }}"/>
|
||||
<div class="space-y-2">
|
||||
<flux:heading size="xl" class="mb-4">{{ $course->name }}</flux:heading>
|
||||
@if($course->lecturer)
|
||||
<flux:subheading class="text-gray-600 dark:text-gray-400 flex items-center gap-2">
|
||||
<flux:avatar size="xs" src="{{ $course->lecturer->getFirstMedia('avatar') ? $course->lecturer->getFirstMediaUrl('avatar', 'thumb') : asset('img/einundzwanzig.png') }}"/>
|
||||
{{ $course->lecturer->name }}
|
||||
</flux:subheading>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($course->description)
|
||||
<div>
|
||||
<flux:heading size="lg" class="mb-2">{{ __('Über den Kurs') }}</flux:heading>
|
||||
<x-markdown class="prose whitespace-pre-wrap">{!! $course->description !!}</x-markdown>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($course->lecturer)
|
||||
<div class="space-y-4">
|
||||
<flux:heading size="lg">{{ __('Über den Dozenten') }}</flux:heading>
|
||||
|
||||
<div class="flex items-start gap-4 p-4 bg-zinc-50 dark:bg-zinc-900 rounded-lg">
|
||||
<flux:avatar size="lg" src="{{ $course->lecturer->getFirstMedia('avatar') ? $course->lecturer->getFirstMediaUrl('avatar', 'preview') : asset('img/einundzwanzig.png') }}"/>
|
||||
<div class="flex-1">
|
||||
<flux:heading size="md" class="mb-1">{{ $course->lecturer->name }}</flux:heading>
|
||||
@if($course->lecturer->subtitle)
|
||||
<flux:text class="text-sm text-zinc-600 dark:text-zinc-400 mb-2">{{ $course->lecturer->subtitle }}</flux:text>
|
||||
@endif
|
||||
@if($course->lecturer->intro)
|
||||
<x-markdown class="prose prose-sm whitespace-pre-wrap">{!! $course->lecturer->intro !!}</x-markdown>
|
||||
@endif
|
||||
|
||||
<!-- Lecturer Social Links -->
|
||||
<div class="mt-4 flex flex-wrap gap-2">
|
||||
@if($course->lecturer->website)
|
||||
<flux:button href="{{ $course->lecturer->website }}" target="_blank" variant="ghost" size="xs">
|
||||
<flux:icon.globe-alt class="w-4 h-4 mr-1"/>
|
||||
Website
|
||||
</flux:button>
|
||||
@endif
|
||||
|
||||
@if($course->lecturer->twitter_username)
|
||||
<flux:button href="https://twitter.com/{{ $course->lecturer->twitter_username }}" target="_blank" variant="ghost" size="xs">
|
||||
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
||||
</svg>
|
||||
Twitter
|
||||
</flux:button>
|
||||
@endif
|
||||
|
||||
@if($course->lecturer->nostr)
|
||||
<flux:button href="https://njump.me/{{ $course->lecturer->nostr }}" target="_blank" variant="ghost" size="xs">
|
||||
<flux:icon.bolt class="w-4 h-4 mr-1"/>
|
||||
Nostr
|
||||
</flux:button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Lecturer Avatar/Info -->
|
||||
<div>
|
||||
@if($course->lecturer && $course->lecturer->getFirstMedia('avatar'))
|
||||
<div class="sticky top-8">
|
||||
<flux:heading size="lg" class="mb-4">{{ __('Dozent') }}</flux:heading>
|
||||
<img src="{{ $course->lecturer->getFirstMediaUrl('avatar') }}"
|
||||
alt="{{ $course->lecturer->name }}"
|
||||
class="w-full rounded-lg shadow-lg"/>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Events Section -->
|
||||
@if($events->isNotEmpty())
|
||||
<div class="mt-16">
|
||||
<flux:heading size="xl" class="mb-6">{{ __('Kommende Veranstaltungen') }}</flux:heading>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
@foreach($events as $event)
|
||||
<flux:card size="sm" class="h-full flex flex-col">
|
||||
<flux:heading class="flex items-center gap-2">
|
||||
{{ $event->from->format('d.m.Y') }}
|
||||
</flux:heading>
|
||||
|
||||
<flux:text class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<flux:icon.clock class="inline w-4 h-4"/>
|
||||
{{ $event->from->format('H:i') }} - {{ $event->to->format('H:i') }} Uhr
|
||||
</flux:text>
|
||||
|
||||
@if($event->venue)
|
||||
<flux:text class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<flux:icon.map-pin class="inline w-4 h-4"/>
|
||||
{{ $event->venue->name }}
|
||||
</flux:text>
|
||||
@endif
|
||||
|
||||
<div class="mt-auto pt-4 flex gap-2">
|
||||
<flux:button
|
||||
target="_blank"
|
||||
:href="$event->link"
|
||||
size="xs"
|
||||
variant="primary"
|
||||
class="flex-1"
|
||||
>
|
||||
{{ __('Details/Anmelden') }}
|
||||
</flux:button>
|
||||
@if($course->created_by === auth()->id())
|
||||
<flux:button
|
||||
:href="route_with_country('courses.events.edit', ['course' => $course, 'event' => $event])"
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
icon="pencil"
|
||||
>
|
||||
{{ __('Bearbeiten') }}
|
||||
</flux:button>
|
||||
@endif
|
||||
</div>
|
||||
</flux:card>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
Reference in New Issue
Block a user