use crate::components::SiteHeader; use leptos::prelude::*; use leptos_meta::Style; use leptos_router::{ components::Outlet, hooks::{use_location, use_navigate}, }; use thaw::*; #[component] pub fn ComponentsPage() -> impl IntoView { let navigate = use_navigate(); let loaction = use_location(); let select_name = RwSignal::new(String::new()); Effect::new(move |_| { select_name.set(loaction.pathname.get()); }); _ = select_name.watch(move |name| { let pathname = loaction.pathname.get_untracked(); if &pathname != name { navigate(name, Default::default()); } }); view! {
{ gen_menu_data().into_iter().map(|data| { let MenuGroupOption { label, children } = data; view! { {label} { children.into_iter().map(|item| { let MenuItemOption { label, value } = item; view! { {label} } }).collect_view() } } }).collect_view() }
} } pub(crate) struct MenuGroupOption { pub label: String, pub children: Vec, } pub(crate) struct MenuItemOption { pub label: String, pub value: String, } pub(crate) fn gen_menu_data() -> Vec { vec![ MenuGroupOption { label: "Getting Started".into(), children: vec![ MenuItemOption { value: "/guide/installation".into(), label: "Installation".into(), }, MenuItemOption { value: "/guide/server-sider-rendering".into(), label: "Server Sider Rendering".into(), }, ], }, // MenuGroupOption { // label: "Development".into(), // children: vec![ // MenuItemOption { // value: "/guide/development/components".into(), // label: "Components".into(), // }, // ], // }, MenuGroupOption { label: "Components".into(), children: vec![ MenuItemOption { value: "/components/accordion".into(), label: "Accordion".into(), }, MenuItemOption { value: "/components/anchor".into(), label: "Anchor".into(), }, MenuItemOption { value: "/components/auto-complete".into(), label: "Auto Complete".into(), }, MenuItemOption { value: "/components/avatar".into(), label: "Avatar".into(), }, MenuItemOption { value: "/components/back-top".into(), label: "Back Top".into(), }, MenuItemOption { value: "/components/badge".into(), label: "Badge".into(), }, MenuItemOption { value: "/components/breadcrumb".into(), label: "Breadcrumb".into(), }, MenuItemOption { value: "/components/button".into(), label: "Button".into(), }, MenuItemOption { value: "/components/calendar".into(), label: "Calendar".into(), }, MenuItemOption { value: "/components/card".into(), label: "Card".into(), }, MenuItemOption { value: "/components/checkbox".into(), label: "Checkbox".into(), }, MenuItemOption { value: "/components/color-picker".into(), label: "Color Picker".into(), }, MenuItemOption { value: "/components/combobox".into(), label: "Combobox".into(), }, MenuItemOption { value: "/components/config-provider".into(), label: "Config Provider".into(), }, MenuItemOption { value: "/components/date-picker".into(), label: "Date Picker".into(), }, MenuItemOption { value: "/components/dialog".into(), label: "Dialog".into(), }, MenuItemOption { value: "/components/divider".into(), label: "Divider".into(), }, MenuItemOption { value: "/components/drawer".into(), label: "Drawer".into(), }, MenuItemOption { value: "/components/grid".into(), label: "Grid".into(), }, MenuItemOption { value: "/components/icon".into(), label: "Icon".into(), }, MenuItemOption { value: "/components/image".into(), label: "Image".into(), }, MenuItemOption { value: "/components/input".into(), label: "Input".into(), }, MenuItemOption { value: "/components/layout".into(), label: "Layout".into(), }, MenuItemOption { value: "/components/loading-bar".into(), label: "Loading Bar".into(), }, MenuItemOption { value: "/components/menu".into(), label: "Menu".into(), }, MenuItemOption { value: "/components/message-bar".into(), label: "Message Bar".into(), }, MenuItemOption { value: "/components/nav".into(), label: "Nav".into(), }, MenuItemOption { value: "pagination".into(), label: "Pagination".into(), }, MenuItemOption { value: "/components/popover".into(), label: "Popover".into(), }, MenuItemOption { value: "/components/progress-bar".into(), label: "ProgressBar".into(), }, MenuItemOption { value: "/components/radio".into(), label: "Radio".into(), }, MenuItemOption { value: "/components/scrollbar".into(), label: "Scrollbar".into(), }, MenuItemOption { value: "/components/skeleton".into(), label: "Skeleton".into(), }, MenuItemOption { value: "/components/slider".into(), label: "Slider".into(), }, MenuItemOption { value: "/components/space".into(), label: "Space".into(), }, MenuItemOption { value: "/components/spin-button".into(), label: "Spin Button".into(), }, MenuItemOption { value: "/components/spinner".into(), label: "Spinner".into(), }, MenuItemOption { value: "/components/switch".into(), label: "Switch".into(), }, MenuItemOption { value: "/components/tab-list".into(), label: "Tab List".into(), }, MenuItemOption { value: "/components/table".into(), label: "Table".into(), }, MenuItemOption { value: "/components/tag".into(), label: "Tag".into(), }, MenuItemOption { value: "/components/text".into(), label: "Text".into(), }, MenuItemOption { value: "/components/textarea".into(), label: "Textarea".into(), }, MenuItemOption { value: "/components/time-picker".into(), label: "Time Picker".into(), }, MenuItemOption { value: "/components/toast".into(), label: "Toast".into(), }, MenuItemOption { value: "/components/upload".into(), label: "Upload".into(), }, ], }, // MenuGroupOption { // label: "Mobile Components".into(), // children: vec![ // MenuItemOption { // value: "/components/nav-bar".into(), // label: "Nav Bar".into(), // }, // MenuItemOption { // value: "/components/tabbar".into(), // label: "Tabbar".into(), // }, // MenuItemOption { // value: "/components/toast".into(), // label: "Toast".into(), // }, // ], // }, ] }