Product Views Example

ProductViews.swift

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
            HStack(spacing: 10) {
                ProductView(
                    title: "Monthly",
                    label: "POPULAR",
                    price: "€23",
                    tintColor: Color(uiColor: UIColor(red: 0.93, green: 0.79, blue: 0.47, alpha: 1.00)),
                    isSelected: false)
                ProductView(
                    title: "Yearly",
                    label: "SAVE 17%",
                    price: "€228",
                    tintColor: Color(uiColor: UIColor(red: 0.34, green: 0.40, blue: 0.96, alpha: 1.00)),
                    isSelected: true
                )
            }
        }
        .padding()
    }
}

struct ProductView: View {
    let title: String
    let label: String
    let price: String
    let tintColor: Color
    let isSelected: Bool

    var body: some View {
        VStack(spacing: 0) {
            HStack {
                Spacer()
                Text(label)
                    .foregroundColor(isSelected ? .white : .black)
                    .padding(.vertical, 5)
                    .font(.caption2)
                    .bold()
                Spacer()
            }.background(tintColor)

            VStack {
                Text(title)
                    .font(.subheadline)
                Text(price)
                    .font(.title)
            }.foregroundColor(.white)
                .padding(.vertical, 10)
        }.background(Color(uiColor: UIColor(red: 0.14, green: 0.14, blue: 0.14, alpha: 1.00)))
            .cornerRadius(20)
            .overlay(
                RoundedRectangle(cornerRadius: 20)
                    .stroke(tintColor, lineWidth: isSelected ? 4 : 0)
            )
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}