File Manager

Edit File: alert.blade.php

@props(['status' => '', 'message' => ''])

@if ($status)
<div class="fixed px-8 py-1 rounded-md right-8 top-8 z-[9999] {{$status == "success" ? "bg-emerald-500" : ($status == "info" ? "bg-sky-400" : "bg-red-600")}} px-4 py-1 text-nowrap text-white font-bold" id="alert">
    {{ $message }}
</div>
@endif

@if ($status)
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var alertElement = document.getElementById('alert');
        if (alertElement) {
            setTimeout(function() {
                alertElement.style.opacity = '0'; // Optional fade-out effect
                setTimeout(function() {
                    alertElement.style.display = 'none';
                }, 500); // Wait for the fade-out transition to finish
            }, 3000); // 2000ms = 2 seconds
        }
    });
</script>
@endif

<style>
    #alert {
        transition: opacity 0.5s ease;
    }
</style>

Back