yew_components_library 0.1.0

A collection of yew components using the atomic component management system. Components are made in tailwindcss.
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

use yew::{function_component, html, Html};

mod props;
use props::Props;

use crate::atoms::*;
use crate::molecules::*;

#[function_component]
pub fn StaffCard(props: &Props) -> Html {
    let Props {
        name,
        title,
        children,
    } = props;

    let cols = format!("grid-rows-{}", children.len());
    html! {
            <a id="staffcard" href="#" class="flex flex-col items-center rounded-lg border shadow-md md:flex-row bg-surface-light dark:bg-surface-dark hover:bg-primary-light/10 dark:hover:bg-primary-dark/10 border-primary-light dark:border-primary-dark ">
                <img class="object-cover w-full h-96 rounded-t-lg md:w-48 md:h-auto md:rounded-none md:rounded-l-lg" src="images/logo/square/1024.png" alt=""/>
                <div class="box-content justify-between leading-normal">
                    <div class={format!("grid {} gap-y-3 p-4 leading-normal justify-between font-light text-justify text-xl max-w-xl text-surface-on-light dark:text-surface-on-dark", cols)}>
                        {for children.iter()}
                    </div>


                    <figcaption class="p-4 font-medium align-text-bottom">
                        <div class="text-base text-surface-on-light dark:text-surface-on-dark">
                        {title}
                        </div>
                        <div class="text-base text-surface-on-light dark:text-surface-on-dark">
                        {name}
                        </div>
                    </figcaption>

                </div>
            </a>
    }
}