Preview.razor

@namespace LumexUI.Docs.Client.Components

<div class="@PreviewWrapperClass">
    <div class="@BackgroundClass"></div>
    <div class="@PreviewClass">
        @ChildContent
    </div>
</div>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public Slots? Classes { get; set; }

    [Inject] private TwMerge TwMerge { get; set; } = default!;

    private string? BackgroundClass =>
        TwMerge.Merge( _slots.Background, Classes?.Background );

    private string? PreviewWrapperClass =>
        TwMerge.Merge( _slots.PreviewWrapper, Classes?.PreviewWrapper );

    private string? PreviewClass =>
        TwMerge.Merge( _slots.Preview, Classes?.Preview );

    private readonly Slots _slots = new()
    {
        Preview = "relative p-4 flex flex-wrap items-center gap-4 overflow-visible scrollbar-hide",
        PreviewWrapper = "relative p-4 rounded-large ring ring-default-900/10 not-prose",
        Background = "absolute inset-0 [mask-image:radial-gradient(#fff_0%,transparent_100%)]",
    };

    public class Slots
    {
        public string? Preview { get; set; }
        public string? PreviewWrapper { get; set; }
        public string? Background { get; set; }
    }
}