Vy experiment component

QuoteWithImage.php

<?php

namespace App\View\Components\Blocks;

use App\View\Components\Elements\AttachmentImg;
use App\View\Components\Elements\ContrastBorderOverlay;
use App\View\Components\Layout\AutoP;
use StefanFisk\Vy\Elements\Html\a;
use StefanFisk\Vy\Elements\Html\div;
use StefanFisk\Vy\Elements\Html\figcaption;
use StefanFisk\Vy\Elements\Html\figure;

use function App\Support\View\has_content;
use function StefanFisk\Vy\el;

class QuoteWithImage
{
    public static function el(
        mixed $class = null,
        mixed $content = null,
        mixed $image = null,
        mixed $name = null,
        mixed $role = null,
        mixed $company = null,
        mixed $link = null,
        mixed $linkText = null,
        mixed ...$props,
    ): mixed {
        return el(self::class, [
            'class'    => $class,
            'content'  => $content,
            'image'    => $image,
            'name'     => $name,
            'role'     => $role,
            'company'  => $company,
            'link'     => $link,
            'linkText' => $linkText,
            ...$props,
        ]);
    }

    public function render(
        mixed $class = null,
        mixed $content = null,
        mixed $image = null,
        mixed $name = null,
        mixed $role = null,
        mixed $company = null,
        mixed $link = null,
        mixed $linkText = null,
        mixed ...$props,
    ): mixed {
        $hideContrastBorder = $image ? (bool) get_field('hide_contrast_border', $image) : false;

        return figure::el(
            ...$props,
            class: [
                $class,
                'vs-md',
                '@container',
                'grid',
                'gap-vs-sm',
            ]
        )(
            div::el([
                'type-prose-lg',
                'text-lg',
            ])(
                AutoP::el($content)
            ),
            figcaption::el([
                'm-0',
                'flex',
                'gap-hs',
                'justify-between',
                'items-center',
                '@xs:flex-row-reverse',
                '@xs:justify-end',
            ])(
                div::el([
                    'grid',
                    'gap-0.75C',
                    'leading-none',
                ])(
                    ! has_content($name) ?: div::el([
                        'trim-C',
                        'type-subheading',
                    ])(
                        $name,
                    ),
                    ! has_content($role) ?: div::el([
                        'trim-C',
                    ])(
                        $role,
                    ),
                    ! has_content($company) ?: div::el([
                        'trim-C',
                    ])(
                        $company,
                    ),
                    ! has_content($link, $linkText) ?: div::el([
                        'trim-C',
                        'mt-vs-xs',
                    ])(
                        a::el(href: $link)(
                            $linkText
                        )
                    ),
                ),
                ! $image ?: div::el([
                    'relative',
                    'self-start',
                    'w-1-cols',
                    'print:w-[25vw]',
                ])(
                    AttachmentImg::el(
                        image: $image,
                        class: [
                            'aspect-square',
                            'w-full',
                            'rounded-full',
                            'grayscale',
                        ],
                        aspect: [1, 1],
                    ),
                    $hideContrastBorder ?: ContrastBorderOverlay::el([
                        'rounded-full',
                    ]),
                ),
            ),
        );
    }
}
M