2023-09-17 22:19:54 +08:00
|
|
|
use leptos::*;
|
2023-10-04 00:11:38 +08:00
|
|
|
use melt_ui::{mount_style, Code};
|
2023-09-17 22:19:54 +08:00
|
|
|
|
|
|
|
|
#[slot]
|
|
|
|
|
pub struct DemoCode {
|
2023-10-04 00:11:38 +08:00
|
|
|
#[prop(optional)]
|
|
|
|
|
html: &'static str,
|
2023-09-17 22:19:54 +08:00
|
|
|
children: Children,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#[component]
|
|
|
|
|
pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
|
2023-10-04 00:11:38 +08:00
|
|
|
mount_style("demo", || ("", prisms::prism_css!()));
|
2023-09-17 22:19:54 +08:00
|
|
|
view! {
|
|
|
|
|
<div style="background-image: url(/melt-ui/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border: 1px solid #e5e8eb; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;">
|
|
|
|
|
{ children() }
|
|
|
|
|
</div>
|
|
|
|
|
<div style="font-weight: 400; font-size: 0.875em; line-height: 1.7142857;margin-bottom: 1rem; padding: 1rem; background-color: #f9fafb; border: 1px solid #e5e8eb; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; border-top-width: 0;">
|
|
|
|
|
<Code>
|
2023-10-04 00:11:38 +08:00
|
|
|
<pre style="margin: 0" inner_html=demo_code.html>
|
2023-09-17 22:19:54 +08:00
|
|
|
{ (demo_code.children)() }
|
|
|
|
|
</pre>
|
|
|
|
|
</Code>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
}
|
