title: How to use the same clock view to display different times zones? Swiftui
body: <p>I am realizing a list with different clocks that should give me different times. Unfortunately I lack a bit of knowledge how to implement this.</p>
  <p>My situation:
  The clock in my list is generated via TestView(). In the TestView I display a clock with the current time. Now I want to display different clocks and times in my list. For this I created a file &quot;Country&quot;, which gives me a city name and a time zone.
  How would I have to pass the values of the specific time zone to the TestView so that the time is displayed in the clock?</p>
  <p>Here is my Code how i create a clock with de current file:</p>
  <pre><code> struct Hand: Shape {
      let inset: CGFloat
      let angle: Angle
      
      func path(in rect: CGRect) -&gt; Path {
          let rect = rect.insetBy(dx: inset, dy: inset)
          var p = Path()
          p.move(to: CGPoint(x: rect.midX, y: rect.midY))
          p.addLine(to: position(for: CGFloat(angle.radians), in: rect))
          return p
      }
      
      private func position(for angle: CGFloat, in rect: CGRect) -&gt; CGPoint {
          let angle = angle - (.pi/2)
          let radius = min(rect.width, rect.height)/2
          let xPos = rect.midX + (radius * cos(angle))
          let yPos = rect.midY + (radius * sin(angle))
          return CGPoint(x: xPos, y: yPos)
      }
  }
  
  struct TickHands: View {
      var scale: Double
      @State private var dateTime = Date()
      
      private let timer = Timer.publish(every: 1.0, on: .main, in: .common).autoconnect()
      
      var body: some View {
          ZStack {
              Hand(inset: 65 * scale, angle: dateTime.hourAngle)
                  .stroke(style: StrokeStyle(lineWidth: 3 * scale, lineCap: .round, lineJoin: .round))
              Hand(inset: 40 * scale, angle: dateTime.minuteAngle)
                  .stroke(style: StrokeStyle(lineWidth: 2.5 * scale, lineCap: .round, lineJoin: .round))
              Hand(inset: 20 * scale, angle: dateTime.secondAngle)
                  .stroke(Color.orange, style: StrokeStyle(lineWidth: 1.5 * scale, lineCap: .round, lineJoin: .round))
              Circle().fill(Color.orange).frame(width: 10 * scale)
          }
          .onReceive(timer) { (input) in
              self.dateTime = input
          }
      }
  }
  
  extension Date {
      var hourAngle: Angle {
          return Angle (degrees: (360 / 12) * (self.hour + self.minutes / 60))
      }
      var minuteAngle: Angle {
          return Angle(degrees: (self.minutes * 360 / 60))
      }
      var secondAngle: Angle {
          return Angle (degrees: (self.seconds * 360 / 60))
      }
  }
  
  extension Date {
      var hour: Double {
          return Double(Calendar.current.component(.hour, from: self))
      }
      var minutes: Double {
          return Double(Calendar.current.component(.minute, from: self))
      }
      var seconds: Double {
          return Double(Calendar.current.component(.second, from: self))
      }
  }
  
  
  struct TestView: View {
      var clockSize: CGFloat = 100
      
      var body: some View {
          GeometryReader { geometry in
              ZStack {
                  let scale = geometry.size.height / 200
                  TickHands(scale: scale)
                  ForEach(0..&lt;60*4) { tick in
                      Ticks.tick(at: tick, scale: scale)
                  }
              }
          }.frame(width: clockSize, height: clockSize)
      }
  }
  
  struct Ticks{
      static func tick(at tick: Int, scale: CGFloat) -&gt; some View {
          VStack {
              Rectangle()
                  .fill(Color.primary)
                  .opacity(tick % 20 == 0 ? 1 : 0.4)
                  .frame(width: 2 * scale, height: (tick % 5 == 0 ? 15 : 7) * scale)
              Spacer()
          }
          .rotationEffect(Angle.degrees(Double(tick)/(60) * 360))
      }
  }
  </code></pre>
  <p>Here is the code of the list in which I want to display the diffrent clocks</p>
  <pre><code>   struct ContentView: View {
      
      var body: some View {
          
          NavigationView {
                    List(countryList) { countryItem in
                            HStack() {
                                Text(countryItem.name + &quot;: &quot; + countryItem.time)
                                    .frame(height: 80.0)
                                Spacer()
                                TestView()
                            }.padding(5)
                        }
                    .navigationBarTitle(&quot;App&quot;)
                  }
      }
  }
  </code></pre>
  <p>And here is the code of the countries, where I get the name and the timezone for the clocks</p>
  <pre><code>struct Country: Identifiable {
     let id = UUID()
      let name: String
      let time: String
  }
  
  let countryList: [Country] = [
      Country(
          name: &quot;New York&quot;,
          time: getLocalTimeZone(in: &quot;America/New_York&quot;)),
      Country(
          name: &quot;Paris&quot;,
          time: getLocalTimeZone(in: &quot;Europe/Paris&quot;))
  ]
  
  
  func getLocalTimeZone(in timeZone: String) -&gt; String {
      let f = DateFormatter()
      f.timeZone = TimeZone(identifier: timeZone)
      f.dateFormat = &quot;HH:mm&quot;
      return f.string(from: Date())
  }
  </code></pre>