diff --git a/app/src/components/aside.gleam b/app/src/components/aside.gleam index dd0778d..9f0bd68 100644 --- a/app/src/components/aside.gleam +++ b/app/src/components/aside.gleam @@ -36,7 +36,7 @@ fn item(route: Pages, page: Page) -> Element(a) { h3([], [ a( [ - class("pl-6 border-l-2 py-2"), + class("pl-6 border-l py-1.5"), active_variant(is_active(route, page.path)), active_border(is_active(route, page.path)), href(page.path), diff --git a/app/src/components/header/header.gleam b/app/src/components/header/header.gleam index 7d02186..fa8842d 100644 --- a/app/src/components/header/header.gleam +++ b/app/src/components/header/header.gleam @@ -13,7 +13,7 @@ pub fn header(route: Pages) -> Element(a) { [ class( [ - "sticky top-0 container py-4 bg-background z-30", + "sticky top-0 container py-4 bg-background/50 backdrop-blur-md z-30", "flex gap-4 items-center justify-between", ] |> string.join(" "), diff --git a/app/src/components/markdown.gleam b/app/src/components/markdown.gleam index dbaf616..9f94e9f 100644 --- a/app/src/components/markdown.gleam +++ b/app/src/components/markdown.gleam @@ -1,8 +1,8 @@ +import components/prose.{prose} +import gleam/string import kirala/markdown/html_renderer import lustre/attribute.{attribute, class} import lustre/element.{type Element} -import components/prose.{prose} -import gleam/string pub fn from_text(text: String) -> Element(a) { text @@ -17,8 +17,5 @@ fn parse(md: String) -> String { } fn dangerous_unescaped_html(content: String) -> Element(a) { - prose( - [attribute("dangerous-unescaped-html", content), class("w-full")], - [], - ) + prose([attribute("dangerous-unescaped-html", content), class("w-full")], []) } diff --git a/app/src/components/nav.gleam b/app/src/components/nav.gleam index 6789a10..a139a59 100644 --- a/app/src/components/nav.gleam +++ b/app/src/components/nav.gleam @@ -17,7 +17,7 @@ pub fn nav(route: Pages) -> Element(a) { item(route, route.components), item(route, route.docs), // item(route, route.blog), - // item(route, route.demo), + // item(route, route.demo), ]), ]) } diff --git a/app/src/components/ui/chip.gleam b/app/src/components/ui/chip.gleam index 863afe5..d21940b 100644 --- a/app/src/components/ui/chip.gleam +++ b/app/src/components/ui/chip.gleam @@ -13,7 +13,10 @@ pub type Colors { Danger } -pub fn chip(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a) { +pub fn chip( + attributes: List(Attribute(a)), + children: List(Element(a)), +) -> Element(a) { div( [ class( @@ -38,7 +41,7 @@ pub fn solid(color: Colors) -> Attribute(a) { |> class } -pub fn outline(color: Colors) -> Attribute(a) { +pub fn outlined(color: Colors) -> Attribute(a) { case color { Neutral -> "outline-neutral text-neutral" Primary -> "outline-primary text-primary" diff --git a/app/src/components/ui/link.gleam b/app/src/components/ui/link.gleam index 3ba1a0a..201fa94 100644 --- a/app/src/components/ui/link.gleam +++ b/app/src/components/ui/link.gleam @@ -13,7 +13,10 @@ pub type Colors { Danger } -pub fn a(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a) { +pub fn a( + attributes: List(Attribute(a)), + children: List(Element(a)), +) -> Element(a) { html.a( [ class( diff --git a/app/src/components/ui/switch.gleam b/app/src/components/ui/switch.gleam new file mode 100644 index 0000000..f98a303 --- /dev/null +++ b/app/src/components/ui/switch.gleam @@ -0,0 +1,126 @@ +import gleam/string +import lustre/attribute.{type Attribute, class, type_} +import lustre/element.{type Element} +import lustre/element/html.{div, input, label} + +pub type Colors { + Neutral + Primary + Secondary + Success + Info + Warning + Danger +} + +pub fn switch( + attributes: List(Attribute(a)), + children: List(Element(a)), +) -> Element(a) { + label( + [ + class( + "inline-flex items-center gap-4 cursor-pointer has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50", + ), + ], + [ + input([type_("checkbox"), class("sr-only peer"), ..attributes]), + div( + [ + class( + [ + "relative rounded-full", + "peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full", + "after:absolute after:top-0.5 after:start-0.5 after:rounded-full after:transition-all", + ] + |> string.join(" "), + ), + ], + [], + ), + ..children + ], + ) +} + +pub fn solid(color: Colors) -> Attribute(a) { + case color { + Neutral -> + "[&:checked+div]:bg-neutral [&:checked+div]:after:bg-neutral-foreground" + Primary -> + "[&:checked+div]:bg-primary [&:checked+div]:after:bg-primary-foreground" + Secondary -> + "[&:checked+div]:bg-secondary [&:checked+div]:after:bg-secondary-foreground" + Success -> + "[&:checked+div]:bg-success [&:checked+div]:after:bg-success-foreground" + Info -> "[&:checked+div]:bg-info [&:checked+div]:after:bg-info-foreground" + Warning -> + "[&:checked+div]:bg-warning [&:checked+div]:after:bg-warning-foreground" + Danger -> + "[&:checked+div]:bg-danger [&:checked+div]:after:bg-danger-foreground" + } + |> string.append(" [&+div]:bg-neutral [&+div]:after:bg-neutral-foreground") + |> class +} + +pub fn outlined(color: Colors) -> Attribute(a) { + case color { + Neutral -> + "[&:checked+div]:outline-neutral [&:checked+div]:after:bg-neutral" + Primary -> + "[&:checked+div]:outline-primary [&:checked+div]:after:bg-primary" + Secondary -> + "[&:checked+div]:outline-secondary [&:checked+div]:after:bg-secondary" + Success -> + "[&:checked+div]:outline-success [&:checked+div]:after:bg-success" + Info -> "[&:checked+div]:outline-info [&:checked+div]:after:bg-info" + Warning -> + "[&:checked+div]:outline-warning [&:checked+div]:after:bg-warning" + Danger -> "[&:checked+div]:outline-danger [&:checked+div]:after:bg-danger" + } + |> string.append( + " [&+div]:outline [&+div]:outline-2 [&+div]:outline-neutral [&+div]:bg-neutral-foreground [&+div]:after:bg-neutral", + ) + |> class +} + +pub fn ghost(color: Colors) -> Attribute(a) { + case color { + Neutral -> + "[&:checked+div]:ring-neutral [&:checked+div]:bg-neutral [&:checked+div]:after:bg-neutral-foreground" + Primary -> + "[&:checked+div]:ring-primary [&:checked+div]:bg-primary [&:checked+div]:after:bg-primary-foreground" + Secondary -> + "[&:checked+div]:ring-secondary [&:checked+div]:bg-secondary [&:checked+div]:after:bg-secondary-foreground" + Success -> + "[&:checked+div]:ring-success [&:checked+div]:bg-success [&:checked+div]:after:bg-success-foreground" + Info -> + "[&:checked+div]:ring-info [&:checked+div]:bg-info [&:checked+div]:after:bg-info-foreground" + Warning -> + "[&:checked+div]:ring-warning [&:checked+div]:bg-warning [&:checked+div]:after:bg-warning-foreground" + Danger -> + "[&:checked+div]:ring-danger [&:checked+div]:bg-danger [&:checked+div]:after:bg-danger-foreground" + } + |> string.append( + " [&+div]:ring [&+div]:ring-2 [&+div]:ring-neutral [&+div]:bg-neutral-foreground [&+div]:after:bg-neutral [&+div]:after:bg-neutral", + ) + |> class +} + +pub fn sm() -> Attribute(a) { + class( + "[&+div]:text-sm [&+div]:w-9 [&+div]:h-5 [&+div]:after:h-4 [&+div]:after:w-4 [&:enabled+div]:hover:after:w-5 [&:checked:enabled+div]:hover:after:w-4", + ) +} + +pub fn md() -> Attribute(a) { + class( + "[&+div]:text-md [&+div]:w-11 [&+div]:h-6 [&+div]:after:h-5 [&+div]:after:w-5 [&:enabled+div]:hover:after:w-6 [&:checked:enabled+div]:hover:after:w-5", + ) +} + +pub fn lg() -> Attribute(a) { + class( + "[&+div]:text-lg [&+div]:w-[3.25rem] [&+div]:h-7 [&+div]:after:h-6 [&+div]:after:w-6 [&:enabled+div]:hover:after:w-7 [&:checked:enabled+div]:hover:after:w-6", + ) +} diff --git a/app/src/gleez_ui.gleam b/app/src/gleez_ui.gleam index 3e31772..0baf233 100644 --- a/app/src/gleez_ui.gleam +++ b/app/src/gleez_ui.gleam @@ -1,4 +1,5 @@ import components/aside.{aside} +import components/barbecue.{barbecue} import components/header/header.{header} import gleam/dynamic import gleam/option.{type Option, None, Some} @@ -9,11 +10,10 @@ import lustre/effect.{type Effect, batch} import lustre/element.{type Element} import lustre/element/html.{div} import lustre_http.{type HttpError} +import model/repo.{type Repo, Repo} +import model/route.{type Pages} import modem import pages/page -import model/route.{type Pages} -import model/repo.{type Repo, Repo} -import components/barbecue.{barbecue} pub fn main() { let app = lustre.application(init, update, view) @@ -22,7 +22,7 @@ pub fn main() { fn init(_) -> #(Model, Effect(Msg)) { #( - Model(page: route.Intro, repo: None), + Model(page: route.Home, repo: None), batch([fetch_stargazers_count(), modem.init(on_url_change), on_load()]), ) } @@ -44,6 +44,7 @@ fn on_url_change(uri: Uri) -> Msg { ["docs", "components", "avatar"] -> OnRouteChange(route.Avatar) ["docs", "components", "badge"] -> OnRouteChange(route.Badge) ["docs", "components", "breadcrumbs"] -> OnRouteChange(route.Breadcrumbs) + ["docs", "components", "switch"] -> OnRouteChange(route.Switch) _ -> OnRouteChange(route.Home) } } @@ -129,6 +130,7 @@ fn with_aside(model: Model) -> Element(Msg) { route.Avatar -> page.avatar() route.Badge -> page.badge() route.Breadcrumbs -> page.breadcrumbs() + route.Switch -> page.switch() _ -> page.home() }, ]), diff --git a/app/src/model/route.gleam b/app/src/model/route.gleam index f9d86f3..2f7ab28 100644 --- a/app/src/model/route.gleam +++ b/app/src/model/route.gleam @@ -20,6 +20,7 @@ pub type Pages { Avatar Badge Breadcrumbs + Switch } pub const home = "/" @@ -56,14 +57,7 @@ pub const badge = "/docs/components/badge" pub const breadcrumbs = "/docs/components/breadcrumbs" -// TODO: -pub const alert = "/docs/components/alert" - -pub const textarea = "/docs/components/textarea" - -pub const code = "/docs/components/code" - -pub const skeleton = "/docs/components/skeleton" +pub const switch = "/docs/components/switch" pub type Page { Page(path: String, sub_pages: List(Page)) @@ -84,6 +78,7 @@ pub fn pages() -> List(Page) { Page(avatar, []), Page(badge, []), Page(breadcrumbs, []), + Page(switch, []), ] |> sort_pages, ), @@ -108,6 +103,7 @@ pub fn to_path(page: Pages) -> String { Installation -> installation Badge -> badge Breadcrumbs -> breadcrumbs + Switch -> switch } } diff --git a/app/src/pages/demo/demo.gleam b/app/src/pages/demo/demo.gleam index 9cc4745..334c844 100644 --- a/app/src/pages/demo/demo.gleam +++ b/app/src/pages/demo/demo.gleam @@ -1,22 +1,18 @@ -import components/ui/breadcrumbs.{breadcrumbs} -import components/ui/link.{a} -import lustre/attribute.{class} +import components/ui/switch.{switch} +import lustre/attribute.{class, disabled} import lustre/element.{type Element, text} import lustre/element/html.{div} -import lustre/ui/icon pub fn demo() -> Element(a) { - div([class("flex flex-col items-center gap-4")], [ - breadcrumbs( - [breadcrumbs.light(breadcrumbs.Neutral), breadcrumbs.md()], - icon.chevron_right([class("w-4")]), - [ - a([], [icon.home([class("w-4")]), text("Home")]), - a([], [icon.input([class("w-4")]), text("Music")]), - a([], [icon.person([class("w-4")]), text("Artist")]), - a([], [icon.card_stack_minus([class("w-4")]), text("Album")]), - a([], [icon.heart([class("w-4")]), text("Songs")]), - ], - ), + div([class("flex flex-wrap gap-4 items-center justify-center w-full")], [ + switch([switch.solid(switch.Neutral), switch.sm(), disabled(True)], [ + text("Disabled"), + ]), + switch([switch.outlined(switch.Neutral), switch.sm(), disabled(True)], [ + text("Disabled"), + ]), + switch([switch.ghost(switch.Neutral), switch.sm(), disabled(True)], [ + text("Disabled"), + ]), ]) } diff --git a/app/src/pages/docs/components/avatar/avatar.gleam b/app/src/pages/docs/components/avatar/avatar.gleam index a9ef5ff..5382f65 100644 --- a/app/src/pages/docs/components/avatar/avatar.gleam +++ b/app/src/pages/docs/components/avatar/avatar.gleam @@ -1,8 +1,8 @@ import components/prose.{prose} import lustre/element.{type Element} import pages/docs/components/avatar/attributes.{attributes} -import pages/docs/components/avatar/variants.{variants} import pages/docs/components/avatar/examples.{examples} +import pages/docs/components/avatar/variants.{variants} import pages/docs/sections/section pub fn docs() -> Element(a) { diff --git a/app/src/pages/docs/components/badge/variants.gleam b/app/src/pages/docs/components/badge/variants.gleam index c932c14..b2f8499 100644 --- a/app/src/pages/docs/components/badge/variants.gleam +++ b/app/src/pages/docs/components/badge/variants.gleam @@ -48,7 +48,7 @@ pub fn variants() -> Element(a) { solid_code(), ), section.variant( - "Outline", + "Outlined", "", [ badge( diff --git a/app/src/pages/docs/components/breadcrumbs/breadcrumbs.gleam b/app/src/pages/docs/components/breadcrumbs/breadcrumbs.gleam index 2d521f9..746eb28 100644 --- a/app/src/pages/docs/components/breadcrumbs/breadcrumbs.gleam +++ b/app/src/pages/docs/components/breadcrumbs/breadcrumbs.gleam @@ -1,8 +1,8 @@ import components/prose.{prose} import lustre/element.{type Element} import pages/docs/components/breadcrumbs/attributes.{attributes} -import pages/docs/components/breadcrumbs/variants.{variants} import pages/docs/components/breadcrumbs/examples.{examples} +import pages/docs/components/breadcrumbs/variants.{variants} import pages/docs/sections/section pub fn docs() -> Element(a) { diff --git a/app/src/pages/docs/components/breadcrumbs/examples.gleam b/app/src/pages/docs/components/breadcrumbs/examples.gleam index 8c0c999..61ae6c0 100644 --- a/app/src/pages/docs/components/breadcrumbs/examples.gleam +++ b/app/src/pages/docs/components/breadcrumbs/examples.gleam @@ -1,10 +1,7 @@ -import components/ui/avatar.{avatar} import components/ui/breadcrumbs.{breadcrumbs} -import components/ui/button.{button} import components/ui/link.{a} -import components/ui/tooltip.{tooltip} -import lustre/attribute.{class, disabled, src} -import lustre/element.{type Element, fragment, text} +import lustre/attribute.{class} +import lustre/element.{type Element, text} import lustre/ui/icon import pages/docs/sections/section diff --git a/app/src/pages/docs/components/button/button.gleam b/app/src/pages/docs/components/button/button.gleam index eaf91e3..1857d7e 100644 --- a/app/src/pages/docs/components/button/button.gleam +++ b/app/src/pages/docs/components/button/button.gleam @@ -1,9 +1,9 @@ +import components/prose.{prose} import lustre/element.{type Element} import pages/docs/components/button/attributes.{attributes} import pages/docs/components/button/examples.{examples} import pages/docs/components/button/variants.{variants} import pages/docs/sections/section -import components/prose.{prose} pub fn docs() -> Element(a) { prose([], [ diff --git a/app/src/pages/docs/components/chip/variants.gleam b/app/src/pages/docs/components/chip/variants.gleam index 3a475d9..e7f2ebc 100644 --- a/app/src/pages/docs/components/chip/variants.gleam +++ b/app/src/pages/docs/components/chip/variants.gleam @@ -19,18 +19,18 @@ pub fn variants() -> Element(a) { solid_code(), ), section.variant( - "Outline", + "Outlined", "", [ - chip([chip.outline(chip.Neutral), chip.md()], [text("Neutral")]), - chip([chip.outline(chip.Primary), chip.md()], [text("Primary")]), - chip([chip.outline(chip.Secondary), chip.md()], [text("Secondary")]), - chip([chip.outline(chip.Success), chip.md()], [text("Success")]), - chip([chip.outline(chip.Info), chip.md()], [text("Info")]), - chip([chip.outline(chip.Warning), chip.md()], [text("Warning")]), - chip([chip.outline(chip.Danger), chip.md()], [text("Danger")]), + chip([chip.outlined(chip.Neutral), chip.md()], [text("Neutral")]), + chip([chip.outlined(chip.Primary), chip.md()], [text("Primary")]), + chip([chip.outlined(chip.Secondary), chip.md()], [text("Secondary")]), + chip([chip.outlined(chip.Success), chip.md()], [text("Success")]), + chip([chip.outlined(chip.Info), chip.md()], [text("Info")]), + chip([chip.outlined(chip.Warning), chip.md()], [text("Warning")]), + chip([chip.outlined(chip.Danger), chip.md()], [text("Danger")]), ], - outline_code(), + outlined_code(), ), section.variant( "Light", @@ -84,7 +84,7 @@ pub fn demo() -> Element(a) { " } -fn outline_code() -> String { +fn outlined_code() -> String { " import components/ui/chip.{chip} import lustre/attribute.{class} @@ -93,13 +93,13 @@ import lustre/element/html.{div} pub fn demo() -> Element(a) { div([class(\"flex flex-wrap gap-4 items-center justify-center w-full\")], [ - chip([chip.outline(chip.Neutral), chip.md()], [text(\"Neutral\")]), - chip([chip.outline(chip.Primary), chip.md()], [text(\"Primary\")]), - chip([chip.outline(chip.Secondary), chip.md()], [text(\"Secondary\")]), - chip([chip.outline(chip.Success), chip.md()], [text(\"Success\")]), - chip([chip.outline(chip.Info), chip.md()], [text(\"Info\")]), - chip([chip.outline(chip.Warning), chip.md()], [text(\"Warning\")]), - chip([chip.outline(chip.Danger), chip.md()], [text(\"Danger\")]), + chip([chip.outlined(chip.Neutral), chip.md()], [text(\"Neutral\")]), + chip([chip.outlined(chip.Primary), chip.md()], [text(\"Primary\")]), + chip([chip.outlined(chip.Secondary), chip.md()], [text(\"Secondary\")]), + chip([chip.outlined(chip.Success), chip.md()], [text(\"Success\")]), + chip([chip.outlined(chip.Info), chip.md()], [text(\"Info\")]), + chip([chip.outlined(chip.Warning), chip.md()], [text(\"Warning\")]), + chip([chip.outlined(chip.Danger), chip.md()], [text(\"Danger\")]), ]) } " diff --git a/app/src/pages/docs/components/input/input.gleam b/app/src/pages/docs/components/input/input.gleam index 3986102..a3a8fad 100644 --- a/app/src/pages/docs/components/input/input.gleam +++ b/app/src/pages/docs/components/input/input.gleam @@ -1,9 +1,9 @@ +import components/prose.{prose} import lustre/element.{type Element} import pages/docs/components/input/attributes.{attributes} import pages/docs/components/input/examples.{examples} import pages/docs/components/input/variants.{variants} import pages/docs/sections/section -import components/prose.{prose} pub fn docs() -> Element(a) { prose([], [ diff --git a/app/src/pages/docs/components/switch/attributes.gleam b/app/src/pages/docs/components/switch/attributes.gleam new file mode 100644 index 0000000..4b9cad5 --- /dev/null +++ b/app/src/pages/docs/components/switch/attributes.gleam @@ -0,0 +1,39 @@ +import components/ui/switch.{switch} +import lustre/element.{type Element, text} +import pages/docs/sections/section + +pub fn attributes() -> Element(a) { + section.attributes([ + section.attribute( + "Size", + " +- `sm()`: Small Size +- `md()`: Medium Size +- `lg()`: Large Size + ", + [ + switch([switch.solid(switch.Neutral), switch.sm()], [text("Small")]), + switch([switch.solid(switch.Neutral), switch.md()], [text("Medium")]), + switch([switch.solid(switch.Neutral), switch.lg()], [text("Large")]), + ], + size_code(), + ), + ]) +} + +fn size_code() -> String { + " +import components/ui/switch.{switch} +import lustre/attribute.{class} +import lustre/element.{type Element, text} +import lustre/element/html.{div} + +pub fn demo() -> Element(a) { + div([class(\"flex flex-wrap gap-4 items-center justify-center w-full\")], [ + switch([switch.solid(switch.Neutral), switch.sm()], [text(\"Small\")]), + switch([switch.solid(switch.Neutral), switch.md()], [text(\"Medium\")]), + switch([switch.solid(switch.Primary), switch.lg()], [text(\"Large\")]), + ]) +} +" +} diff --git a/app/src/pages/docs/components/switch/examples.gleam b/app/src/pages/docs/components/switch/examples.gleam new file mode 100644 index 0000000..2a763a9 --- /dev/null +++ b/app/src/pages/docs/components/switch/examples.gleam @@ -0,0 +1,42 @@ +import components/ui/switch.{switch} +import lustre/attribute.{disabled} +import lustre/element.{type Element, text} +import pages/docs/sections/section + +pub fn examples() -> Element(a) { + section.examples([ + section.example( + "Disabled", + "", + [ + switch([switch.solid(switch.Neutral), switch.sm(), disabled(True)], [ + text("Disabled"), + ]), + switch([switch.outlined(switch.Neutral), switch.sm(), disabled(True)], [ + text("Disabled"), + ]), + ], + with_icons_code(), + ), + ]) +} + +fn with_icons_code() -> String { + " +import components/ui/switch.{switch} +import lustre/attribute.{class, disabled} +import lustre/element.{type Element, text} +import lustre/element/html.{div} + +pub fn demo() -> Element(a) { + div([class(\"flex flex-wrap gap-4 items-center justify-center w-full\")], [ + switch([switch.solid(switch.Neutral), switch.sm(), disabled(True)], [ + text(\"Disabled\"), + ]), + switch([switch.outlined(switch.Neutral), switch.sm(), disabled(True)], [ + text(\"Disabled\"), + ]), + ]) +} +" +} diff --git a/app/src/pages/docs/components/switch/switch.gleam b/app/src/pages/docs/components/switch/switch.gleam new file mode 100644 index 0000000..aabb654 --- /dev/null +++ b/app/src/pages/docs/components/switch/switch.gleam @@ -0,0 +1,19 @@ +import components/prose.{prose} +import lustre/element.{type Element} +import pages/docs/components/switch/attributes.{attributes} +import pages/docs/components/switch/examples.{examples} +import pages/docs/components/switch/variants.{variants} +import pages/docs/sections/section + +pub fn docs() -> Element(a) { + prose([], [ + section.intro( + "Switch", + "Switches toggle the state of a single setting on or off.", + ), + section.installation("gleam run -m gleez add switch"), + variants(), + attributes(), + examples(), + ]) +} diff --git a/app/src/pages/docs/components/switch/variants.gleam b/app/src/pages/docs/components/switch/variants.gleam new file mode 100644 index 0000000..f8ca45e --- /dev/null +++ b/app/src/pages/docs/components/switch/variants.gleam @@ -0,0 +1,129 @@ +import components/ui/switch.{switch} +import lustre/attribute.{checked} +import lustre/element.{type Element} +import pages/docs/sections/section + +pub fn variants() -> Element(a) { + section.variants([ + section.variant( + "Solid", + "", + [ + switch([switch.solid(switch.Neutral), switch.md(), checked(True)], []), + switch([switch.solid(switch.Primary), switch.md(), checked(True)], []), + switch([switch.solid(switch.Secondary), switch.md(), checked(True)], []), + switch([switch.solid(switch.Success), switch.md(), checked(True)], []), + switch([switch.solid(switch.Info), switch.md(), checked(True)], []), + switch([switch.solid(switch.Warning), switch.md(), checked(True)], []), + switch([switch.solid(switch.Danger), switch.md(), checked(True)], []), + ], + solid_code(), + ), + section.variant( + "Outlined", + "", + [ + switch( + [switch.outlined(switch.Neutral), switch.md(), checked(True)], + [], + ), + switch( + [switch.outlined(switch.Primary), switch.md(), checked(True)], + [], + ), + switch( + [switch.outlined(switch.Secondary), switch.md(), checked(True)], + [], + ), + switch( + [switch.outlined(switch.Success), switch.md(), checked(True)], + [], + ), + switch([switch.outlined(switch.Info), switch.md(), checked(True)], []), + switch( + [switch.outlined(switch.Warning), switch.md(), checked(True)], + [], + ), + switch([switch.outlined(switch.Danger), switch.md(), checked(True)], []), + ], + outlined_code(), + ), + section.variant( + "Ghost", + "", + [ + switch([switch.ghost(switch.Neutral), switch.md(), checked(True)], []), + switch([switch.ghost(switch.Primary), switch.md(), checked(True)], []), + switch([switch.ghost(switch.Secondary), switch.md(), checked(True)], []), + switch([switch.ghost(switch.Success), switch.md(), checked(True)], []), + switch([switch.ghost(switch.Info), switch.md(), checked(True)], []), + switch([switch.ghost(switch.Warning), switch.md(), checked(True)], []), + switch([switch.ghost(switch.Danger), switch.md(), checked(True)], []), + ], + ghost_code(), + ), + ]) +} + +fn solid_code() -> String { + " +import components/ui/switch.{switch} +import lustre/attribute.{checked, class} +import lustre/element.{type Element} +import lustre/element/html.{div} + +pub fn demo() -> Element(a) { + div([class(\"flex flex-wrap gap-4 items-center justify-center w-full\")], [ + switch([switch.solid(switch.Neutral), switch.md(), checked(True)], []), + switch([switch.solid(switch.Primary), switch.md(), checked(True)], []), + switch([switch.solid(switch.Secondary), switch.md(), checked(True)], []), + switch([switch.solid(switch.Success), switch.md(), checked(True)], []), + switch([switch.solid(switch.Info), switch.md(), checked(True)], []), + switch([switch.solid(switch.Warning), switch.md(), checked(True)], []), + switch([switch.solid(switch.Danger), switch.md(), checked(True)], []), + ]) +} +" +} + +fn outlined_code() -> String { + " +import components/ui/switch.{switch} +import lustre/attribute.{checked, class} +import lustre/element.{type Element} +import lustre/element/html.{div} + +pub fn demo() -> Element(a) { + div([class(\"flex flex-wrap gap-4 items-center justify-center w-full\")], [ + switch([switch.outlined(switch.Neutral), switch.md(), checked(True)], []), + switch([switch.outlined(switch.Primary), switch.md(), checked(True)], []), + switch([switch.outlined(switch.Secondary), switch.md(), checked(True)], []), + switch([switch.outlined(switch.Success), switch.md(), checked(True)], []), + switch([switch.outlined(switch.Info), switch.md(), checked(True)], []), + switch([switch.outlined(switch.Warning), switch.md(), checked(True)], []), + switch([switch.outlined(switch.Danger), switch.md(), checked(True)], []), + ]) +} +" +} + +fn ghost_code() -> String { + " +import components/ui/switch.{switch} +import lustre/attribute.{checked, class} +import lustre/element.{type Element} +import lustre/element/html.{div} + +pub fn demo() -> Element(a) { + div([class(\"flex flex-wrap gap-4 items-center justify-center w-full\")], [ + switch([switch.ghost(switch.Neutral), switch.md(), checked(True)], []), + switch([switch.ghost(switch.Primary), switch.md(), checked(True)], []), + switch([switch.ghost(switch.Secondary), switch.md(), checked(True)], []), + switch([switch.ghost(switch.Success), switch.md(), checked(True)], []), + switch([switch.ghost(switch.Info), switch.md(), checked(True)], []), + switch([switch.ghost(switch.Warning), switch.md(), checked(True)], []), + switch([switch.ghost(switch.Danger), switch.md(), checked(True)], []), + ]) +} +" +} diff --git a/app/src/pages/docs/components/tooltip/variants.gleam b/app/src/pages/docs/components/tooltip/variants.gleam index fb19402..6635f32 100644 --- a/app/src/pages/docs/components/tooltip/variants.gleam +++ b/app/src/pages/docs/components/tooltip/variants.gleam @@ -50,7 +50,7 @@ pub fn variants() -> Element(a) { solid_code(), ), section.variant( - "Outline", + "Outlined", "", [ tooltip( diff --git a/app/src/pages/page.gleam b/app/src/pages/page.gleam index 1fbf62a..6646faa 100644 --- a/app/src/pages/page.gleam +++ b/app/src/pages/page.gleam @@ -2,16 +2,17 @@ import pages/blog/blog import pages/demo/demo import pages/docs/components/avatar/avatar import pages/docs/components/badge/badge +import pages/docs/components/breadcrumbs/breadcrumbs import pages/docs/components/button/button +import pages/docs/components/switch/switch import pages/docs/components/chip/chip import pages/docs/components/divider/divider import pages/docs/components/input/input import pages/docs/components/link/link import pages/docs/components/tooltip/tooltip -import pages/docs/components/breadcrumbs/breadcrumbs -import pages/docs/guide/intro/intro -import pages/docs/guide/installation/installation import pages/docs/guide/colors/colors +import pages/docs/guide/installation/installation +import pages/docs/guide/intro/intro import pages/home pub const home = home.home @@ -45,3 +46,5 @@ pub const avatar = avatar.docs pub const badge = badge.docs pub const breadcrumbs = breadcrumbs.docs + +pub const switch = switch.docs