Placeholder badge color not working
I have made a badge which color is based on the condition. My problem is the class color is not reflected EXCEPT for gray color. Yellow and green does not reflect. Although I checked it in browser dev view the class (e.g bg-yellow-100) is there but the actual style is not applied.
Placeholder::make('Status')->content(function ($record){
$color = match ($record->status) {
'pending' => 'gray',
'delivered' => 'yellow',
'completed' => 'green',
};
$string = '<span class="inline-flex items-center gap-x-1.5 rounded-md bg-'.$color.'-100 px-2 py-1 text-xs font-medium text-'.$color.'-600">
<svg class="h-1.5 w-1.5 fill-'.$color.'-400" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3" />
</svg>'.$record->status.'</span>';
return new HtmlString($string);
})Placeholder::make('Status')->content(function ($record){
$color = match ($record->status) {
'pending' => 'gray',
'delivered' => 'yellow',
'completed' => 'green',
};
$string = '<span class="inline-flex items-center gap-x-1.5 rounded-md bg-'.$color.'-100 px-2 py-1 text-xs font-medium text-'.$color.'-600">
<svg class="h-1.5 w-1.5 fill-'.$color.'-400" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3" />
</svg>'.$record->status.'</span>';
return new HtmlString($string);
})Solution
You can try something like this if you want.
Placeholder::make('Status')->content(function ($record) {
$color = match ($record->status) {
'pending' => Color::Gray,
'delivered' => Color::Yellow,
'completed' => Color::Green,
};
$string = "<span class='inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium' style='background:rgb(" . $color[100] . "); color:rgb(" . $color[600] . ")'>"
. "<svg class='h-1.5 w-1.5' viewBox=\"0 0 6 6\" aria-hidden=\"true\" style='fill:rgb(" . $color[400] . ")'>"
. "<circle cx=\"3\" cy=\"3\" r=\"3\" /></svg>"
. htmlspecialchars($record->status) . "</span>";
return new HtmlString($string);
});Placeholder::make('Status')->content(function ($record) {
$color = match ($record->status) {
'pending' => Color::Gray,
'delivered' => Color::Yellow,
'completed' => Color::Green,
};
$string = "<span class='inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium' style='background:rgb(" . $color[100] . "); color:rgb(" . $color[600] . ")'>"
. "<svg class='h-1.5 w-1.5' viewBox=\"0 0 6 6\" aria-hidden=\"true\" style='fill:rgb(" . $color[400] . ")'>"
. "<circle cx=\"3\" cy=\"3\" r=\"3\" /></svg>"
. htmlspecialchars($record->status) . "</span>";
return new HtmlString($string);
});