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
40
41
42
43

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

mod props;
use props::Props;

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

#[function_component]
pub fn Header(props: &Props) -> Html {
    html! {
        <div class="sticky top-0 z-40 flex-none w-full transition-colors duration-500 backdrop-blur bg-surface-light/5 dark:bg-surface-dark/5">
            <div class="py-4 mx-5 border-b border-secondary-light/10 dark:border-secondary-dark/10">
                <div class="flex relative items-center md:px-10 lg:px-20 xl:px-40 px-auto md:px-auto">
                    <a class="flex overflow-hidden px-3" href="/">
                        <Logo style="labeled" />
                    </a>
                    {for props.children.iter()}

                    <div class="flex items-center ml-auto">
                        <nav class="text-sm font-semibold leading-6 text-background-on-light dark:text-background-on-dark hover:text-primary-light dark:hover:text-primary-dark">
                            <ul class="flex m-auto space-x-8">
                                <li>
                                    <TextLink text="Home" href="/" />
                                </li>
                                <li>
                                    <TextLink text="Contact" href="/contact" />
                                </li>
                                <li>
                                    <TextLink text="About Us" href="/about" />
                                </li>
                                <li class="border-l border-surface-variant-on-light dark:border-surface-variant-on-dark"/>
                                <li>
                                    <ThemeButton />
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    }
}