Skip to content

Refactor demo into focused examples #34

@ghost

Description

The demo ContentView covers a lot of ground. Splitting each layout into its own example view would make it easier to follow and extend.

Something like:

struct ContentView: View {
    var body: some View {
        TabView {
            Tab("Piano", systemImage: "pianokeys") {
                PianoExample()
            }
            Tab("Isomorphic", systemImage: "square.grid.3x3") {
                IsomorphicExample()
            }
            Tab("Guitar", systemImage: "guitars") {
                GuitarExample()
            }
            Tab("Latching", systemImage: "hand.tap") {
                LatchingExample()
            }
        }
    }
}

struct PianoExample: View {
    @State var lowNote = 24
    @State var highNote = 48

    var body: some View {
        VStack {
            HStack {
                Stepper("Low: \(Pitch(intValue: lowNote).note(in: .C).description)",
                        value: $lowNote, in: 0...highNote - 12)
                Stepper("High: \(Pitch(intValue: highNote).note(in: .C).description)",
                        value: $highNote, in: lowNote + 12...126)
            }
            .padding(.horizontal)

            Keyboard(layout: .piano(pitchRange: Pitch(intValue: lowNote)...Pitch(intValue: highNote)))
        }
    }
}

Each example owns its own state and controls. The vertical sidebars could live in a separate "Vertical Layouts" tab.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions