Glyph picker

CustomGlyphPicker.swift

import SwiftUI

struct CustomGlyphPicker: View {
    @State private var name: String = "Default Name"
    @State private var selectedImage: String = "defaultImage"
    @State private var images: [String] = [
        "face.smiling.inverse",
        "list.bullet",
        "house.fill",
        "star.fill",
        "heart.fill",
        "gear",
        "magnifyingglass",
        "pencil",
        "trash",
        "folder",
        "paperplane",
        "camera",
        "music.note",
        "bell",
        "clock",
        "calendar",
        "map",
        "envelope",
        "phone",
        "book"
    ]
    
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    var body: some View {
        VStack {
            // Large Image
            Image(systemName: selectedImage )
                .resizable()
                .scaledToFit()
                .frame(maxWidth: .infinity, maxHeight: 300)
                .padding()

            // TextField for changing name
            TextField("Enter Name", text: $name)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            // LazyVGrid with icons for selecting and changing the image
            ScrollView {
                LazyVGrid(columns: columns, spacing: 10) {
                    ForEach(images, id: \.self) { image in
                        Image(systemName: image)
                            .padding()
                            .background(.thinMaterial, in: .circle)
                            .onTapGesture {
                                selectedImage = image
                            }
                    }
                }
                .padding()
            }
        }

        .safeAreaInset(edge: .bottom, content: {
            VStack {
                Button("Done") {
                    print("done")
                }
                .controlSize(.extraLarge)
                .buttonStyle(.borderedProminent)
                .padding()
            }
            .frame(maxWidth: .infinity)
            .background(.red)

        })
        .ignoresSafeArea(.keyboard, edges: .all)
        .scrollDismissesKeyboard(.interactively)

    }
}

#Preview {
    CustomGlyphPicker()
}