Simple Alert by CodeWithDennis

Installation
- Custom Theme
Usage
Contributing
Credits
License

This package offers a straightforward and easy-to-use alert component for your Filament application. It allows you to quickly implement customizable alert messages, enhancing the user experience by providing clear and concise notifications.

#Installation

You can install the package via composer:

composer require codewithdennis/filament-simple-alert

Make sure you add the following to your `tailwind.config.js file.

'./vendor/codewithdennis/filament-simple-alert/resources/**/*.blade.php',

#Custom Theme

You will need to create a custom theme for the styles to be applied correctly.

#Usage

The alerts can be used in your infolists or forms, make sure you pick the right component.

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;

#Simple Alerts

There are 4 types of simple alerts: danger, info, success, and warning.

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;
 
SimpleAlert::make('example')
    ->danger()
    ->info()
    ->success()
    ->warning()

If you would like to use a different color, you can use the color method.

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;
 
SimpleAlert::make('example')
    ->color('purple')

#Icon

By default, simple alerts come with an icon. For example, the ->danger() method includes a heroicon-s-x-circle icon. If you want to use a different icon, you can use the icon method.

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;
//use Illuminate\Support\HtmlString;
 
SimpleAlert::make('example')
    ->color('purple')
    ->icon('heroicon-s-users')
//->icon(new HtmlString('🤓'))
//->icon(new HtmlString(Blade::render('my-custom-icon-component')))

#Icon Vertical Alignment

You can change the vertical alignment of the icon by using the iconVerticalAlignment method.

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;
 
SimpleAlert::make('example')
    ->iconVerticalAlignment('start'), // possible values: start, center

#Title

You can add a title to the alert by using the title method.

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;
 
SimpleAlert::make('example')
    ->title('Hoorraayy! Your request has been approved! 🎉')

#Description

You can add a description to the alert by using the description method.

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;
 
SimpleAlert::make('example')
    ->description('This is the description')

#Border

You can add a border to the alert by using the border method.

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;
 
SimpleAlert::make('example')
    ->border()

#Actions

You can also add actions to the alert by using the actions method. All regular action features are supported.

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;
use Filament\Forms\Components\Actions;
 
SimpleAlert::make('example')
    ->columnSpanFull()
    ->success()
    ->title('Simple Alert')
    ->description('This is an example of a simple alert.')
    ->actions([
        Action::make('read-example')
            ->label('Read more')
            ->url('https://filamentphp.com')
            ->openUrlInNewTab()
            ->color('info'),
    ]),

#Actions Vertical Alignment

You can change the vertical alignment of the actions by using the actionsVerticalAlignment method.

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;
use Filament\Forms\Components\Actions;
 
SimpleAlert::make('example')
    ->actionsVerticalAlignment('start'), // possible values: start, center

#Example

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;
use Filament\Forms\Components\Actions;
 
SimpleAlert::make('example')
    ->success()
    ->title(new HtmlString('<strong>Hoorraayy! Your request has been approved! 🎉</strong>'))
    ->description('Lorem ipsum dolor sit amet consectetur adipisicing elit.')
    ->actions([
         Action::make('filament')
            ->label('Details')
            ->icon('heroicon-m-arrow-long-right')
            ->iconPosition(IconPosition::After)
            ->link()
            ->url('https://filamentphp.com')
            ->openUrlInNewTab()
            ->color('success'),
    ]),