51c9c60bfe
- Home/Counter/Todos/About with hash navigation - State persists across route changes - Uses existing router infrastructure (no compiler changes) - navigate keyword, matchRoute, _route signal
81 lines
2.7 KiB
Text
81 lines
2.7 KiB
Text
-- DreamStack Multi-Page App
|
||
-- Client-side routing with hash navigation
|
||
|
||
import { Card } from "../registry/components/card"
|
||
import { Badge } from "../registry/components/badge"
|
||
|
||
let count = 0
|
||
let todos = ["Buy groceries", "Walk the dog"]
|
||
let newTodo = ""
|
||
|
||
-- Navigation bar (shared across all routes)
|
||
view nav = row [
|
||
text "🧭 MyApp" { variant: "title" }
|
||
button "🏠 Home" { click: navigate "/", variant: "primary" }
|
||
button "🔢 Counter" { click: navigate "/counter", variant: "secondary" }
|
||
button "📝 Todos" { click: navigate "/todos", variant: "secondary" }
|
||
button "ℹ️ About" { click: navigate "/about", variant: "ghost" }
|
||
]
|
||
|
||
-- Route: Home
|
||
route "/" -> column [
|
||
text "🏠 Welcome Home" { variant: "title" }
|
||
text "Navigate using the buttons above" { variant: "subtitle" }
|
||
row [
|
||
Card { title: "Counter", subtitle: "reactive state" } [
|
||
text "Count: {count}" { variant: "title" }
|
||
Badge { label: "LIVE", variant: "success" }
|
||
]
|
||
Card { title: "Todos", subtitle: "dynamic lists" } [
|
||
Badge { label: "ACTIVE", variant: "info" }
|
||
]
|
||
]
|
||
]
|
||
|
||
-- Route: Counter
|
||
route "/counter" -> column [
|
||
text "🔢 Counter Page" { variant: "title" }
|
||
text "State persists across route changes" { variant: "subtitle" }
|
||
Card { title: "Interactive Counter", subtitle: "reactive signals" } [
|
||
text "Count: {count}" { variant: "title" }
|
||
row [
|
||
button "+1" { click: count += 1, variant: "primary" }
|
||
button "-1" { click: count -= 1, variant: "secondary" }
|
||
button "Reset" { click: count = 0, variant: "ghost" }
|
||
]
|
||
when count > 10 -> Badge { label: "HIGH SCORE!", variant: "warning" }
|
||
]
|
||
]
|
||
|
||
-- Route: Todos
|
||
route "/todos" -> column [
|
||
text "📝 Todo List" { variant: "title" }
|
||
text "Add and remove tasks" { variant: "subtitle" }
|
||
Card { title: "My Tasks", subtitle: "dynamic arrays" } [
|
||
row [
|
||
input { bind: newTodo, placeholder: "New task..." }
|
||
button "Add" { click: todos.push(newTodo), variant: "primary" }
|
||
]
|
||
each todo in todos ->
|
||
row [
|
||
text "→ {todo}"
|
||
button "×" { click: todos.remove(_idx), variant: "ghost" }
|
||
]
|
||
button "Clear All" { click: todos = [], variant: "ghost" }
|
||
]
|
||
]
|
||
|
||
-- Route: About
|
||
route "/about" -> column [
|
||
text "ℹ️ About DreamStack" { variant: "title" }
|
||
text "The reactive UI language" { variant: "subtitle" }
|
||
Card { title: "Features", subtitle: "all built-in" } [
|
||
text "• Reactive signals with fine-grained updates"
|
||
text "• Component composition with slots"
|
||
text "• Client-side routing (you're using it now!)"
|
||
text "• Dynamic lists with push/remove"
|
||
text "• Pattern matching expressions"
|
||
text "• When/else branching"
|
||
text "• Two-way data binding"
|
||
]
|
||
]
|