Netflix kloni (1-qism): Mikro-animatsiyalar va dizayn

import SwiftUI

struct NetflixFilterCell: View {
    var title: String = "Categories"
    var isDropdown: Bool = true
    var isSelected: Bool = false

    var body: some View {
        HStack(spacing: 4) {
            Text(title)

            if isDropdown {
                Image(systemName: "chevron.down")
            }
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 8)
        .background(
            // Tanlangan holatda orqa fon qop-qora, tanlanmagan holatda esa faqat hoshiya chiziladi
            ZStack {
                Capsule(style: .circular)
                    .fill(Color.netflixDarkGray)
                    .opacity(isSelected ? 1 : 0) // Sekin paydo bo'lish animatsiyasi

                Capsule(style: .circular)
                    .stroke(lineWidth: 1)
            }
        )
        .foregroundColor(.netflixLightGray)
    }
}

import SwiftUI

struct NetflixFilterBarView: View {
    var filters: [FilterModel] = FilterModel.mockArray
    var selectedFilter: FilterModel? = nil
    var onFilterPressed: ((FilterModel) -> Void)? = nil
    var onXMarkPressed: (() -> Void)? = nil

    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                if selectedFilter != nil {
                    Image(systemName: "xmark")
                        .padding(8)
                        .background(
                            Circle()
                                .stroke(lineWidth: 1)
                        )
                        .foregroundColor(.netflixLightGray)
                        .onTapGesture {
                            onXMarkPressed?()
                        }
                        // X belgisi chap tomondan silliq sirpanib kirib keladi
                        .transition(.move(edge: .leading))
                }

                ForEach(filters, id: \.self) { filter in
                    if selectedFilter == nil || selectedFilter == filter {
                        NetflixFilterCell(
                            title: filter.title,
                            isDropdown: filter.isDropdown,
                            isSelected: selectedFilter == filter
                        )
                        .onTapGesture {
                            onFilterPressed?(filter)
                        }
                    }
                }
            }
            .padding(.horizontal, 16)
        }
        // Bouncy (sakrovchi) animatsiyani ulaymiz
        .animation(.bouncy, value: selectedFilter)
    }
}