TrafficLights.swift

import SwiftUI

struct Light: View {
    var body: some View {
        Circle()
            .overlay(rings)
            .overlay(
                Circle()
                    .fill(gradient)
                    .alignmentGuide(VerticalAlignment.center, computeValue: { $0.height/10 })
                    .opacity(0.3)
            )
            .padding(5)
            .background {
                Circle()
                    .fill(Color.black)
                    .overlay(Circle().fill(bezelGradient))
            }
    }
    
    var bezelGradient: LinearGradient {
        LinearGradient(
            stops: [
                .init(
                    color: .black,
                    location: -0
                ),
                .init(
                    color: .init(CGColor(
                        red: 0.4082111120223999,
                        green: 0.4483206868171692,
                        blue: 0.48617857694625854,
                        alpha: 1.0000
                    )),
                    location: 0.5
                ),
                .init(
                    color: .clear,
                    location: 0.51
                )
            ],
            startPoint: .top,
            endPoint: .bottom
        )
    }
    
    var rings: some View {
        
        GeometryReader { proxy in
            let steps = 10
            let padding = proxy.size.width/(2 * .init(steps))
            ZStack {
                ForEach(0..<10) { x in
                    Circle()
                        .strokeBorder(lineWidth: 2)
                        .foregroundColor(.black.opacity(0.04))
                        .blendMode(.darken)
                        .padding(padding * .init(x))
                }
            }
        }
    }
    
    var gradient: EllipticalGradient {
        EllipticalGradient(
            colors: [.white, .white.opacity(0)],
            center: .top
        )
    }
}

struct Item: Identifiable {
    var id = UUID()
    var color: Color
    var symbol: String
}

let items: [Item] = [
    .init(color: .red, symbol: "xmark"),
    .init(color: .yellow, symbol: "minus"),
    .init(color: .green, symbol: "arrow.up.left.and.arrow.down.right"),
]

struct ContentView: View {
    @State var hover = false
    var body: some View {
        HStack(spacing: 30) {
            ForEach(items) { item in
                Light()
                    .foregroundColor(item.color)
                    .overlay {
                        if hover {
                            Image(systemName: item.symbol)
                                .font(.largeTitle.bold())
                                .foregroundColor(Color.black.opacity(0.5))
                        }
                        
                    }
                    .frame(width: 100, height: 100)
                    .animation(.default.speed(2), value: hover)
            }
        }
        .contentShape(Rectangle())
        .onHover(perform: {
            hover = $0
        })
        .padding(30)
        .background {
            let rect = RoundedRectangle(cornerRadius: 10, style: .continuous)
            ZStack {
                rect
                    .fill(Color.init(white: 0.15))
                rect
                    .strokeBorder(Color.black, lineWidth: 5)
            }
        }
        .padding(50)
        .padding([.trailing, .bottom], 200)
        .background {
            ZStack {
                RoundedRectangle(cornerRadius: 10, style: .continuous)
                    .fill(Color.white)
                RoundedRectangle(cornerRadius: 10, style: .continuous)
                    .strokeBorder(Color.black.opacity(0.3), lineWidth: 1)
            }
        }
        .padding(50)
        .background {
            Color.init(white: 0.8)
        }
    }
}

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