82 lines
2.7 KiB
Text
82 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"
|
|||
|
|
]
|
|||
|
|
]
|