mkrieger/byos_laravel
1
0
Fork 0
mirror of https://github.com/usetrmnl/byos_laravel.git synced 2026-01-14 07:27:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

use flux design

Browse source
This commit is contained in:
andrzejskowron 2025-11-30 07:12:16 +01:00 • committed by Benjamin Nussbaum
parent b1467204f8
commit a7963947f8
1 changed files with 16 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

32
resources/views/livewire/catalog/trmnl.blade.php
View file

@ -204,7 +204,7 @@ class extends Component {
@else @else
<div class="grid grid-cols-1 gap-4"> <div class="grid grid-cols-1 gap-4">
@foreach($recipes as $recipe) @foreach($recipes as $recipe)
<div class="bg-white dark:bg-white/10 border border-zinc-200 dark:border-white/10 [:where(&)]:p-6 [:where(&)]:rounded-xl space-y-6"> <flux:card class="space-y-6">
<div class="flex items-start space-x-4"> <div class="flex items-start space-x-4">
@php($thumb = $recipe['icon_url'] ?? $recipe['screenshot_url']) @php($thumb = $recipe['icon_url'] ?? $recipe['screenshot_url'])
@if($thumb) @if($thumb)
@ -218,9 +218,9 @@ class extends Component {
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $recipe['name'] }}</h3> <flux:heading size="lg">{{ $recipe['name'] }}</flux:heading>
@if(data_get($recipe, 'stats.installs')) @if(data_get($recipe, 'stats.installs'))
<p class="text-sm text-gray-500 dark:text-gray-400">Installs: {{ data_get($recipe, 'stats.installs') }} · Forks: {{ data_get($recipe, 'stats.forks') }}</p> <flux:text variant="subtle" size="sm">Installs: {{ data_get($recipe, 'stats.installs') }} · Forks: {{ data_get($recipe, 'stats.forks') }}</flux:text>
@endif @endif
</div> </div>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
@ -233,7 +233,7 @@ class extends Component {
</div> </div>
@if($recipe['author_bio']) @if($recipe['author_bio'])
<p class="mt-2 text-sm text-gray-600 dark:text-gray-300">{{ $recipe['author_bio'] }}</p> <flux:text class="mt-2" size="sm">{{ $recipe['author_bio'] }}</flux:text>
@endif @endif
<div class="mt-4 flex items-center space-x-3"> <div class="mt-4 flex items-center space-x-3">
@ -269,7 +269,7 @@ class extends Component {
</div> </div>
</div> </div>
</div> </div>
</div> </flux:card>
@endforeach @endforeach
</div> </div>
@endif @endif
@ -293,30 +293,30 @@ class extends Component {
<img src="{{ $previewData['icon_url'] }}" <img src="{{ $previewData['icon_url'] }}"
alt="{{ $previewData['name'] }} icon" alt="{{ $previewData['name'] }} icon"
class="mx-auto h-32 w-auto object-contain mb-4"> class="mx-auto h-32 w-auto object-contain mb-4">
<p class="text-gray-600 dark:text-gray-400">No preview image available</p> <flux:text variant="subtle">No preview image available</flux:text>
</div> </div>
@else @else
<div class="bg-white dark:bg-zinc-900 rounded-lg overflow-hidden p-8 text-center"> <div class="bg-white dark:bg-zinc-900 rounded-lg overflow-hidden p-8 text-center">
<flux:icon name="puzzle-piece" class="mx-auto h-32 w-32 text-gray-400 mb-4" /> <flux:icon name="puzzle-piece" class="mx-auto h-32 w-32 text-gray-400 mb-4" />
<p class="text-gray-600 dark:text-gray-400">No preview available</p> <flux:text variant="subtle">No preview available</flux:text>
</div> </div>
@endif @endif
@if($previewData['author_bio']) @if($previewData['author_bio'])
<div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"> <flux:card variant="subtle">
<h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Description</h4> <flux:heading size="sm" class="mb-2">Description</flux:heading>
<p class="text-sm text-gray-600 dark:text-gray-300">{{ $previewData['author_bio'] }}</p> <flux:text size="sm">{{ $previewData['author_bio'] }}</flux:text>
</div> </flux:card>
@endif @endif
@if(data_get($previewData, 'stats.installs')) @if(data_get($previewData, 'stats.installs'))
<div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"> <flux:card variant="subtle">
<h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Statistics</h4> <flux:heading size="sm" class="mb-2">Statistics</flux:heading>
<p class="text-sm text-gray-600 dark:text-gray-300"> <flux:text size="sm">
Installs: {{ data_get($previewData, 'stats.installs') }} · Installs: {{ data_get($previewData, 'stats.installs') }} ·
Forks: {{ data_get($previewData, 'stats.forks') }} Forks: {{ data_get($previewData, 'stats.forks') }}
</p> </flux:text>
</div> </flux:card>
@endif @endif
<div class="flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-700 space-x-3"> <div class="flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-700 space-x-3">