Skip to content

Instantly share code, notes, and snippets.

View Mr-Malomz's full-sized avatar

Demola Malomo Mr-Malomz

  • Lagos, Nigeria
View GitHub Profile
View mod.rs
pub mod product;
View main.rs
use components::{flower_card::FlowerCard, header::Header, loader::Loader, message::Message};
use models::product::{RootComposition, Slots};
use reqwest::{header, Client, Error};
use yew::prelude::*;
mod components;
mod models;
#[function_component(App)]
fn app() -> Html {
View mod.rs
pub mod flower_card;
pub mod header;
pub mod loader;
pub mod message;
View flower_card.rs
use yew::prelude::*;
use crate::models::product::Flower;
#[derive(Properties, PartialEq)]
pub struct FlowerCardProp {
pub flower: Flower,
}
#[function_component(FlowerCard)]
pub fn flower_card(FlowerCardProp { flower }: &FlowerCardProp) -> Html {
View message.rs
use yew::prelude::*;
#[derive(Properties, PartialEq)]
pub struct MessageProp {
pub text: String,
pub css_class: String,
}
#[function_component(Message)]
pub fn message(MessageProp { text, css_class }: &MessageProp) -> Html {
View loader.rs
use yew::prelude::*;
#[function_component(Loader)]
pub fn loader() -> Html {
html! {
<div class="spinner-border" role="status">
<span class="visually-hidden">{"Loading..."}</span>
</div>
}
}
View header.rs
use yew::prelude::*;
#[function_component(Header)]
pub fn header() -> Html {
html! {
<nav class="navbar bg-black">
<div class="container-fluid">
<a class="navbar-brand text-white" href="#">{"Product List"}</a>
</div>
</nav>
View product.rs
use serde::Deserialize;
#[derive(Clone, Deserialize, PartialEq)]
pub struct RootComposition {
pub composition: Composition,
}
#[derive(Clone, Deserialize, PartialEq)]
pub struct Composition {
pub slots: Slots,
View main.rs
use yew::prelude::*;
//add below
mod components;
mod models;
#[function_component(App)]
fn app() -> Html {
//app code goes here
}
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<title>Product Page</title>
</head>
<body>