StarRatingView(starCount: 5, totalPercentage: totalPercentage, style: .init())
    .frame(width: 300, height: 60)

StarView(percentage: 50)
    .frame(width: 60, height: 50)

let fillColor: Color
let borderWidth: CGFloat
let borderColor: Color
let starExtrusion: CGFloat

@State private var progress: CGFloat = 20

// ..

GeometryReader { geometry in 
    StarRatingView(starCount: 5, totalPercentage: self.progress)
        .frame(height: 60)
        .padding()
        .gesture(
            DragGesture().onChanged({ (value) in
                let width = geometry.size.width - 20 // Padding safety
                let currentX = value.location.x
                var newPercentage = 100 * currentX / width
                newPercentage = max(0, newPercentage) // Lowerbound safety
                newPercentage = min(100, newPercentage) // Upperbound safety
                self.progress = newPercentage
            })
        )
}

import StarView

struct ContentView: View {

    @State private var progress: CGFloat = 20

    var body: some View {
        
        VStack(alignment: .leading) {

            Spacer()
            Text("Individual Star View").font(.title)

            StarView(percentage: progress, style: .init(starExtrusion: 15))
                .frame(width: 70, height: 70)

            Spacer()
            Divider().padding()
            Spacer()

            Text("Rating View").font(.title)

            StarRatingView(starCount: 5, totalPercentage: progress, style: .init(starExtrusion: 15))
                .frame(width: 360, height: 60)

            Slider(value: $progress, in: 0...100) {
                Text("Fill Percantage")
            }.padding(.top, 24)

            Spacer()

        }
        .padding()
        
    }

}