atproto blogging
nonbinary.computer
1use dioxus::prelude::*;
2use dioxus_primitives::collapsible::{
3 self, CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps,
4};
5
6#[component]
7pub fn Collapsible(props: CollapsibleProps) -> Element {
8 rsx! {
9 document::Link { rel: "stylesheet", href: asset!("./style.css") }
10 collapsible::Collapsible {
11 keep_mounted: props.keep_mounted,
12 default_open: props.default_open,
13 disabled: props.disabled,
14 open: props.open,
15 on_open_change: props.on_open_change,
16 attributes: props.attributes,
17 class: "collapsible",
18 {props.children}
19 }
20 }
21}
22
23#[component]
24pub fn CollapsibleTrigger(props: CollapsibleTriggerProps) -> Element {
25 rsx! {
26 collapsible::CollapsibleTrigger { class: "collapsible-trigger", attributes: props.attributes,
27 {props.children}
28 svg {
29 class: "collapsible-expand-icon",
30 view_box: "0 0 24 24",
31 xmlns: "http://www.w3.org/2000/svg",
32 // shifted up by 6 polyline { points: "6 9 12 15 18 9" }
33 polyline { points: "6 15 12 21 18 15" }
34 // shifted down by 6 polyline { points: "6 15 12 9 18 15" }
35 polyline { points: "6 9 12 3 18 9" }
36 }
37 }
38 }
39}
40
41#[component]
42pub fn CollapsibleContent(props: CollapsibleContentProps) -> Element {
43 rsx! {
44 collapsible::CollapsibleContent {
45 class: "collapsible-content",
46 id: props.id,
47 attributes: props.attributes,
48 {props.children}
49 }
50 }
51}
52
53#[component]
54pub fn CollapsibleItem(
55 #[props(extends = GlobalAttributes)] attributes: Vec<Attribute>,
56 children: Element,
57) -> Element {
58 rsx! {
59 div {
60 border: "1px solid var(--color-primary",
61 border_radius: "0.5rem",
62 padding: "1rem",
63 ..attributes,
64 {children}
65 }
66 }
67}
68
69#[component]
70pub fn CollapsibleList(
71 #[props(extends = GlobalAttributes)] attributes: Vec<Attribute>,
72 children: Element,
73) -> Element {
74 rsx! {
75 div {
76 display: "flex",
77 flex_direction: "column",
78 gap: "0.5rem",
79 max_width: "20rem",
80 color: "var(--color-secondary)",
81 ..attributes,
82 {children}
83 }
84 }
85}