Refactor to x-green component

Author: dansysanalyst

resources/views/components/green.blade.php

@@ -0,0 +1,2 @@
+<span class="px-2 py-2 font-mono text-sm font-semibold text-gray-900 bg-teal-100 rounded-md">{{ $slot }}
+</span>

resources/views/livewire/documentation/colors.blade.php

@@ -6,7 +6,7 @@
             <p>
                 You can customize default colors for all WireUI components: Notifications, dialogs, inputs, selects, buttons... 
                 <br/>
-                You just need to extend Tailwind Colors setting in <span class="px-2 py-2 font-mono text-sm font-semibold text-gray-900 bg-teal-100 rounded-md">tailwind.config.js</span> adding preferred ones. <br>
+                You just need to extend Tailwind Colors setting in <x-green>tailwind.config.js</x-green> adding preferred ones. <br>
             </p>
         </div>
 

resources/views/livewire/documentation/get-started.blade.php

@@ -66,7 +66,7 @@
 
             <x-code language="html" :code="$directiveExample" />
 
-            <p>3. Add the following settings to your Tailwindcss config file, <span class="px-2 py-2 font-mono text-sm font-semibold text-gray-900 bg-teal-100 rounded-md">tailwind.config.js</span>:</p>
+            <p>3. Add the following settings to your Tailwindcss config file, <x-green>tailwind.config.js</x-green>:</p>
             <x-code language="js" :code="$tailwindConfigExample" />
         </div>
     </div>

resources/views/livewire/documentation/inputs.blade.php

@@ -27,7 +27,7 @@
 
             </p>
             <p>
-            You can set the attribute <span class="px-2 py-2 font-mono text-sm font-semibold text-gray-900 bg-teal-100 rounded-md">wire:model</span> to automatically have the attributes <span class="px-2 py-2 font-mono text-sm font-semibold text-gray-900 bg-teal-100 rounded-md">id</span> set to the MD5 of the model and <span class="px-2 py-2 font-mono text-sm font-semibold text-gray-900 bg-teal-100 rounded-md">name</span> to the exact model. You must NOT pass the attributes id and name for this to work. 
+            You can set the attribute <x-green>wire:model</x-green> to automatically have the attributes <x-green>id</x-green> set to the MD5 of the model and <x-green>name</x-green> to the exact model. You must NOT pass the attributes id and name for this to work. 
             </p>
             <x-code language="html" :code="$wireModelExample" />
         </div>

resources/views/livewire/documentation/textarea.blade.php

@@ -15,7 +15,7 @@
 
             </p>
             <p>
-            You can set the attribute <span class="px-2 py-2 font-mono text-sm font-semibold text-gray-900 bg-teal-100 rounded-md">wire:model</span> to automatically have the attributes <span class="px-2 py-2 font-mono text-sm font-semibold text-gray-900 bg-teal-100 rounded-md">id</span> set to the MD5 of the model and <span class="px-2 py-2 font-mono text-sm font-semibold text-gray-900 bg-teal-100 rounded-md">name</span> to the exact model. You must NOT pass the attributes id and name for this to work. 
+            You can set the attribute <x-green>wire:model</x-green> to automatically have the attributes <x-green>id</x-green> set to the MD5 of the model and <x-green>name</x-green> to the exact model. You must NOT pass the attributes id and name for this to work. 
             </p>
             <x-code language="html" :code="$wireModelExample" />
         </div>

resources/views/livewire/documentation/troubleshooting.blade.php

@@ -26,15 +26,15 @@
         <x-section.title href="#tailwind-forms" title="Tailwind-forms" />
 
         <div class="mt-5 prose text-gray-500 max-w-none">
-            <p id="installing-package">If you have encountered the error <span class="px-2 py-2 font-mono text-sm font-semibold text-gray-900 bg-teal-100 rounded-md">TypeError: require(...) is not a function</span>, you must update your Tailwind-Forms to 
-                <span class="px-2 py-2 font-mono text-sm font-semibold text-gray-900 bg-teal-100 rounded-md">"^0.3.0"</span>. This is often the case with Laravel Breeze installation.
+            <p id="installing-package">If you have encountered the error <x-green>TypeError: require(...) is not a function</x-green>, you must update your Tailwind-Forms to 
+                <x-green>"^0.3.0"</x-green>. This is often the case with Laravel Breeze installation.
             </p>
             <p>Error:</p>
 
             <x-code-no-copy  language="shell" :code="$tailwindFormsError" />
             <p>Solution:</p>
 
-            <p>Modify your Tailwind-forms version and then, run <span class="px-2 py-2 font-mono text-sm font-semibold text-gray-900 bg-teal-100 rounded-md">npm update</span> command.</p>
+            <p>Modify your Tailwind-forms version and then, run <x-green>npm update</x-green> command.</p>
             <x-code language="js" :code="$tailwindFormsUpdate" />
         </div>
     </div>