Carousel.RCL/Components/Carousel.razor

@using System.Timers
@using Frontend.Libs.Generic.Carousel.Components


<div class="relative w-screen h-screen overflow-hidden bg-black">
    @if (Items != null && Items.Any())
    {
        var currentItem = Items[CurrentIndex];
        var isEven = CurrentIndex % 2 == 0;

        <!-- Background Image with Zoom Animation -->
        <div key="@CurrentIndex"
            class="absolute inset-0 w-full h-full bg-cover bg-center transition-transform duration-[3000ms] ease-in-out transform @(isEven ? "scale-110" : "scale-100")"
            style="background-image: url('@currentItem.ImageUrl');">
        </div>

        <!-- Overlay Content -->
        <div class="absolute inset-0 flex items-center justify-center z-10 bg-black/30">
            <div class="text-center text-white">
                <!-- Typing Text Animation -->
                <h1
                    class="text-5xl font-mono mb-4 overflow-hidden whitespace-nowrap border-r-4 border-white animate-typing">
                    @_displayedText
                </h1>

                <!-- Expanding Underline -->
                <div
                    class="h-1 bg-white mx-auto transition-all duration-[2000ms] ease-out @(_underlineExpanded ? "w-full" : "w-0")">
                </div>
            </div>
        </div>
    }
</div>

@code {
    [Parameter] public List<CarouselItem> Items { get; set; } = new();
    [Parameter] public int DurationSeconds { get; set; } = 3;

    private int CurrentIndex { get; set; } = 0;
    private string _displayedText = "";
    private bool _underlineExpanded = false;
    private Timer? _timer;

    protected override void OnInitialized()
    {
        if (Items.Any())
        {
            StartSlideTimer();
            StartAnimationSequence(Items[CurrentIndex].Text);
        }
    }

    private void StartSlideTimer()
    {
        _timer = new Timer(DurationSeconds * 1000);
        _timer.Elapsed += OnSlideTimerElapsed;
        _timer.AutoReset = true;
        _timer.Start();
    }

    private void OnSlideTimerElapsed(object? sender, ElapsedEventArgs e)
    {
        InvokeAsync(() =>
        {
            CurrentIndex = (CurrentIndex + 1) % Items.Count;
            StartAnimationSequence(Items[CurrentIndex].Text);
            StateHasChanged();
        });
    }

    private async void StartAnimationSequence(string text)
    {
        // Reset state
        _displayedText = "";
        _underlineExpanded = false;
        StateHasChanged();

        // Typing Effect
        foreach (var c in text)
        {
            _displayedText += c;
            StateHasChanged();
            await Task.Delay(50); // Typing speed
        }

        // Expand Underline
        _underlineExpanded = true;
        StateHasChanged();
    }

    public void Dispose()
    {
        _timer?.Dispose();
    }
}