Center Action Tab

// Center Action Tab · syxUI · https://syxui.dev/components/nav2-fab-tab
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

let navBlue = Color(red: 0.0, green: 0.47, blue: 1.0)

// Bottom tab with prominent center action
struct FabTabBar: View {
    @State private var sel = 0
    let left = [("house.fill", "Home"), ("magnifyingglass", "Search")]
    let right = [("bell.fill", "Alerts"), ("person.fill", "You")]
    var body: some View {
        HStack(spacing: 0) {
            ForEach(Array(left.enumerated()), id: \.offset) { i, t in
                VStack(spacing: 4) { Image(systemName: t.0).font(.system(size: 19)); Text(t.1).font(.system(size: 10)) }.foregroundStyle(sel == i ? navBlue : .secondary).frame(maxWidth: .infinity).onTapGesture { sel = i }
            }
            HStack(spacing: 6) { Image(systemName: "plus"); Text("Create").font(.system(size: 14, weight: .semibold)) }.foregroundStyle(.white).padding(.horizontal, 16).padding(.vertical, 11).background(navBlue, in: Capsule()).padding(.horizontal, 8)
            ForEach(Array(right.enumerated()), id: \.offset) { i, t in
                VStack(spacing: 4) { Image(systemName: t.0).font(.system(size: 19)); Text(t.1).font(.system(size: 10)) }.foregroundStyle(.secondary).frame(maxWidth: .infinity).onTapGesture { sel = i + 2 }
            }
        }.padding(.top, 8).padding(.bottom, 6).overlay(alignment: .top) { Divider() }.frame(width: 370)
    }
}