section classname modified

app/View/Components/Form/Section.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\View\Components\Form;
+
+use App\Abstracts\View\Component;
+use Illuminate\Support\Str;
+
+class Section extends Component
+{
+    public $spacingVertical;
+
+    public $spacingHorizontal;
+
+    public $columnNumber;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        string $spacingVertical = 'gap-x-8', string $spacingHorizontal = 'gap-y-6', string $columnNumber = 'sm:grid-cols-6',
+    ) {
+        $this->spacingVertical = $spacingVertical;
+        $this->spacingHorizontal = $spacingHorizontal;
+        $columnNumber = $columnNumber;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|string
+     */
+    public function render()
+    {
+        return view('components.form.section.index');
+    }
+}

public/css/app.css

@@ -48389,6 +48389,10 @@ body{
     width: 25%;
   }
 
+  .lg\:w-2\/12{
+    width: 16.666667%;
+  }
+
   .lg\:w-80{
     width: 20rem;
   }
@@ -48409,10 +48413,6 @@ body{
     width: 60%;
   }
 
-  .lg\:w-2\/12{
-    width: 16.666667%;
-  }
-
   .lg\:w-7\/12{
     width: 58.333333%;
   }

resources/views/components/form/section/index.blade.php

@@ -4,7 +4,14 @@
     @endif
 
     @if (! empty($body) && $body->isNotEmpty())
-    <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
+        <div
+            @class([
+                'grid my-3.5',
+                $spacingVertical,
+                $spacingHorizontal,
+                $columnNumber,
+            ])
+        >
             {!! $body !!}
         </div>
     @endif

resources/views/modules/api_key/create.blade.php

@@ -5,19 +5,21 @@
 
     <x-slot name="content">
         <x-form id="form-app" route="apps.api-key.store">
-            <div class="w-1/2">
-                <div class="py-8 flex flex-col gap-2">
+            <x-form.section spacing-horizontal="gap-y-2">
+                <x-slot name="body">
                     <x-form.group.text name="api_key" placeholder="{{ trans('general.form.enter', ['field' => trans('modules.api_key')]) }}" value="{{ setting('apps.api_key', null) }}" />
 
+                    <div class="sm:col-span-6">
                         <div class="text-xs">
                             {!! trans('modules.get_api_key', ['url' => 'https://akaunting.com/dashboard']) !!}
                         </div>
                     </div>
 
-                <div>
+                    <div class="sm:col-span-3">
                         <x-form.buttons cancel-route="apps.home.index" without-cancel />
                     </div>
-            </div>
+                </x-slot>
+            </x-form.section>
         </x-form>
     </x-slot>