Blazor - GreyOutZone - adapted from FlightFinder but with embedded styles so works stand-alone

GreyOutZone.razor

@* creates a container component that greys-out the content when the `IsGreyedOut` parameter is set to true *@
<div style="@(IsGreyedOut ? greyout : null)">
    <div style="@cover"></div>
    @ChildContent
</div>

@code {
  const string greyout = "position: absolute; width: 100%; min-height: 100%;";
  const string cover = "background: rgba(150, 150, 150, 0.5); position: absolute; width: 100%;  height: 100%; z-index: 1;";
  
  [Parameter] public RenderFragment ChildContent { get; set; }

  [Parameter] public bool IsGreyedOut { get; set; }
}

@* adapted from https://github.com/aspnet/samples/blob/master/samples/aspnetcore/blazor/FlightFinder/FlightFinder.Client/Components/GreyOutZone.razor *@
@* uses inline-styles so can be dropped in with no need to amend your CSS
   feel free to using CSS class names (as per original example)
*@