stylo/example.stylo at main · matteobortolazzo/stylo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// Import Page component
import "lib/Pages"

// Params
param primaryColor = '#FFC0CB'
param backgroundColor = '#F5F5F5'

// Custom classes
class bg-gradient {
  background: linear-gradient(45deg, #FFC0CB, #FF69B4);
}

component PrimaryButton(text) {
  button(class="px-4 border-2 rounded bg-primary border-primary") { "{text}" }
}

component SecondaryButton(text) {
  button(class="px-4 border-2 rounded bg-white border-primary") { "{text}" }
}

component Body {
  container(class="p-10 gap-4")  {
    Slot(name="top")
    br
    Slot
  }
}

component Footer(primaryText = "Ok", secondaryText = "Cancel") {
  block(class="p-4 flex justify-end gap-2 border-t-2") {
    SecondaryButton(secondaryText)
    PrimaryButton(primaryText)
  }
}

// Display
render Page(backgroundColor, "#333333") {
  block(class="h-full grid", style="grid-template-rows: auto 1fr auto") {
    header(class="p-4 gap-2 border-b-2 text-2xl bg-gradient") { "Header" }
    Body {
      block { "This is the body" }
      block (slot="top") { "This should be on the top" }
    }
    Footer("Continue")
  }
}