NavX

// swift-tools-version:5.2
import PackageDescription

let package = Package(
    name: "YOUR_PROJECT_NAME",
    dependencies: [
        .package(url: "https://github.com/YOUR_GITHUB_USERNAME/YourPackageName.git", from: "1.0.0")
    ],
    targets: [
        .target(name: "YOUR_TARGET_NAME", dependencies: ["YourPackageName"])
    ]
)

NavX(selecedIndex: $selectedIndex) {...}
    .barAlignment(.center)
    .barX { bar in ... }
    .respectedBarSafeAreas(.all)
    .ignoredPageSafeAreas(.all)
    .pageScrollIndicator(.always)

NavX { ...
    PageX { ... }
    .iconX("house")
    .titleX("Home")
    .foregroundColorX(.black)
    .tabX {
        Circle()
            .fill(.gray)
            .frame(width: 40, height: 40)
    
}

/// A protocol that represents an individual page item to be used within a `NavX` navigation system.
///
/// By conforming to `PageXItem`, a view becomes suitable for integration within the `NavX` tab-based navigation interface.
/// Each `PageXItem` can provide an icon, a title, a foreground color, and a custom tab view.
public protocol PageXItem: View {
    
    /// An optional system name of the icon to be displayed on the tab bar.
    var iconX: String? { get }
    
    /// An optional title to be displayed on the tab bar.
    /// This title typically represents the content or purpose of the associated view.
    var titleX: String? { get }
    
    /// An optional foreground color for the tab item.
    /// This color will be applied to the icon and title of the tab item.
    var foregroundColorX: Color? { get }
    
    /// An optional closure that returns a custom view for the tab.
    /// This allows for more advanced customization of the tab beyond just an icon and title.
    var tabX: (() -> any View)? { get }
}

let navView = NavX(selectedIndex: .constant(0)) {
    PageX {
        Text("First Page")
    }
    .iconX("house")
    .titleX("Home")

    PageX {
        Text("Second Page")
    }
    .iconX("person")
    .titleX("Profile")
}

NavX(selectedIndex: $selectedIndex) {
    PageX {
        Color.red
            .frame(height: UIScreen.main.bounds.height)
    }
    .foregroundColorX(.black)
    .tabX {
        Circle()
            .fill(.gray)
            .frame(width: 40, height: 40)
    }
    
    PageX {
        Color.blue
            .frame(height: UIScreen.main.bounds.height)
    }
    .foregroundColorX(.black)
    .titleX("B")
    .iconX("person.circle")
    
    PageX {
        Color.green
            .frame(height: UIScreen.main.bounds.height)
    }
    .foregroundColorX(.yellow)
    .tabX {
        Rectangle()
            .fill(.red)
            .frame(width: 50, height: 50)
    }
}
.ignoredPageSafeAreas(.top)
.respectedBarSafeAreas(.bottom)
.barX { bar in
    bar.padding()
        .background {
            Color.white
        }
        .cornerRadius(5)
        .shadow(radius: 5)
}