isaaccladandCursor
db66d99895
Lean control center at mini.ladill.com: payment QR CRUD, Paystack checkout with 5% fee settlement via Billing API, payments feed, and payouts. QR codes use a fixed black-and-white preset only. Co-authored-by: Cursor <cursoragent@cursor.com>
31 lines
1.2 KiB
PHP
31 lines
1.2 KiB
PHP
@props([
|
|
'id',
|
|
'title',
|
|
'description',
|
|
])
|
|
|
|
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
|
|
<button type="button"
|
|
@click="toggleSection('{{ $id }}')"
|
|
class="flex w-full items-start gap-4 px-5 py-4 text-left transition hover:bg-slate-50/80">
|
|
<span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-slate-600">
|
|
{!! $icon ?? '' !!}
|
|
</span>
|
|
<span class="min-w-0 flex-1">
|
|
<span class="block text-sm font-semibold text-slate-900">{{ $title }}</span>
|
|
<span class="mt-0.5 block text-xs leading-relaxed text-slate-500">{{ $description }}</span>
|
|
</span>
|
|
<svg class="mt-1 h-5 w-5 shrink-0 text-slate-400 transition"
|
|
:class="openSection === '{{ $id }}' ? 'rotate-180' : ''"
|
|
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div x-show="openSection === '{{ $id }}'" x-cloak class="border-t border-slate-100">
|
|
<div class="px-5 py-5">
|
|
{{ $slot }}
|
|
</div>
|
|
</div>
|
|
</div>
|