Add BooleanDisplay component

app/View/Ui/BooleanDisplay.php

@@ -0,0 +1,40 @@
+<?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;
+    }
+}