add warning if device preview running on localhost

resources/views/livewire/preview/partials/modal-actions.blade.php

@@ -18,6 +18,7 @@
 
 <x-filament::modal
     id="preview-on-device"
+    width="lg"
     x-on:modal-opened="
         document.getElementById('device-preview-qrcode').setAttribute(
             'contents',
@@ -28,7 +29,13 @@
         Preview on device
     </x-slot>
 
-    Scan this QRCode from your device to preview the current template:
+    @if (\MailCarrier\Facades\MailCarrier::isLocalhost())
+        <div class="bg-warning-100 dark:bg-warning-500/20 border border-warning-300 dark:border-warning-600 rounded py-2 px-4 dark:text-warning-300 font-semibold">
+            Device preview will not work on localhost without a tunneling service like ngrok or expose.
+        </div>
+    @endif
+
+    Scan this QRCode from your device to live-preview the current template.
 
     <qr-code
         id="device-preview-qrcode"
@@ -39,7 +46,7 @@
         style="
             width: 300px;
             height: 300px;
-            margin: 2em auto;
+            margin: auto;
             background-color: #fff;
         "></qr-code>
 

src/Facades/MailCarrier.php

@@ -19,6 +19,7 @@
  * @method static int getFileSize(string $resource, ?string $disk = null)
  * @method static string humanBytes(int $bytes)
  * @method static array<int, int> getEmailRetriesBackoff()
+ * @method static bool isLocalhost()
  *
  * @see \MailCarrier\MailCarrierManager
  */

src/MailCarrierManager.php

@@ -185,4 +185,13 @@ public function getEmailRetriesBackoff(): array
             60 * 60, // 1h
         ];
     }
+
+    public function isLocalhost(): bool
+    {
+        return Str::startsWith(Config::get('app.url'), [
+            'http://localhost', 'https://localhost',
+            'http://127.0.0.1', 'https://127.0.0.1',
+            'http://0.0.0.0', 'https://0.0.0.0',
+        ]);
+    }
 }