pub fn InstallCLI(allocator: zx.Allocator) zx.Component {
    return (
        <div class="install-box" @allocator={allocator}>
            <div class="install-box-header">
                <input type="radio" id="tab-unix" name="install-platform" class="install-tab-radio" checked="true" aria-label="Linux or macOS installation" />
                <input type="radio" id="tab-windows" name="install-platform" class="install-tab-radio" aria-label="Windows installation" />
                <div class="install-tab-labels">
                    <label for="tab-unix" class="install-tab-label">Linux / macOS</label>
                    <label for="tab-windows" class="install-tab-label">Windows</label>
                </div>
            </div>
            <div class="install-box-content">
                <div class="install-tab-content" id="content-unix">
                    <div class="install-code">
                        <span class="install-prompt">$ </span>
                        <span class="function">curl</span>
                        <span class="operator"> -fsSL </span>
                        <span class="string">https://ziex.dev/install</span>
                        <span class="operator"> | </span>
                        <span class="function">bash</span>
                    </div>
                </div>
                <div class="install-tab-content" id="content-windows">
                    <div class="install-code">
                        <span class="install-prompt">{"> "}</span>
                        <span class="function">powershell</span>
                        <span class="operator"> -c </span>
                        <span class="string">"irm ziex.dev/install.ps1 | iex"</span>
                    </div>
                </div>
            </div>
        </div>
    );
}

pub fn InstallZig(allocator: zx.Allocator) zx.Component {
    return (
        <div class="install-box" @allocator={allocator}>
            <div class="install-box-header">
                <input type="radio" id="tab-zig-mac" name="install-zig" class="install-tab-radio" checked="true" aria-label="Zig installation on macOS" />
                <input type="radio" id="tab-zig-win" name="install-zig" class="install-tab-radio" aria-label="Zig installation on Windows" />
                <input type="radio" id="tab-zig-other" name="install-zig" class="install-tab-radio" aria-label="Zig installation on other platforms" />
                <div class="install-tab-labels">
                    <label for="tab-zig-mac" class="install-tab-label">macOS</label>
                    <label for="tab-zig-win" class="install-tab-label">Windows</label>
                    <label for="tab-zig-other" class="install-tab-label">Other</label>
                </div>
            </div>
            <div class="install-box-content">
                <div class="install-tab-content" id="content-zig-mac">
                    <div class="install-code">
                        <span class="install-prompt">$ </span>
                        <span class="function">brew</span>
                        <span class="operator"> install </span>
                        <span class="variable">zig</span>
                    </div>
                </div>
                <div class="install-tab-content" id="content-zig-win">
                    <div class="install-code">
                        <span class="install-prompt">{"> "}</span>
                        <span class="function">winget</span>
                        <span class="operator"> install -e --id </span>
                        <span class="variable">zig.zig</span>
                    </div>
                </div>
                <div class="install-tab-content" id="content-zig-other">
                    <div class="install-other">
                        See the <a href="https://ziglang.org/learn/getting-started/" target="_blank" rel="noopener noreferrer">official Zig installation guide</a>
                    </div>
                </div>
            </div>
        </div>
    );
}

const zx = @import("zx");
