Aspect Ratio code

@props([
    'ratio' => '16/9',
])

@php
    /*
    | Fixed-aspect box for media, embeds or placeholder art. Content is cropped
    | to the ratio (overflow-hidden), so pair it with object-cover media.
    |
    | ratio: 1/1, 3/2, 4/3, 16/9, 21/9, 9/16 — or any "w/h" string.
    |
    | Usage:
    |   <x-ui.aspect-ratio ratio="16/9"><img src="..." class="h-full w-full object-cover"></x-ui.aspect-ratio>
    */
    $ratioClass = [
        '1/1' => 'aspect-square',
        '16/9' => 'aspect-video',
        '4/3' => 'aspect-[4/3]',
        '3/2' => 'aspect-[3/2]',
        '21/9' => 'aspect-[21/9]',
        '9/16' => 'aspect-[9/16]',
    ][$ratio] ?? 'aspect-['.$ratio.']';
@endphp

<div {{ $attributes->merge(['class' => $ratioClass.' w-full overflow-hidden']) }}>
    {{ $slot }}
</div>