sigd/resources/views/partials/index/accordion-item.blade.php

24 lines
1.6 KiB
PHP

<!-- Accordion Item Component -->
<h2 id="accordion-card-heading-{{ $id }}"{{ $id > 1 ? ' class="mt-4"' : '' }}>
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-700 rounded-base shadow-xs border border-gray-200 hover:text-gray-900 hover:bg-gray-50 gap-3 [&[aria-expanded='true']]:rounded-b-none [&[aria-expanded='true']]:shadow-none" data-accordion-target="#accordion-card-body-{{ $id }}" aria-expanded="{{ $id === 1 ? 'true' : 'false' }}" aria-controls="accordion-card-body-{{ $id }}">
<span>{{ $question }}</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7" />
</svg>
</button>
</h2>
<div id="accordion-card-body-{{ $id }}" class="{{ $id === 1 ? '' : 'hidden ' }}border border-t-0 border-gray-200 rounded-b-base shadow-xs" aria-labelledby="accordion-card-heading-{{ $id }}">
<div class="p-4 md:p-5">
@if(isset($listItems))
<p class="mb-2 text-[#878C91]">{{ $answer }}</p>
<ul class="mb-3 text-[#878C91] list-disc pl-5">
@foreach($listItems as $item)
<li>{{ $item }}</li>
@endforeach
</ul>
<p class="text-[#878C91]">{{ $conclusion ?? '' }}</p>
@else
<p class="mb-2 text-[#878C91]">{{ $answer }}</p>
@endif
</div>
</div>