nerdcult
/
frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added a link prop to the topbars tab component

This commit is contained in:
antifallobst 2023-09-28 13:58:08 +02:00
parent 44e1c2bada
commit ff498c3a61
Signed by: antifallobst
GPG Key ID: 2B4F402172791BAF
2 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/main.rs
View File

@ -4,12 +4,12 @@ use yew::prelude::*;
use topbar::TopBar; use topbar::TopBar;
#[function_component] #[function_component]
fn app() -> Html { fn App() -> Html {
html! { html! {
<TopBar/> <TopBar/>
} }
} }
fn main() { fn main() {
yew::Renderer::<app>::new().render(); yew::Renderer::<App>::new().render();
} }

15
src/topbar.rs
View File

@ -3,12 +3,13 @@ use yew::prelude::*;
#[derive(Properties, PartialEq)] #[derive(Properties, PartialEq)]
pub struct TabProps { pub struct TabProps {
pub text: AttrValue, pub text: AttrValue,
pub link: AttrValue,
} }
#[function_component] #[function_component]
pub fn Tab(props: &TabProps) -> Html { pub fn Tab(props: &TabProps) -> Html {
html!{ html!{
<li><a href="#"> <li><a href={props.link.clone()}>
<svg width="136" height="54" viewBox="-0.5 -0.5 136 54" xmlns="http://www.w3.org/2000/svg"> <svg width="136" height="54" viewBox="-0.5 -0.5 136 54" xmlns="http://www.w3.org/2000/svg">
<g> <g>
<path d="m 123.5,11.5 5,5 c 3.33333,3.333333 5,8.333333 5,15 v 10 c 0,6.666667 -3.33333,10 -10,10 H 11.500001 c -6.6666667,0 -10,-3.333333 -10,-10 v -30 c 0,-6.6666666 3.3333333,-9.9999996 10,-9.9999996 H 103.5 c 6.66667,0 11.66667,1.666667 15,5 z" <path d="m 123.5,11.5 5,5 c 3.33333,3.333333 5,8.333333 5,15 v 10 c 0,6.666667 -3.33333,10 -10,10 H 11.500001 c -6.6666667,0 -10,-3.333333 -10,-10 v -30 c 0,-6.6666666 3.3333333,-9.9999996 10,-9.9999996 H 103.5 c 6.66667,0 11.66667,1.666667 15,5 z"
@ -27,15 +28,15 @@ pub fn TopBar() -> Html {
html!{ html!{
<nav id="topbar"> <nav id="topbar">
<ul id="tabs-main" class="tabs"> <ul id="tabs-main" class="tabs">
<Tab text="Home" /> <Tab text="Home" link="/" />
<Tab text="Services" /> <Tab text="Services" link="/services" />
<Tab text="Community" /> <Tab text="Community" link="/community" />
<Tab text="About" /> <Tab text="About" link="/about" />
</ul> </ul>
<ul id="tabs-account" class="tabs"> <ul id="tabs-account" class="tabs">
<Tab text="Sign In" /> <Tab text="Sign In" link="/#signin" />
<Tab text="Sign Up" /> <Tab text="Sign Up" link="/#signup" />
</ul> </ul>
</nav> </nav>
} }