RackPeek/RackPeek.Web/Components/Desktops/DesktopCardComponent.razor

@using RackPeek.Domain.Resources.Hardware.Models

<div class="border border-zinc-800 rounded p-4 bg-zinc-900">
    <div class="flex justify-between items-center mb-3">
        <div class="text-zinc-100">
            @Desktop.Name
        </div>

        @if (!string.IsNullOrWhiteSpace(Desktop.Model))
        {
            <span class="text-xs text-zinc-400">
                @Desktop.Model
            </span>
        }
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">

        @if (Desktop.Cpus?.Any() == true)
        {
            <div>
                <div class="text-zinc-400 mb-1">CPU</div>
                @foreach (var cpu in Desktop.Cpus)
                {
                    <div class="text-zinc-300">
                        @cpu.Model — @cpu.Cores cores / @cpu.Threads threads
                    </div>
                }
            </div>
        }

        @if (Desktop.Ram is not null)
        {
            <div>
                <div class="text-zinc-400 mb-1">RAM</div>
                <div class="text-zinc-300">
                    @Desktop.Ram.Size GB @Desktop.Ram.Mts MT/s
                </div>
            </div>
        }

        @if (Desktop.Drives?.Any() == true)
        {
            <div>
                <div class="text-zinc-400 mb-1">Drives</div>
                @foreach (var drive in Desktop.Drives)
                {
                    <div class="text-zinc-300">
                        @drive.Type — @drive.Size GB
                    </div>
                }
            </div>
        }

        @if (Desktop.Nics?.Any() == true)
        {
            <div>
                <div class="text-zinc-400 mb-1">NICs</div>
                @foreach (var nic in Desktop.Nics)
                {
                    <div class="text-zinc-300">
                        @nic.Type — @nic.Speed Gbps (@nic.Ports ports)
                    </div>
                }
            </div>
        }

        @if (Desktop.Gpus?.Any() == true)
        {
            <div>
                <div class="text-zinc-400 mb-1">GPU</div>
                @foreach (var gpu in Desktop.Gpus)
                {
                    <div class="text-zinc-300">
                        @gpu.Model — @gpu.Vram GB VRAM
                    </div>
                }
            </div>
        }

    </div>
</div>

@code {
    [Parameter][EditorRequired]
    public Desktop Desktop { get; set; } = default!;
}