Alert

It's like your digital sidekick, popping up to let you know when something important happens. Whether it's a friendly reminder or a heads-up about an error, alerts grab your attention and keep you in the loop with just a quick pop-up message!

Adding the component

php artisan spur:add essentials/alert

If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.

config/spur.php
"components": [
  'essentials/alert',
]

If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component

Usage

Simple Alert 

<x-spur.alert>
    Your profile is not public, Anyone can have access to your repositories
</x-spur.alert>

Alert with border 

<x-spur.alert border>
    Your profile is not public, Anyone can have access to your repositories
</x-spur.alert>

Transparent Alert 

<x-spur.alert transparent>
    Your profile is not public, Anyone can have access to your repositories
</x-spur.alert>

Alert border styles 

<x-spur.alert square>
    Your profile is not public, Anyone can have access to your repositories
</x-spur.alert>

Alert with accent 

<x-spur.alert accent>
    Your profile is not public, Anyone can have access to your repositories
</x-spur.alert>
<x-spur.alert transparent accent color="red">
    Your profile is not public, Anyone can have access to your repositories
</x-spur.alert>
<x-spur.alert square accent color="green">
    Your profile is not public, Anyone can have access to your repositories
</x-spur.alert>

Alert with Icon 

<x-spur.alert color="yellow">
    <strong>Public Profile:</strong> Anyone can have access to your repositories
    <x-slot name="icon">
        <x-spur.icon name="heroicons-s-exclamation-triangle" class="w-5 h-5"/>
    </x-slot>
</x-spur.alert>

Alert with Icon & Details 

<x-spur.alert square accent>
    <strong>Warning:</strong> Your version is out of date
    <x-slot name="icon">
        <x-spur.icon name="heroicons-s-information-circle" class="w-5 h-5"/>
    </x-slot>
    <x-slot name="details">
        <p>Please consider upgrading the CDN version that you are using, because as of next year this one will be deprecated.</p>
    </x-slot>
</x-spur.alert>
<x-spur.alert color="red">
    <strong>Error:</strong> Some fields are not valid
    <x-slot name="icon">
        <x-spur.icon name="heroicons-s-x-circle" class="w-5 h-5"/>
    </x-slot>
    <x-slot name="details">
        <ul class="list-disc pl-10">
            <li>Email field is not valid</li>
            <li>Password should contain special character</li>
        </ul>
    </x-slot>
</x-spur.alert>
<x-spur.alert color="green" border>
    <strong>Congratulations,</strong> Your order have been placed
    <x-slot name="icon">
        <x-spur.icon name="heroicons-s-check-circle" class="w-5 h-5"/>
    </x-slot>
    <x-slot name="details">
        <p>Our customer service will contact you soon to arrange the delivery.</p>
    </x-slot>
</x-spur.alert>

Closeable Alert 

<x-spur.alert square accent closeable>
    <strong>Warning:</strong> Your version is out of date
    <x-slot name="icon">
        <x-spur.icon name="heroicons-s-information-circle" class="w-5 h-5"/>
    </x-slot>
</x-spur.alert>

<x-spur.alert color="green" border closeable>
    <strong>Congratulations,</strong> Your order have been placed
    <x-slot name="icon">
        <x-spur.icon name="heroicons-s-check-circle" class="w-5 h-5"/>
    </x-slot>
    <x-slot name="details">
        <p>Our customer service will contact you soon to arrange the delivery.</p>
    </x-slot>
</x-spur.alert>

With Custom Buttons 

<x-spur.alert square accent closeable>
    <strong>Warning:</strong> Your version is out of date
    <x-slot name="icon">
        <x-spur.icon name="heroicons-s-information-circle" class="w-5 h-5"/>
    </x-slot>
    <x-slot name="details" class>
        <p class="mb-4">Please consider upgrading the CDN version that you are using, because as of next year this one will be deprecated.</p>
        <x-spur.button plain color="blue">Update</x-spur.button>
    </x-slot>
</x-spur.alert>

<x-spur.alert color="green" border closeable>
    <strong>Congratulations,</strong> Your order have been placed
    <x-slot name="icon">
        <x-spur.icon name="heroicons-s-check-circle" class="w-5 h-5"/>
    </x-slot>
    <x-slot name="details">
        <p class="mb-4">Our customer service will contact you soon to arrange the delivery.</p>
        <div class="flex gap-2 justify-end">
            <x-spur.button plain color="green">Order Details</x-spur.button>
            <x-spur.button plain color="green">Contact Us</x-spur.button>
        </div>
    </x-slot>
</x-spur.alert>

Alert Color

You can use the color attribute to pass any of the available color.

<x-spur.alert border color="indigo">
    Your profile is not public, Anyone can have access to your repositories
</x-spur.alert>
<x-spur.alert accent color="cyan">
    Your profile is not public, Anyone can have access to your repositories
</x-spur.alert>
<x-spur.alert square color="pink">
    Your profile is not public, Anyone can have access to your repositories
    <x-slot name="icon">
        <x-spur.icon name="heroicons-s-check-circle" class="w-5 h-5"/>
    </x-slot>
</x-spur.alert>