89 lines
2.9 KiB
Swift
89 lines
2.9 KiB
Swift
//
|
|
// ContentCreateSelectThemeView.swift
|
|
// SodaLive
|
|
//
|
|
// Created by klaus on 2023/08/11.
|
|
//
|
|
|
|
import SwiftUI
|
|
import Kingfisher
|
|
|
|
struct ContentCreateSelectThemeView: View {
|
|
|
|
let columns = [
|
|
GridItem(.flexible()),
|
|
GridItem(.flexible()),
|
|
GridItem(.flexible()),
|
|
GridItem(.flexible())
|
|
]
|
|
|
|
@StateObject var viewModel = ContentCreateSelectThemeViewModel()
|
|
|
|
@Binding var isShowing: Bool
|
|
@Binding var selectedTheme: GetAudioContentThemeResponse?
|
|
|
|
var body: some View {
|
|
ZStack {
|
|
Color(hex: "222222").ignoresSafeArea()
|
|
|
|
VStack(spacing: 0) {
|
|
HStack(alignment: .top, spacing: 0) {
|
|
Text("테마 선택")
|
|
.font(.custom(Font.bold.rawValue, size: 18.3))
|
|
.foregroundColor(.white)
|
|
|
|
Spacer()
|
|
|
|
Image("ic_close_white")
|
|
.resizable()
|
|
.frame(width: 20, height: 20)
|
|
.onTapGesture { isShowing = false }
|
|
}
|
|
.padding(.horizontal, 26.7)
|
|
.padding(.top, 26.7)
|
|
|
|
ScrollView(.vertical, showsIndicators: false) {
|
|
LazyVGrid(columns: columns, spacing: 26.7) {
|
|
ForEach(viewModel.themes, id: \.self) { theme in
|
|
VStack(spacing: 16.7) {
|
|
KFImage(URL(string: theme.image))
|
|
.resizable()
|
|
.scaledToFill()
|
|
.frame(width: 60, height: 60, alignment: .top)
|
|
.clipShape(Circle())
|
|
|
|
Text(theme.theme)
|
|
.font(.custom(Font.medium.rawValue, size: 14.7))
|
|
.foregroundColor(Color(hex: "bbbbbb"))
|
|
}
|
|
.onTapGesture {
|
|
selectedTheme = theme
|
|
isShowing = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.padding(.horizontal, 20)
|
|
.padding(.top, 26.7)
|
|
}
|
|
|
|
if viewModel.isLoading {
|
|
LoadingView()
|
|
}
|
|
}
|
|
.cornerRadius(16.7, corners: [.topLeft, .topRight])
|
|
.onAppear {
|
|
viewModel.getThemes()
|
|
}
|
|
}
|
|
}
|
|
|
|
struct ContentCreateSelectThemeView_Previews: PreviewProvider {
|
|
static var previews: some View {
|
|
ContentCreateSelectThemeView(
|
|
isShowing: .constant(true),
|
|
selectedTheme: .constant(GetAudioContentThemeResponse(id: 1, theme: "", image: ""))
|
|
)
|
|
}
|
|
}
|