Store Header

// Store Header · syxUI · https://syxui.dev/components/hdr-store
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

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

// Store header - logo + search + cart
struct HeaderStore: View {
    var body: some View {
        HStack(spacing: 12) {
            Image(systemName: "bag.fill").font(.system(size: 20)).foregroundStyle(hdrBlue)
            HStack(spacing: 8) {
                Image(systemName: "magnifyingglass").font(.system(size: 15)).foregroundStyle(.secondary)
                Text("Search store").font(.system(size: 15)).foregroundStyle(.secondary)
                Spacer()
            }.padding(.horizontal, 12).padding(.vertical, 9).background(Color.primary.opacity(0.06), in: Capsule())
            Image(systemName: "cart").font(.system(size: 19)).foregroundStyle(.primary).overlay(alignment: .topTrailing) {
                Text("3").font(.system(size: 10, weight: .bold)).foregroundStyle(.white).frame(width: 16, height: 16).background(.red, in: Circle()).offset(x: 6, y: -6)
            }
        }.frame(width: 350)
    }
}