dioxus_docs_kit/components/blog/
post_nav.rs

1use dioxus::prelude::*;
2
3use crate::BlogContext;
4use crate::blog::registry::BlogRegistry;
5
6/// Previous/Next post navigation.
7#[component]
8pub fn BlogPostNav(current_slug: String) -> Element {
9    let registry = use_context::<&'static BlogRegistry>();
10    let ctx = use_context::<BlogContext>();
11
12    let prev = registry.prev_post(&current_slug);
13    let next = registry.next_post(&current_slug);
14
15    rsx! {
16        nav { class: "mt-16 pt-8 border-t border-base-300 flex justify-between gap-4",
17            div { class: "flex-1",
18                if let Some(prev) = prev {
19                    {
20                        let href = format!("{}/{}", ctx.base_path, prev.slug);
21                        rsx! {
22                            Link {
23                                to: NavigationTarget::Internal(href),
24                                class: "group flex flex-col p-4 rounded-lg border border-base-300 hover:border-primary/50 hover:bg-base-200/50 transition-all",
25                                span { class: "text-xs text-base-content/50 mb-1", "Older" }
26                                span { class: "font-medium group-hover:text-primary transition-colors",
27                                    "{prev.frontmatter.title}"
28                                }
29                            }
30                        }
31                    }
32                }
33            }
34
35            div { class: "flex-1 text-right",
36                if let Some(next) = next {
37                    {
38                        let href = format!("{}/{}", ctx.base_path, next.slug);
39                        rsx! {
40                            Link {
41                                to: NavigationTarget::Internal(href),
42                                class: "group flex flex-col p-4 rounded-lg border border-base-300 hover:border-primary/50 hover:bg-base-200/50 transition-all items-end",
43                                span { class: "text-xs text-base-content/50 mb-1", "Newer" }
44                                span { class: "font-medium group-hover:text-primary transition-colors",
45                                    "{next.frontmatter.title}"
46                                }
47                            }
48                        }
49                    }
50                }
51            }
52        }
53    }
54}
dioxus_docs_kit/components/blog/post_nav.rs

dioxus_docs_kit/components/blog/
post_nav.rs
