leptos_components/
flap.rs

1use components_core::{BASE_CLASS, concat};
2use leptos::prelude::*;
3use leptos::{IntoView, component, view};
4use tailwind_fuse::{AsTailwindClass, TwVariant};
5
6use crate::icons::StarBold;
7
8#[derive(TwVariant, PartialEq)]
9pub enum Variant {
10    #[tw(default, class = "text-primary-400")]
11    Highlight,
12    #[tw(class = "text-primary-200")]
13    Numeric,
14    #[tw(class = "text-secondary-400")]
15    Descritive,
16}
17
18#[component]
19pub fn Flap(
20    #[prop(into)] label: String,
21    #[prop(into, optional)] variant: Variant,
22    #[prop(into, optional)] class: String,
23) -> impl IntoView {
24    let class = crate::tw!(concat!(BASE_CLASS, "-flap"), class);
25
26    view! {
27        <div title={label.clone()} class={class}>
28            <svg
29                viewBox="0 0 145 49"
30                fill="none"
31                preserveAspectRatio="none"
32                class={crate::tw!(concat!(BASE_CLASS, "-flap__svg"), variant)}
33            >
34                <path
35                    d="M120.962 5.00869L141.872 30.4082C147.78 37.5847 142.676 48.3997 133.38 48.3997L12.488 48.3996C3.19249 48.3996 -1.91244 37.5847 3.99561 30.4082L24.906 5.00869C26.9955 2.47056 30.1108 1.00009 33.3984 1.00009L112.47 1.0001C115.757 1.0001 118.872 2.47057 120.962 5.00869Z"
36                    fill="currentColor"
37                    stroke="black"
38                />
39            </svg>
40            <span
41                class={crate::tw!(
42                    concat!(BASE_CLASS, "-flap__view"),
43                    (variant == Variant::Highlight).then_some(concat!(BASE_CLASS, "-flap__view--icon")),
44                )}
45            >
46                {(variant == Variant::Highlight).then_some(view! { <StarBold /> })}
47                <span class={concat!("text-paragraph-2 ", BASE_CLASS, "-flap__view-text")}>
48                    {label.clone()}
49                </span>
50            </span>
51        </div>
52    }
53}
leptos_components/flap.rs

leptos_components/
flap.rs
