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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions