Merge pull request #16 from slimani-dev/main

Fix Layout with Filament Grid Style and HasColumns Trait

Author: bramr94

README.md

@@ -51,6 +51,33 @@ FilamentDeveloperLoginsPlugin::make()
     ->enabled(app()->environment('local'))
 ```
 
+### columns()
+
+To customize the grid layout, you can use the columns() method. This method allows you to configure the grid layout based on your needs.
+
+By default, the columns() method sets the grid to 2 columns. You can adjust the default column count or specify different column counts for different screen sizes by passing an array.
+
+Example:
+
+```php
+// ...
+FilamentDeveloperLoginsPlugin::make()
+    ->columns() // default 2
+```
+
+or you can use an array like this
+
+```php
+// ...
+FilamentDeveloperLoginsPlugin::make()
+        ->columns([
+        'sm' => 3,
+        'xl' => 6,
+        '2xl' => 8,
+    ])
+```
+
+
 ### switchable()
 
 By default, a "Switch to" button is shown in the top right corner of the screen, so you can easily switch between the provided users. 

resources/views/components/developer-logins.blade.php

@@ -1,20 +1,31 @@
-@if (! empty($users))
+@if(count($users) > 0)
     <div class="flex flex-col gap-y-6">
-        <div class="relative flex items-center justify-center text-center">
-            <div class="absolute border-t border-gray-200 w-full h-px"></div>
-            <p class="inline-block relative bg-white text-sm p-2 rounded-full font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-100">
+
+        <div class="flex items-center justify-center text-center gap-x-4">
+            <div class="border-t border-gray-200 grow h-px"></div>
+            <p class="font-medium text-gray-500 dark:text-gray-100 shrink">
                 {{ __('filament-developer-logins::auth.login-as') }}
             </p>
+            <div class="border-t border-gray-200 grow h-px"></div>
         </div>
 
         @if ($errors->has('developer-logins-failed'))
             <div class="justify-center text-center">
-                <p class="fi-fo-field-wrp-error-message text-sm text-danger-600 dark:text-danger-400">
+                <p class="fi-fo-field-wrp-error-message text-danger-600 dark:text-danger-400">
                     {{ $errors->first('developer-logins-failed') }}
                 </p>
             </div>
         @endif
-        <div class="grid grid-cols-2 gap-4">
+
+        <x-filament::grid
+                :default="$columns['default'] ?? 1"
+                :sm="$columns['sm'] ?? null"
+                :md="$columns['md'] ?? null"
+                :lg="$columns['lg'] ?? ($columns ? (is_array($columns) ? null : $columns) : 2)"
+                :xl="$columns['xl'] ?? null"
+                :two-xl="$columns['2xl'] ?? null"
+                :attributes="\Filament\Support\prepare_inherited_attributes($attributes)->class('fi-wi gap-4')"
+        >
             @foreach ($users as $label => $credentials)
                 <form action="{{ route('filament-developer-logins.login-as') }}" method="POST">
                     @csrf
@@ -27,7 +38,6 @@
                     </x-filament::button>
                 </form>
             @endforeach
-        </div>
+        </x-filament::grid>
     </div>
-@endif
-
+@endif

src/FilamentDeveloperLoginsPlugin.php

@@ -7,13 +7,14 @@
 use DutchCodingCompany\FilamentDeveloperLogins\Exceptions\ImplementationException;
 use Filament\Contracts\Plugin;
 use Filament\Facades\Filament;
+use Filament\Forms\Concerns\HasColumns;
 use Filament\Panel;
 use Filament\Support\Concerns\EvaluatesClosures;
 use Illuminate\Contracts\Auth\Authenticatable;
 
 class FilamentDeveloperLoginsPlugin implements Plugin
 {
-    use EvaluatesClosures;
+    use EvaluatesClosures, HasColumns;
 
     public Closure | bool $enabled = false;
 

src/View/Components/DeveloperLogins.php

@@ -2,6 +2,7 @@
 
 namespace DutchCodingCompany\FilamentDeveloperLogins\View\Components;
 
+use DutchCodingCompany\FilamentDeveloperLogins\Exceptions\ImplementationException;
 use DutchCodingCompany\FilamentDeveloperLogins\FilamentDeveloperLoginsPlugin;
 use Illuminate\View\Component;
 use Illuminate\View\View;
@@ -10,6 +11,9 @@ class DeveloperLogins extends Component
 {
     protected FilamentDeveloperLoginsPlugin $plugin;
 
+    /**
+     * @throws ImplementationException
+     */
     public function __construct()
     {
         $this->plugin = FilamentDeveloperLoginsPlugin::current();
@@ -19,6 +23,7 @@ public function render(): View
     {
         return view('filament-developer-logins::components.developer-logins', [
             'users' => $this->plugin->getUsers(),
+            'columns' => $this->plugin->getColumns()
         ]);
     }
 }