71 lines
3.2 KiB
PHP
71 lines
3.2 KiB
PHP
@if(count($announcements) > 0)
|
|
<div class="mx-auto container mt-8">
|
|
@php
|
|
$onIndexPage = Route::currentRouteName() === 'announcements.index';
|
|
$displayedAnnouncements = $onIndexPage ? $announcements : $announcements->take(3);
|
|
@endphp
|
|
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-color-base">{{ __('Announcements') }}</h1>
|
|
<p class="text-color-muted text-sm">{{ __('Stay informed with the latest platform updates and notices.') }}</p>
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-2 text-color-muted text-sm">
|
|
<x-ri-notification-3-line class="size-4" />
|
|
<span>{{ count($announcements) }} {{ Str::plural('announcement', count($announcements)) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach($displayedAnnouncements as $announcement)
|
|
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral/70 rounded-2xl p-6 shadow-lg transition-all duration-300 hover:shadow-xl">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="inline-flex items-center gap-2 text-primary text-xs font-semibold uppercase tracking-wide">
|
|
<div class="size-2 bg-primary rounded-full animate-pulse"></div>
|
|
<span>{{ __('Update') }}</span>
|
|
</div>
|
|
<span class="text-color-muted text-xs">
|
|
{{ optional($announcement->published_at)->format('M d, Y') ?? $announcement->created_at->format('M d, Y') }}
|
|
</span>
|
|
</div>
|
|
|
|
<h2 class="text-xl font-bold text-color-base mb-2 line-clamp-2">{{ $announcement->title }}</h2>
|
|
<p class="text-color-muted text-sm mb-4 line-clamp-3">{{ $announcement->description }}</p>
|
|
|
|
<a href="{{ route('announcements.show', $announcement) }}" wire:navigate
|
|
class="inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:shadow-lg hover:scale-105">
|
|
{{ __('general.view') }}
|
|
<x-ri-arrow-right-line class="size-4 transition-transform duration-300 group-hover:translate-x-1" />
|
|
</a>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
@if(!$onIndexPage)
|
|
<div class="mt-10 text-center">
|
|
<a href="{{ route('announcements.index') }}"
|
|
class="inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:shadow-lg hover:scale-105">
|
|
{{ __('View More Announcements') }}
|
|
<x-ri-arrow-right-line class="size-5 transform transition-transform duration-300 hover:translate-x-1" />
|
|
</a>
|
|
</div>
|
|
@endif
|
|
|
|
<style>
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</div>
|
|
@endif
|