diff --git a/native/templates/_intro.py b/native/templates/_intro.py
index 23e6d28..1427b52 100644
--- a/native/templates/_intro.py
+++ b/native/templates/_intro.py
@@ -1,111 +1,94 @@
import reflex as rx
+from reflex_components_core.el import div, h1, p, span, strong
from components.core.hugeicon import hi
from components.ui.button import button, button_variants
-from components.ui.button_group import button_group
-from components.ui.menu import menu
-
-
-def command_selector():
- return menu.root(
- menu.trigger(
- hi("ArrowDown01Icon"),
- class_name=f"""{button_variants("outline")} !rounded-r-lg !rounded-l-none !border-l-none""",
- ),
- menu.content(
- menu.group_label("Commands"),
- menu.separator(),
- menu.item(
- rx.el.span(
- "",
- class_name="command-check w-4",
- ),
- rx.el.span("buridan"),
- id="command-option-cli",
- on_click=rx.call_script(
- """
- const command = "buridan add";
-
- localStorage.setItem(
- "buridan-command",
- command
- );
-
- document
- .querySelectorAll(".command-prefix")
- .forEach(el => el.innerText = command);
-
- document
- .querySelectorAll(".command-check")
- .forEach(el => el.innerText = "");
+from native.templates._copy_btn import generate_component_id
+
+COPY_ICON_SVG = ''
+TICK_ICON_SVG = ''
+
+
+def _usage_demo(slug: str):
+ demo_id = generate_component_id()
+ icon_id = f"icon-{demo_id}"
+
+ commands = {
+ "buridan": f"buridan add {slug}",
+ "uv": f"uv run buridan add {slug}",
+ "pip": f"python -m buridan add {slug}",
+ }
+
+ def view_button(view: str, label: str):
+ return button(
+ label,
+ variant="outline",
+ class_name=(
+ "h-7 w-fit font-normal usage-btn border-transparent bg-transparent "
+ f"group-data-[view={view}]:border-border "
+ f"group-data-[view={view}]:bg-background"
+ ),
+ on_click=rx.call_script(
+ f"""document.getElementById("demo-{demo_id}").dataset.view = "{view}";"""
+ ),
+ )
- document
- .querySelector("#command-option-cli .command-check")
- .innerText = "✓";
- """
+ def command_line(view: str, command_text: str):
+ return div(
+ rx.el.pre(
+ rx.el.code(
+ command_text,
+ id=f"command-{demo_id}-{view}",
+ class_name="language-python text-sm",
),
),
- menu.item(
- rx.el.span(
- "",
- class_name="command-check w-4",
- ),
- rx.el.span("uv run"),
- id="command-option-uv",
- on_click=rx.call_script(
- """
- const command = "uv run buridan add";
-
- localStorage.setItem(
- "buridan-command",
- command
- );
-
- document
- .querySelectorAll(".command-prefix")
- .forEach(el => el.innerText = command);
+ class_name=(
+ f"size-full overflow-x-auto p-2 hidden group-data-[view={view}]:flex"
+ ),
+ )
- document
- .querySelectorAll(".command-check")
- .forEach(el => el.innerText = "");
+ commands_js = ", ".join(f'"{view}": "{cmd}"' for view, cmd in commands.items())
- document
- .querySelector("#command-option-uv .command-check")
- .innerText = "✓";
- """
- ),
+ return div(
+ div(
+ div(
+ view_button("uv", "uv"),
+ view_button("pip", "pip"),
+ view_button("buridan", "buridan"),
+ class_name="flex items-center gap-1",
),
- menu.item(
- rx.el.span(
- "",
- class_name="command-check w-4",
- ),
- rx.el.span("python -m"),
- id="command-option-module",
+ rx.el.button(
+ hi("Copy01Icon", id=icon_id, class_name="size-4"),
+ class_name="flex items-center gap-1 px-2",
on_click=rx.call_script(
- """
- const command = "python -m buridan add";
+ f"""
+ const commands = {{{commands_js}}};
+ const view = document.getElementById("demo-{demo_id}").dataset.view;
+ const icon = document.getElementById("{icon_id}");
- localStorage.setItem(
- "buridan-command",
- command
- );
+ navigator.clipboard.writeText(commands[view]);
- document
- .querySelectorAll(".command-prefix")
- .forEach(el => el.innerText = command);
+ icon.innerHTML = `{TICK_ICON_SVG}`;
- document
- .querySelectorAll(".command-check")
- .forEach(el => el.innerText = "");
-
- document
- .querySelector("#command-option-module .command-check")
- .innerText = "✓";
+ setTimeout(() => {{
+ icon.innerHTML = `{COPY_ICON_SVG}`;
+ }}, 1500);
"""
),
),
+ class_name="flex items-stretch justify-between p-0.5 pb-0.5",
+ ),
+ div(
+ *[command_line(view, cmd) for view, cmd in commands.items()],
+ class_name=(
+ "rounded-md relative m-0.5 mt-0 flex min-h-0 flex-1 flex-col "
+ "overflow-hidden border bg-background "
+ "dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)]"
+ ),
),
+ id=f"demo-{demo_id}",
+ data_view="uv",
+ class_name="w-full group relative flex min-w-0 flex-col border bg-muted/50 min-h-10 rounded-lg",
)
@@ -117,8 +100,6 @@ def intro(raw_arg):
title, description = intro.split(",", 1)
slug = title.strip().lower().replace(" ", "_")
- copy_id = f"copy-command-{slug}"
- command_id = f"command-{slug}"
return rx.el.div(
rx.el.div(
@@ -130,63 +111,21 @@ def intro(raw_arg):
description.strip(),
class_name="text-sm text-muted-foreground",
),
- rx.el.div(
- rx.el.code(
- rx.el.span(
- "❯",
- class_name="shrink-0 select-none text-muted-foreground/50",
- ),
- rx.el.span(
- "buridan add",
- id=command_id,
- class_name="text-muted-foreground command-prefix",
- ),
- rx.el.span(
- f" {slug}",
- class_name="font-medium text-foreground",
- ),
- class_name=(
- "rounded-lg flex h-8 min-w-0 flex-1 items-center gap-2 "
- "overflow-x-auto border border-border bg-muted/40 "
- "px-3 font-mono text-xs whitespace-nowrap"
- ),
- ),
- button_group.root(
- button(
- rx.el.span(
- "Copy",
- id=f"{copy_id}-text",
- ),
- variant="outline",
- class_name="w-[80px]",
- on_click=rx.call_script(
- f"""
- const command =
- document.getElementById("{command_id}").innerText;
-
- const component =
- "{slug}";
-
- navigator.clipboard.writeText(
- `${{command}} ${{component}}`
- );
-
- const text =
- document.getElementById("{copy_id}-text");
-
- text.innerText = "Copied!";
-
- setTimeout(() => {{
- text.innerText = "Copy";
- }}, 1000);
- """
- ),
- ),
- # command_selector(),
- ),
- class_name="flex w-full max-w-2xl items-stretch gap-2",
- ),
class_name="flex flex-col items-start gap-4 max-w-xl",
),
- class_name="flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between mb-10",
+ div(
+ h1(
+ "Installation",
+ class_name="text-2xl leading-tight font-bold tracking-tighter",
+ ),
+ p(
+ span("Command to install the "),
+ strong(title.strip()),
+ span(" component."),
+ class_name="text-sm text-muted-foreground",
+ ),
+ _usage_demo(slug),
+ class_name="w-full flex flex-col items-start gap-4",
+ ),
+ class_name="flex flex-col gap-6 mb-10",
)
diff --git a/native/templates/toc.py b/native/templates/toc.py
index acbe134..00a30ff 100644
--- a/native/templates/toc.py
+++ b/native/templates/toc.py
@@ -1,8 +1,13 @@
import reflex as rx
+from reflex.experimental import ClientStateVar
from components.core.hugeicon import hi
+from components.ui.field import field
+from components.ui.radio_group import radio_group
from native.templates._copy_btn import generate_component_id
+_selected_env = ClientStateVar.create("_selected_env", "uv")
+
def create_copy_button(url: str) -> rx.Component:
uid = generate_component_id()
@@ -143,21 +148,11 @@ def table_of_content(url: str, toc_data: list[dict]):
_create_external_tool_links(url),
class_name="w-full flex flex-col",
),
- #
# rx.el.div(
# rx.el.p(
- # "Agent Resources",
+ # "Package Manager",
# class_name="text-xs text-muted-foreground font-medium pb-2",
# ),
- # rx.el.a(
- # rx.el.p(
- # "llms.txt",
- # class_name="text-[0.8rem] text-muted-foreground hover:text-foreground",
- # ),
- # href="/llms.txt",
- # target="_blank",
- # rel="noopener noreferrer",
- # ),
# class_name="w-full flex flex-col",
# ),
rx.el.div(