Rounded List

gistfile1.txt

import SwiftUI

struct CloseButton: View {
    var body: some View {
        ZStack {
            Image(systemName: "xmark.circle.fill")
                .resizable()
        }
    }
}

class LocationDetails: ObservableObject, Codable {
    @Published var _id: UUID =  UUID()
    @Published var title: String = ""
    @Published var address: String = ""
    
    init(title: String, address: String) {
        self.title = title
        self.address = address
    }
    
    enum CodingKeys: CodingKey {
        case _id, title, address
    }
    
    public func encode(to encoder: Encoder) throws {
        var container = encoder.container(keyedBy: CodingKeys.self)
        
        try container.encode(_id, forKey: ._id)
        try container.encode(title, forKey: .title)
        try container.encode(address, forKey: .address)
    }
    
    public required init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)
        self._id = try container.decode(UUID.self, forKey: ._id)
        self.title = try container.decode(String.self, forKey: .title)
        self.address = try container.decode(String.self, forKey: .address)
    }
}

struct CellViewTitle: View {
    @StateObject var locationDetails: LocationDetails
    let cornerRadius: CGFloat = 15.0
    let height: CGFloat = 80.0
    let iconSize: CGFloat = 30.0
    let textAdjust: CGFloat = 60.0
    let padding: CGFloat = 10.0
    var body: some View {
        GeometryReader { r in
            ZStack {
                // Add background card
                Rectangle().fill(.white)
                    .cornerRadius(cornerRadius)
                Rectangle().stroke(.black).cornerRadius(cornerRadius)
                // Add widget content
                ZStack {
                    HStack {
                        VStack {
                            Text(locationDetails.title)
                                .font(.title)
                                .frame(width: r.size.width - textAdjust, alignment: .leading)
                                .padding(.leading)
                            Text(locationDetails.address)
                                .frame(width: r.size.width - textAdjust, alignment: .leading)
                                .padding(.leading)
                        }
                        .frame(width: r.size.width - textAdjust)
                        .padding(.top,padding)
                        .padding(.bottom,padding)

                        CloseButton().frame(width: iconSize, height: iconSize)
                    }
                }
            }
        }
    }
}


struct CellViewCirles: View {
    let circlePadding: CGFloat = 20.0
    let cornerRadius: CGFloat = 15.0
    var body: some View {
        ZStack {
            Rectangle().fill(.white)
                .cornerRadius(cornerRadius)
            Rectangle().stroke(.black).cornerRadius(cornerRadius)
            VStack {
                Text("How was it?")
                    .font(.subheadline)
                    .bold()
                    .padding(.top)
                HStack {
                    Circle().fill(.green)
                        .padding(circlePadding)
                    Circle().fill(.yellow)
                        .padding(circlePadding)
                    Circle().fill(.pink)
                        .padding(circlePadding)
                }
            }
        }
    }
}

#Preview {
    @StateObject var location: LocationDetails = LocationDetails(title: "Charles Pub", address: "1234 Somewhere")
  return  HStack(alignment: .top){
      
      // Read the Device width
      GeometryReader { r in
   
        VStack(alignment: .leading)
        {
            CellViewTitle(locationDetails: location)
                 .frame( height: 60)
                 .padding(10)
                
            CellViewCirles()
                .frame(width: r.size.width - 20
                       , height: 200)
                .padding(10)
        }
      }
      .background(.gray)
    }
    
}