41 lines
1.2 KiB
PHP
41 lines
1.2 KiB
PHP
|
<?php
|
||
|
|
|
||
|
|
namespace App\View\Ui;
|
||
|
|
|
||
|
|
use Illuminate\View\Component;
|
||
|
|
|
||
|
|
class BooleanDisplay extends Component
|
||
|
|
{
|
||
|
|
|
||
|
|
public function __construct(
|
||
|
|
public bool $value,
|
||
|
|
public string $hint,
|
||
|
|
public string $right,
|
||
|
|
public string $wrong,
|
||
|
|
public bool $dark = false,
|
||
|
|
) {
|
||
|
|
}
|
||
|
|
|
||
|
|
public function spriteClass(): string
|
||
|
|
{
|
||
|
|
return $this->value ? 'text-green-800 group-[.dark]:text-green-600' : 'text-red-800 group-[.dark]:text-red-600';
|
||
|
|
}
|
||
|
|
|
||
|
|
public function render()
|
||
|
|
{
|
||
|
|
return <<<'HTML'
|
||
|
|
<div x-tooltip.raw="{{$hint}}" class="flex space-x-2 items-center group @if($dark) dark @endif">
|
||
|
|
<div class="border-2 rounded-full w-5 h-5 flex items-center justify-center
|
||
|
|
@if ($value) border-green-700 group-[.dark]:border-green-500
|
||
|
|
@else border-red-700 group-[.dark]:border-red-500
|
||
|
|
@endif
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<x-ui::sprite :src="$value ? 'check ' :'close'" class="w-3 h-3 flex-none {{$spriteClass}}"></x-ui::sprite>
|
||
|
|
</div>
|
||
|
|
<div class="text-gray-400 text-xs">{{ $value ? $right : $wrong }}</div>
|
||
|
|
</div>
|
||
|
|
HTML;
|
||
|
|
}
|
||
|
|
}
|