TopBarView

TopBarView.swift

//
//  TopBarView.swift
//  ToDo_UI
//
//  Created by Shubham on 12/11/24.
//

import SwiftUI

struct TopBarView: View {
    
    // MARK: - variables
    @Environment(MainViewModel.self) var mainViewModel
    @State var viewAppeared: Bool = false
    
    @State var profileScale: CGFloat = 0.3
    @State var profileOpacity: Double = 0
    
    let animationDuration: TimeInterval = 0.35
    
    // MARK: - Views
    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Text(mainViewModel.selectedDate.day + "  " + mainViewModel.selectedDate.month)
                    .font(Nocturne.semibold.font(size: 18))
            }
            .padding(8)
            .overlay {
                RoundedRectangle(cornerRadius: 4)
                    .stroke(lineWidth: 0.8)
            }
            .gesture(calendarSwipeGesture())
            .animation(.linear, value: mainViewModel.selectedDate)
            .offset(x: self.viewAppeared ? 0 : -24)
            .opacity(self.viewAppeared ? 1 : 0)
            .animation(.easeInOut(duration: animationDuration), value: viewAppeared)
            
            
            HStack {
                VStack(alignment: .leading, spacing: 7) {
                    Text(mainViewModel.greeting)
                        .font(Nocturne.medium.font(size: 24))
                        .shadow(color: Color.white.opacity(0.5), radius: 1)
                        .opacity(self.viewAppeared ? 0.75 : 0)
                    
                    Text("Developer")
                        .font(Nocturne.bold.font(size: 36))
                        .shadow(color: Color.white.opacity(0.5), radius: 1)
                        .opacity(self.viewAppeared ? 1 : 0)
                }
                .offset(x: self.viewAppeared ? 0 : -24)
                .opacity(self.viewAppeared ? 1 : 0)
                .animation(.easeInOut(duration: animationDuration).delay(0.1), value: viewAppeared)
                
                Spacer()
                
                ImageView(size: 52)
                    .opacity(self.profileOpacity)
                    .scaleEffect(self.profileScale)
            }
            .padding(.top, 8)
            
            .onAppear() {
                viewAppeared.toggle()
                
                withAnimation(.easeOut(duration: animationDuration).delay(0.15)) {
                    self.profileScale = 1
                    self.profileOpacity = 1
                }
            }
        }
    }
    
    
    // MARK: - Functions
    func calendarSwipeGesture() -> some Gesture {
        return DragGesture(minimumDistance: 3.0, coordinateSpace: .local)
            .onEnded { value in
                if value.translation.width < 0 {
                    withAnimation(.linear) {
                        self.mainViewModel.adjustDate(increment: true)
                    }
                } else if value.translation.width > 0 {
                    withAnimation(.linear) {
                        self.mainViewModel.adjustDate()
                    }
                }
            }
    }
}

#Preview {
    TopBarView()
        .environment(MainViewModel())
        .padding(24)
}