tinkr 0.0.43

Tinkr is a web framework for quickly building full-stack web applications with Leptos.
Documentation 
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
47
48
49
50
51

use leptos::prelude::*;
use tw_merge::*;

#[derive(TwVariant)]
pub enum HeadingSize {
    #[tw(class = "text-3xl font-bold text-neutral-600 dark:text-white")]
    H1,
    #[tw(class = "text-2xl font-medium text-neutral-600 dark:text-white")]
    H2,
    #[tw(
        default,
        class = "text-xl font-medium text-neutral-600 dark:text-white"
    )]
    H3,
    #[tw(class = "text-lg font-bold text-neutral-600 dark:text-white")]
    H4,
    #[tw(class = "text-lg font-light text-neutral-600 dark:text-white")]
    H5,
    #[tw(class = "text-md font-medium text-neutral-900 dark:text-white")]
    H6,
}

#[derive(TwClass)]
// Optional base class
#[tw(class = "")]
struct HeadingPropsCustom {
    variant: HeadingSize,
}

#[component]
pub fn Heading(
    children: Children,
    #[prop(optional)] variant: Option<HeadingSize>,
    #[prop(optional, into)] class: Option<String>,
) -> impl IntoView {
    let classtext = move || {
        HeadingPropsCustom {
            variant: variant.unwrap_or(HeadingSize::H3),
        }
        .to_class()
    };

    let class = class.unwrap_or_default();

    view! { <h1 class=tw_merge!(classtext(), class)>{children()}</h1> }
}

#[component]
pub fn SubHeading(children: Children) -> impl IntoView {
    view! { <p class="mt-1 text-md text-neutral-500 dark:text-neutral-400 mb-2">{children()}</p> }
}