Make conditional classes more readable with the @class directive

Imagine you've built yourself a nice reusable Blade component to display simple badges in your website. And you use it like so:

1<x-ui.badge
2    text="{{ 'Active' }}"
3    type="active"
4/>

And the component looks something like this:

 1// components/ui/badge.blade.php
 2 
 3@props(['text', 'type'])
 4 
 5<span class="mw-c-badge
 6    @if($type === 'active') mw-c-badge--active @endif
 7    @if($type === 'paused') mw-c-badge--paused @endif
 8    @if($type === 'finished') mw-c-badge--finished @endif">
 9    {{ $text }}
10</span>

Sure, this works. And you know what? Given that this is such a small component I'd be tempted to say it's fine like this. You've already extracted the logic to its own component and made it very easy to reuse it.

But in bigger components we can clean it up a bit more by using the @class directive which essentially accepts an associative array of classes where the key contains the class(es) and the respective value is the condition to display that class.

 1// components/ui/badge.blade.php
 2 
 3@props(['text', 'type'])
 4 
 5<span @class([
 6    'mw-c-badge some-other-class',
 7    'mw-c-badge--active' => $type === 'active',
 8    'mw-c-badge--paused' => $type === 'paused',
 9    'mw-c-badge--finished' => $type === 'finished',
10])>
11    {{ $text }}
12</span>

*Code highlighting provided by Torchlight.