pib-components-dx-base 0.0.0-upstream-snapshot.2026-09-19.1

temporary fork for Politik im Blick - Dioxus components
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
44
45
46
47
48
49
50
51
52
53
54
55
56

use super::super::component::*;
use dioxus::prelude::*;

const TRACKS: &[(&str, &str, &str, &str)] = &[
    (
        "Midnight City Lights",
        "Neon Dreams",
        "Electric Nights",
        "3:45",
    ),
    (
        "Coffee Shop Conversations",
        "The Morning Brew",
        "Urban Stories",
        "4:05",
    ),
    ("Digital Rain", "Cyber Symphony", "Binary Beats", "3:30"),
];

#[component]
pub fn Demo() -> Element {
    rsx! {
        div {
            display: "flex",
            flex_direction: "column",
            width: "100%",
            max_width: "28rem",

            ItemGroup { gap: "1rem",
                for (title , artist , album , duration) in TRACKS.iter() {
                    Item {
                        variant: ItemVariant::Outline,
                        as: move |attrs: Vec<Attribute>| rsx! {
                            a { href: "#", ..attrs,
                                ItemMedia { variant: ItemMediaVariant::Image,
                                    img {
                                        src: "https://avatar.vercel.sh/{title}",
                                        alt: "{title}",
                                        style: "filter: grayscale(1)",
                                    }
                                }
                                ItemContent {
                                    ItemTitle { "{title} — {album}" }
                                    ItemDescription { "{artist}" }
                                }
                                ItemContent { flex: "none",
                                    ItemDescription { "{duration}" }
                                }
                            }
                        },
                    }
                }
            }
        }
    }
}