logicaffeine_web/ui/components/
misconception_box.rs

1//! Misconception-first callout (Derek Muller): state the belief the reader
2//! arrives with — in their voice — then what LOGOS does and why, and deep-link
3//! the runnable evidence example that settles it.
4
5use dioxus::prelude::*;
6
7#[derive(Props, Clone, PartialEq)]
8pub struct MisconceptionBoxProps {
9    pub id: String,
10    pub expectation: String,
11    pub reality: String,
12    /// Example id in the same section — the anchor the "See it run" link jumps to.
13    pub evidence: String,
14}
15
16#[component]
17pub fn MisconceptionBox(props: MisconceptionBoxProps) -> Element {
18    rsx! {
19        div {
20            class: "guide-misconception",
21            id: "{props.id}",
22            style: "border: 1px solid rgba(251,191,36,0.25); border-left: 3px solid #fbbf24; border-radius: 0 4px 4px 0; padding: 14px 16px; margin: 16px 0; background: rgba(251,191,36,0.05);",
23
24            div {
25                style: "font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #fbbf24; margin-bottom: 8px;",
26                "You might expect"
27            }
28            div {
29                style: "font-size: 14px; color: rgba(229,231,235,0.9); line-height: 1.6; font-style: italic;",
30                "{props.expectation}"
31            }
32            div {
33                style: "font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #22c55e; margin: 12px 0 8px;",
34                "LOGOS instead"
35            }
36            div {
37                style: "font-size: 14px; color: rgba(229,231,235,0.9); line-height: 1.6;",
38                "{props.reality}"
39            }
40            a {
41                style: "display: inline-block; margin-top: 10px; font-size: 12px; color: #60a5fa; text-decoration: none; font-weight: 600;",
42                href: "#{props.evidence}",
43                "See it run ↓"
44            }
45        }
46    }
47}
logicaffeine_web/ui/components/misconception_box.rs

logicaffeine_web/ui/components/
misconception_box.rs
