Extract Form-Specific Blade Components

3omarbadr · Jun 15, 2022 · 61b9720 · 61b9720
1 parent cd789cc
commit 61b9720
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 84 deletions.
diff --git a/resources/views/components/form/button.blade.php b/resources/views/components/form/button.blade.php
@@ -0,0 +1,5 @@
+
+<button type="submit"
+    class="transition-colors duration-300 bg-blue-500 hover:bg-blue-600 mt-4 lg:mt-0 lg:ml-3 rounded-full text-xs font-semibold text-white uppercase py-3 px-8">
+    {{$slot}}
+</button>
diff --git a/resources/views/components/form/error.blade.php b/resources/views/components/form/error.blade.php
@@ -0,0 +1,5 @@
+@props(['name'])
+
+@error($name)
+<p class="text-red-500 text-xs mt-2">{{$message}}</p>
+@enderror
diff --git a/resources/views/components/form/input.blade.php b/resources/views/components/form/input.blade.php
@@ -0,0 +1,11 @@
+@props(['name', 'type' => 'text'])
+
+<div class="mb-5">
+    <x-form.label name={{$name}} />
+
+    <input class="border border-gray-408 p-2 w-full" type="{{$type}}" name="{{$name}}" id="{{$name}}"
+        value="{{old($name)}}" required>
+
+    <x-form.error name={{ $name}} />
+
+</div>
diff --git a/resources/views/components/form/label.blade.php b/resources/views/components/form/label.blade.php
@@ -0,0 +1,5 @@
+@props(['name'])
+
+<label class="block mb-2 uppercase font-bold text-xs text-gray-700" for="{{$name}}">
+    {{ucwords($name)}}
+</label>
diff --git a/resources/views/components/form/textarea.blade.php b/resources/views/components/form/textarea.blade.php
@@ -0,0 +1,11 @@
+@props(['name', 'type' => 'text'])
+
+<div class="mb-6">
+    <x-form.label name={{$name}}/>
+
+    <textarea class="border border-gray-408 p-2 w-full" type="text" name="{{$name}}" id="{{$name}}"
+        value="{{old($name)}}" required></textarea>
+
+    <x-form.error name={{ $name}} />
+
+</div>
diff --git a/resources/views/components/submit-button.blade.php b/resources/views/components/submit-button.blade.php
diff --git a/resources/views/posts/_add-comment-form.blade.php b/resources/views/posts/_add-comment-form.blade.php
@@ -8,17 +8,11 @@
         <h2 class="ml-4">Want to participate ? </h2>
     </header>
 
-    <div class="mt-6">
-        <textarea name="body" class="w-full text-sm focus:outline-none focus:ring" rows="5"
-            placeholder="Quick, think of somthing to say!" required></textarea>
+    <x-form.textarea name="body" />
 
-        @error('body')
-        <span class="text-xs text-red-500">{{$message}}</span>
-        @enderror
-    </div>
 
     <div class="flex justify-end mt-6 pt-6 border-t border-gray-200">
-        <x-submit-button>Post</x-submit-button>
+        <x-form.button>Post</x-form.button>
     </div>
 </form>
 @else

diff --git a/resources/views/posts/create.blade.php b/resources/views/posts/create.blade.php
@@ -2,83 +2,22 @@
     <section class="py-8 max-w-md mx-auto">
 
         <h1 class="text-lg font-bold mb-4">
-             Publish New Post
+            Publish New Post
         </h1>
         <div class="border border-gray-200 p-6 rounded-xl ">
 
             <form method="POST" action="/admin/posts" enctype="multipart/form-data">
                 @csrf
 
-                <div class="mb-5">
-                    <label class="block mb-2 uppercase font-bold text-xs text-gray-700" for="title">
-                        Title
-                    </label>
-                    <input class="border border-gray-408 p-2 w-full" type="text" name="title" id="title"
-                        value="{{old('title')}}" required>
+                <x-form.input name="title"/>
+                <x-form.input name="slug"/>
+                <x-form.input name="thumbnail" type="file" />
+                <x-form.textarea name="excerpt" />
+                <x-form.textarea name="body" />
 
-                    @error('title')
-                    <p class="text-red-500 text-xs mt-2">{{$message}}</p>
-                    @enderror
-
-                </div>
-
-                <div class="mb-5">
-                    <label class="block mb-2 uppercase font-bold text-xs text-gray-700" for="slug">
-                        Slug
-                    </label>
-                    <input class="border border-gray-408 p-2 w-full" type="text" name="slug" id="slug"
-                        value="{{old('slug')}}" required>
-
-                    @error('slug')
-                    <p class="text-red-500 text-xs mt-2">{{$message}}</p>
-                    @enderror
-
-                </div>
-
-                <div class="mb-5">
-                    <label class="block mb-2 uppercase font-bold text-xs text-gray-700" for="thumbnail">
-                        Thumbnail
-                    </label>
-                    <input class="border border-gray-408 p-2 w-full" type="file" name="thumbnail" id="thumbnail"
-                        value="{{old('thumbnail')}}" required>
-
-                    @error('thumbnail')
-                    <p class="text-red-500 text-xs mt-2">{{$message}}</p>
-                    @enderror
-
-                </div>
-
-
-                <div class="mb-6">
-                    <label class="block mb-2 uppercase font-bold text-xs text-gray-700" for="excerpt">
-                        Excerpt
-                    </label>
-                    <textarea class="border border-gray-408 p-2 w-full" type="text" name="excerpt" id="excerpt"
-                        value="{{old('excerpt')}}" required></textarea>
-
-                    @error('excerpt')
-                    <p class="text-red-500 text-xs mt-2">{{$message}}</p>
-                    @enderror
-
-                </div>
-
-                <div class="mb-6">
-                    <label class="block mb-2 uppercase font-bold text-xs text-gray-700" for="body">
-                        Body
-                    </label>
-                    <textarea class="border border-gray-408 p-2 w-full" type="text" name="body" id="body"
-                        value="{{old('body')}}" required></textarea>
-
-                    @error('body')
-                    <p class="text-red-500 text-xs mt-2">{{$message}}</p>
-                    @enderror
-
-                </div>
 
                 <div class="mb-6">
-                    <label class="block mb-2 uppercase font-bold text-xs text-gray-700" for="category_id">
-                        Category
-                    </label>
+                   <x-form.label name="category"/>
                     <select name="category_id" id="category">
 
                         @foreach (\App\Models\Category::all() as $category)
@@ -88,12 +27,10 @@
                         @endforeach
                     </select>
 
-                    @error('category')
-                    <p class="text-red-500 text-xs mt-2">{{$message}}</p>
-                    @enderror
+                 <x-form.error name="category"/>
 
                 </div>
-                <x-submit-button>Publish</x-submit-button>
+                <x-form.button>Publish</x-form.button>
             </form>
         </div>
     </section>