Alert component
This commit is contained in:
parent
18a48f5463
commit
b57a2a515a
|
|
@ -0,0 +1,38 @@
|
|||
@props(['color' => 'blue'])
|
||||
<div class="border-l-4 ">
|
||||
<div @class([
|
||||
'border-l-4 p4 ',
|
||||
'border-yellow-400 bg-yellow-50 dark:border-yellow-500 dark:bg-yellow-500/10' => $color === 'yellow',
|
||||
'border-red-400 bg-red-50 dark:border-red-500 dark:bg-red-500/15' => $color === 'red',
|
||||
'border-green-400 bg-green-50 dark:border-green-500 dark:bg-green-500/10' => $color === 'green',
|
||||
'border-blue-400 bg-blue-50 dark:border-blue-500 dark:bg-blue-500/10' => $color === 'blue',
|
||||
])>
|
||||
<div class="flex">
|
||||
<div class="shrink-0">
|
||||
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
|
||||
@class([
|
||||
'size-5 ',
|
||||
'text-yellow-400 dark:text-yellow-500' => $color === 'yellow',
|
||||
'text-red-400 dark:text-red-500' => $color === 'red',
|
||||
'text-green-400 dark:text-green-500' => $color === 'green',
|
||||
'text-blue-400 dark:text-blue-500' => $color === 'blue',
|
||||
|
||||
])>
|
||||
<path
|
||||
d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
||||
clip-rule="evenodd" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p @class([
|
||||
'text-sm ',
|
||||
'text-yellow-700 dar:text-yellow-300' => $color === 'yellow',
|
||||
'text-blue-700 dar:text-blue-300' => $color === 'blue',
|
||||
'text-red-700 dar:text-red-300' => $color === 'red',
|
||||
'text-green-700 dar:text-green-300' => $color === 'green',
|
||||
])>
|
||||
You have no credits left.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue