1  <section x-data="{ open: @entangle('open') }" x-show="open" x-cloak class="relative z-10" aria-labelledby="slide-over-title"
 2      x-ref="dialog" aria-modal="true">
 3  
 4      <div x-show="open" x-cloak x-transition:enter="ease-in-out duration-200" x-transition:enter-start="opacity-0"
 5          x-transition:enter-end="opacity-100" x-transition:leave="ease-in-out duration-200"
 6          x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
 7          class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"></div>
 8  
 9      <div class="fixed inset-0 overflow-hidden">
10          <div class="absolute inset-0 overflow-hidden">
11              <div class="fixed inset-y-0 right-0 flex max-w-full pl-10 pointer-events-none">
12  
13                  <div x-show="open" x-cloak
14                      x-transition:enter="transform transition ease-in-out duration-500 sm:duration-500"
15                      x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
16                      x-transition:leave="transform transition ease-in-out duration-500 sm:duration-500"
17                      x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
18                      class="w-screen max-w-lg pointer-events-auto" >
19                      <div class="flex flex-col h-full overflow-y-scroll bg-white shadow-xl">
20                          <header
21                              class="p-4 sm:px-8 sm:py-4  {{ Str::contains($component, 'remove') ? 'bg-red-600' : 'bg-primary-600' }}">
22                              <div class="flex items-center justify-between ">
23                                  <h2 class="font-bold text-white text" id="slide-over-title">
24                                      @if ($title)
25                                          {{ $title }}
26                                      @endif
27                                  </h2>
28                                  <div class="flex items-center ml-3 h-7">
29                                      <button type="button"
30                                          class="bg-white rounded-md text-secondary-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-800 focus:ring-offset-2"
31                                          @click="Livewire.emit('closePanel')">
32                                          <span class="sr-only">Close panel</span>
33                                          <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none"
34                                              viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
35                                              aria-hidden="true">
36                                              <path stroke-linecap="round" stroke-linejoin="round"
37                                                  d="M6 18L18 6M6 6l12 12"></path>
38                                          </svg>
39                                      </button>
40                                  </div>
41                              </div>
42                          </header>
43                          <article class="relative flex-1 px-4 mt-6 sm:px-6">
44                              @if ($component)
45                                  @if ($entityId)
46                                      @livewire($component, ['entityId' => $entityId, 'entityType' => $entityType, 'reviewType' => $reviewType, 'params' => $params], key($component . '_' . $entityId))
47                                  @else
48                                      @livewire($component, '', key($component . '_' . time()))
49                                  @endif
50                              @else
51                                  <div class="absolute inset-0 px-4 sm:px-6">
52                                      <div class="h-full border-2 border-gray-200 border-dashed" aria-hidden="true"></div>
53                                  </div>
54                              @endif
55                          </article>
56                      </div>
57                  </div>
58  
59              </div>
60          </div>
61      </div>
62  </section>