2024-MacC-M14-Medio / SqoopDesignSystem / Sources / SQComponents / CustomComponents / Buttons / SQAccentButton.swift
SQAccentButton.swift
Raw
//
//  File.swift
//  SqoopDesignSystem
//
//  Created by Greem on 11/21/24.
//


import SwiftUI
import SqoopDesignSystem

// MARK: --    
public struct SQAccentButton: View {
    public let text: String
    public let action: ()->Void
    public init(text: String, action: @escaping () -> Void) {
        self.text = text
        self.action = action
    }
    public var body: some View {
        Button {
            action()
        } label: {
            Text(text)
        }.buttonStyle(SQAccentButtonStyle())
    }
    
    private struct SQAccentButtonStyle: ButtonStyle {
        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .font(.headline03(.semiBold))
                .foregroundStyle(
                    configuration.isPressed ? Color.textTertiary : Color.textPrimary
                )
                .frame(height: 56)
                .padding(.horizontal,28)
                .background{
                    GeometryReader { proxy in
                        ZStack{
                            Capsule()
                                .strokeBorder(
                                    RadialGradient(
                                        stops: self.gradientStops(isPress: configuration.isPressed),
                                        center: {
                                            var center: UnitPoint = .topLeading
                                            center.x += 0.25
                                            center.y += 0.25
                                            return center
                                        }(),
                                        startRadius: 0,
                                        endRadius: proxy.size.width ),
                                    lineWidth: 1.5
                                )
                        }
                    }.frame(maxWidth: 200).clipShape(Capsule())
                }
                .background {
                    LinearGradient(
                        stops: bgGradientStops(isPress: configuration.isPressed),
                        startPoint: UnitPoint(x: -0.8, y: 0.5),
                        endPoint: UnitPoint(x: 0.9, y: 0.5)
                    )
                    .frame(maxWidth: 200)
                    .opacity(0.8)
                    .clipShape(Capsule())
                }
                .offset(x: 0,y: configuration.isPressed ? 1 : 0)
        }
        
        func bgGradientStops(isPress: Bool) -> [Gradient.Stop] {
            !isPress ? [
                .init(color: Color(hex: "#27F3FF").opacity(0.7), location: 0),
                .init(color: Color(hex: "174F53"), location: 1),
            ] : [
                .init(color: Color(hex: "#174F53"), location: 0),
                .init(color: Color(hex: "#001D21"), location: 1),
            ]
        }
        
        func gradientStops(isPress: Bool)->[Gradient.Stop] {
            !isPress ? [
                .init(color: Color(hex: "#656565").opacity(0.4), location: 0.0),
                .init(color: Color(hex: "#0ED0DB"), location: 0.5),
                .init(color: Color(hex: "#656565").opacity(0.4), location: 1)
            ] : [
                .init(color: Color(hex: "#000000").opacity(0.3), location: 0.0),
                .init(color: Color(hex: "#009EA9"), location: 0.5),
                .init(color: Color(hex: "#656565").opacity(0.3), location: 1)
            ]
        }
    }
}