working double carousel decent

nirvana-ios/Views/HomeView/ChatsCarouselView/ChatsCarouselView.swift

@@ -30,6 +30,7 @@ struct ChatsCarouselView: View {
     }
      
     var mainCarouselView: some View {
+        VStack {
             TabView(selection: $selectedUserId) {
                 ForEach(viewModel.carouselUsers) { carouselUser in
                     GeometryReader {proxy in
@@ -52,28 +53,47 @@ struct ChatsCarouselView: View {
                 }
             }
             .tabViewStyle(.page(indexDisplayMode: .never))
-        .padding(.vertical, 60)
+            .padding(.top, 50)
-        .overlay(
+            .onAppear {
+                self.selectedUserId = self.viewModel.carouselUsers.first?.id ?? ""
+            }
+            
             ScrollViewReader {proxy in
                 ScrollView(.horizontal, showsIndicators: false) {
-                    HStack(spacing: 15) {
+                    HStack {
                         ForEach(viewModel.carouselUsers) {user in
+                            let isSelected = user.id == self.selectedUserId
+//                            let isLeftOrRight = !isSelected &&
+                            
                             Image(user.profilePictureUrl)
                                 .resizable()
                                 .aspectRatio(contentMode: .fill)
-                                .frame(width: 70, height: 60)
                                 .cornerRadius(12)
+                                .clipShape(Circle())
+                                .shadow(radius: 10)
+                                .scaleEffect(isSelected ? 1.2 : 1)
+                                .padding(.all, 16.0)
+                                .id(user.id)
+                                .onTapGesture {
+                                    withAnimation {
+                                        self.selectedUserId = user.id
+                                    }
+                                }
+                        }
+                    }
+                    .frame(maxHeight: 100)
+                    .padding(.leading, UIScreen.main.bounds.width * 0.4)
+                    .padding(.vertical, 20)
+                }
+                .onChange(of: self.selectedUserId) { _ in
+                    withAnimation {
+                        proxy.scrollTo(self.selectedUserId, anchor: .bottom)
                     }
                 }
-                    .padding()
             }
-                .frame(height: 80)
-                .background(Color.blue)
-            },
-            
-            alignment: .bottom
-        )
             
+            Spacer()
+        }
     }
     
     //the bottom navigation of the small profile pictures