RackPeek/RackPeek.Web/Components/Services/AddServiceComponent.razor

@using RackPeek.Domain.Resources.Services
@using RackPeek.Domain.Resources.Services.UseCases
@inject AddServiceUseCase AddService

<div class="border border-zinc-800 rounded p-4 bg-zinc-900">
    <div class="text-zinc-100 mb-3">
        Add service
    </div>

    <div class="flex gap-2">
        <input
            class="flex-1 bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-sm text-zinc-200 placeholder-zinc-600 focus:outline-none focus:border-zinc-600"
            placeholder="service name"
            @bind="_name"
            @bind:event="oninput" />

        <button
            class="px-4 py-2 text-sm rounded bg-zinc-800 hover:bg-zinc-700 text-zinc-100 disabled:opacity-50"
            disabled="@_isSubmitting"
            @onclick="CreateAsync">
            add
        </button>
    </div>

    @if (_error is not null)
    {
        <div class="mt-2 text-sm text-red-400">
            @_error
        </div>
    }
</div>

@code {
    [Parameter] public EventCallback<string> OnCreated { get; set; }

    private string _name = string.Empty;
    private string? _error;
    private bool _isSubmitting;

    private async Task CreateAsync()
    {
        _error = null;

        if (string.IsNullOrWhiteSpace(_name))
        {
            _error = "name is required";
            return;
        }

        try
        {
            _isSubmitting = true;
            var name = _name.Trim();
            await AddService.ExecuteAsync(name);
            _name = string.Empty;

            await OnCreated.InvokeAsync(name);
        }
        catch (Exception ex)
        {
            _error = ex.Message;
        }
        finally
        {
            _isSubmitting = false;
        }
    }
}