46 lines
1.3 KiB
Text
46 lines
1.3 KiB
Text
|
-- DreamStack Component Showcase
|
||
|
|
-- Demonstrates all component styles
|
||
|
|
|
||
|
|
-- State
|
||
|
|
let name = ""
|
||
|
|
let count = 0
|
||
|
|
|
||
|
|
-- Main view
|
||
|
|
view main = column [
|
||
|
|
|
||
|
|
text "🧩 DreamStack Components" { class: "ds-card-title" }
|
||
|
|
text "shadcn-inspired component registry" { class: "ds-card-subtitle" }
|
||
|
|
|
||
|
|
-- Button Variants
|
||
|
|
text "Button Variants" { class: "ds-card-title" }
|
||
|
|
row [
|
||
|
|
button "Primary" { class: "ds-btn-primary" }
|
||
|
|
button "Secondary" { class: "ds-btn-secondary" }
|
||
|
|
button "Ghost" { class: "ds-btn-ghost" }
|
||
|
|
button "Destructive" { class: "ds-btn-destructive" }
|
||
|
|
]
|
||
|
|
|
||
|
|
-- Badge Variants
|
||
|
|
text "Badge Variants" { class: "ds-card-title" }
|
||
|
|
row [
|
||
|
|
text "SUCCESS" { class: "ds-badge ds-badge-success" }
|
||
|
|
text "WARNING" { class: "ds-badge ds-badge-warning" }
|
||
|
|
text "ERROR" { class: "ds-badge ds-badge-error" }
|
||
|
|
text "INFO" { class: "ds-badge ds-badge-info" }
|
||
|
|
text "DEFAULT" { class: "ds-badge ds-badge-default" }
|
||
|
|
]
|
||
|
|
|
||
|
|
-- Input with live binding
|
||
|
|
text "Input Component" { class: "ds-card-title" }
|
||
|
|
text "Name" { class: "ds-input-label" }
|
||
|
|
input { bind: name, placeholder: "Type your name..." }
|
||
|
|
text "Hello, {name}!"
|
||
|
|
|
||
|
|
-- Interactive counter
|
||
|
|
text "Interactive Counter" { class: "ds-card-title" }
|
||
|
|
row [
|
||
|
|
button "Count: {count}" { click: count += 1, class: "ds-btn-primary" }
|
||
|
|
button "Reset" { click: count = 0, class: "ds-btn-ghost" }
|
||
|
|
]
|
||
|
|
]
|