Modify the edit article page layout to match.

hackedhorizon · Oct 2, 2024 · 79c6693 · 79c6693
1 parent f6cd0ea
commit 79c6693
Showing 1 changed file with 20 additions and 23 deletions.
diff --git a/resources/views/livewire/admin-panel/post-index.blade.php b/resources/views/livewire/admin-panel/post-index.blade.php
@@ -1,25 +1,23 @@
-<div class="min-h-screen mb-10">
+<div class="w-full max-w-4xl min-h-screen p-6 mx-auto my-4 mb-10 rounded-lg shadow-md bg-surface-300">
+    <h2 class="mb-5 text-2xl font-semibold text-center">{{ __('posts.Edit Article') }}</h2>
 
-    <h2 class="py-5 text-xl font-semibold">{{ __('posts.Edit Article') }}</h2>
+    <div class="flex items-center justify-between py-4">
+        <!-- Search Input -->
+        <x-input wire:model.live.500ms='search' name="search" placeholder="{{ __('Search') }}" icon="o-magnifying-glass"
+            class="w-full bg-surface-300 placeholder-lime-shadow/50" />
 
-    <div class="p-6 bg-surface-300">
-
-        <div class="flex items-center justify-between py-4">
-            <!-- Search Input -->
-            <x-input wire:model.live.500ms='search' name="search" placeholder="{{ __('Search') }}"
-                icon="o-magnifying-glass" class="w-full bg-surface-300 placeholder-lime-shadow/50" />
-
-            <!-- Pagination Size Selector -->
-            <x-select icon="o-chevron-down" :options="$perPageOptions" option-label="name" option-value="value"
-                wire:model.live="perPage" />
-        </div>
+        <!-- Pagination Size Selector -->
+        <x-select icon="o-chevron-down" :options="$perPageOptions" option-label="name" option-value="value"
+            wire:model.live="perPage" />
+    </div>
 
-        <!-- Current Page Info -->
-        <div class="py-2 text-sm text-right text-gray-600">
-            Page {{ $posts->currentPage() }} of {{ $posts->lastPage() }}
-        </div>
+    <!-- Current Page Info -->
+    <div class="py-2 text-sm text-right text-gray-600">
+        Page {{ $posts->currentPage() }} of {{ $posts->lastPage() }}
+    </div>
 
-        <!-- Posts List -->
+    <!-- Posts List -->
+    <div class="space-y-4">
         @foreach ($posts as $post)
             <x-list-item :item="$post" value="title" sub-value="created_at" avatar="avatar">
                 <x-slot:value>
@@ -35,11 +33,10 @@
                 </x-slot:actions>
             </x-list-item>
         @endforeach
+    </div>
 
-        <!-- Pagination Links -->
-        <div class="py-4">
-            {{ $posts->links(data: ['scrollTo' => false]) }}
-        </div>
-
+    <!-- Pagination Links -->
+    <div class="py-4">
+        {{ $posts->links(data: ['scrollTo' => false]) }}
     </div>
 </div>