UI: fix footer.children props

This commit is contained in:
Fuma Nama
2026-01-07 00:01:58 +08:00
parent b3306b4121
commit 9f06196f1c
9 changed files with 86 additions and 61 deletions
+6
View File
@@ -0,0 +1,6 @@
---
"fumadocs-ui": patch
"@fumadocs/base-ui": patch
---
fix `footer.children` props
@@ -234,7 +234,7 @@ export interface FooterProps extends ComponentProps<'div'> {
};
}
export function PageFooter({ items, ...props }: FooterProps) {
export function PageFooter({ items, children, className, ...props }: FooterProps) {
const footerList = useFooterItems();
const pathname = usePathname();
@@ -251,17 +251,20 @@ export function PageFooter({ items, ...props }: FooterProps) {
}, [footerList, items, pathname]);
return (
<div
{...props}
className={cn(
'@container grid gap-4',
previous && next ? 'grid-cols-2' : 'grid-cols-1',
props.className,
)}
>
{previous ? <FooterItem item={previous} index={0} /> : null}
{next ? <FooterItem item={next} index={1} /> : null}
</div>
<>
<div
className={cn(
'@container grid gap-4',
previous && next ? 'grid-cols-2' : 'grid-cols-1',
className,
)}
{...props}
>
{previous && <FooterItem item={previous} index={0} />}
{next && <FooterItem item={next} index={1} />}
</div>
{children}
</>
);
}
@@ -45,7 +45,9 @@ export interface DocsPageProps {
breadcrumb?: Partial<BreadcrumbOptions>;
/**
* Footer navigation, you can disable it by passing `false`
* Footer navigation, located under the page body.
*
* You can specify `footer.children` to add extra components under the footer.
*/
footer?: Partial<FooterOptions>;
@@ -81,7 +83,7 @@ type TableOfContentPopoverOptions = Omit<TableOfContentOptions, 'single'>;
export function DocsPage({
breadcrumb: { enabled: breadcrumbEnabled = true, component: breadcrumb, ...breadcrumbProps } = {},
footer = {},
footer: { enabled: footerEnabled, component: footerReplace, ...footerProps } = {},
full = false,
tableOfContentPopover: {
enabled: tocPopoverEnabled,
@@ -142,7 +144,7 @@ export function DocsPage({
>
{breadcrumbEnabled && (breadcrumb ?? <PageBreadcrumb {...breadcrumbProps} />)}
{children}
{footer.enabled !== false && (footer.component ?? <PageFooter items={footer.items} />)}
{footerEnabled !== false && (footerReplace ?? <PageFooter {...footerProps} />)}
</article>
{tocEnabled &&
(tocReplace ?? (
@@ -234,7 +234,7 @@ export interface FooterProps extends ComponentProps<'div'> {
};
}
export function PageFooter({ items, ...props }: FooterProps) {
export function PageFooter({ items, children, className, ...props }: FooterProps) {
const footerList = useFooterItems();
const pathname = usePathname();
const { previous, next } = useMemo(() => {
@@ -250,17 +250,20 @@ export function PageFooter({ items, ...props }: FooterProps) {
}, [footerList, items, pathname]);
return (
<div
{...props}
className={cn(
'@container grid gap-4',
previous && next ? 'grid-cols-2' : 'grid-cols-1',
props.className,
)}
>
{previous ? <FooterItem item={previous} index={0} /> : null}
{next ? <FooterItem item={next} index={1} /> : null}
</div>
<>
<div
className={cn(
'@container grid gap-4',
previous && next ? 'grid-cols-2' : 'grid-cols-1',
className,
)}
{...props}
>
{previous && <FooterItem item={previous} index={0} />}
{next && <FooterItem item={next} index={1} />}
</div>
{children}
</>
);
}
@@ -45,7 +45,9 @@ export interface DocsPageProps {
breadcrumb?: Partial<BreadcrumbOptions>;
/**
* Footer navigation, you can disable it by passing `false`
* Footer navigation, located under the page body.
*
* You can specify `footer.children` to add extra components under the footer.
*/
footer?: Partial<FooterOptions>;
@@ -81,7 +83,7 @@ type TableOfContentPopoverOptions = Omit<TableOfContentOptions, 'single'>;
export function DocsPage({
breadcrumb: { enabled: breadcrumbEnabled = true, component: breadcrumb, ...breadcrumbProps } = {},
footer = {},
footer: { enabled: footerEnabled, component: footerReplace, ...footerProps } = {},
full = false,
tableOfContentPopover: {
enabled: tocPopoverEnabled,
@@ -142,7 +144,7 @@ export function DocsPage({
>
{breadcrumbEnabled && (breadcrumb ?? <PageBreadcrumb {...breadcrumbProps} />)}
{children}
{footer.enabled !== false && (footer.component ?? <PageFooter items={footer.items} />)}
{footerEnabled !== false && (footerReplace ?? <PageFooter {...footerProps} />)}
</article>
{tocEnabled &&
(tocReplace ?? (
@@ -234,10 +234,9 @@ export interface FooterProps extends ComponentProps<'div'> {
};
}
export function PageFooter({ items, ...props }: FooterProps) {
export function PageFooter({ items, children, className, ...props }: FooterProps) {
const footerList = useFooterItems();
const pathname = usePathname();
const { previous, next } = useMemo(() => {
if (items) return items;
@@ -251,17 +250,20 @@ export function PageFooter({ items, ...props }: FooterProps) {
}, [footerList, items, pathname]);
return (
<div
{...props}
className={cn(
'@container grid gap-4',
previous && next ? 'grid-cols-2' : 'grid-cols-1',
props.className,
)}
>
{previous ? <FooterItem item={previous} index={0} /> : null}
{next ? <FooterItem item={next} index={1} /> : null}
</div>
<>
<div
className={cn(
'@container grid gap-4',
previous && next ? 'grid-cols-2' : 'grid-cols-1',
className,
)}
{...props}
>
{previous && <FooterItem item={previous} index={0} />}
{next && <FooterItem item={next} index={1} />}
</div>
{children}
</>
);
}
@@ -45,7 +45,9 @@ export interface DocsPageProps {
breadcrumb?: Partial<BreadcrumbOptions>;
/**
* Footer navigation, you can disable it by passing `false`
* Footer navigation, located under the page body.
*
* You can specify `footer.children` to add extra components under the footer.
*/
footer?: Partial<FooterOptions>;
@@ -81,7 +83,7 @@ type TableOfContentPopoverOptions = Omit<TableOfContentOptions, 'single'>;
export function DocsPage({
breadcrumb: { enabled: breadcrumbEnabled = true, component: breadcrumb, ...breadcrumbProps } = {},
footer = {},
footer: { enabled: footerEnabled, component: footerReplace, ...footerProps } = {},
full = false,
tableOfContentPopover: {
enabled: tocPopoverEnabled,
@@ -142,7 +144,7 @@ export function DocsPage({
>
{breadcrumbEnabled && (breadcrumb ?? <PageBreadcrumb {...breadcrumbProps} />)}
{children}
{footer.enabled !== false && (footer.component ?? <PageFooter items={footer.items} />)}
{footerEnabled !== false && (footerReplace ?? <PageFooter {...footerProps} />)}
</article>
{tocEnabled &&
(tocReplace ?? (
@@ -234,7 +234,7 @@ export interface FooterProps extends ComponentProps<'div'> {
};
}
export function PageFooter({ items, ...props }: FooterProps) {
export function PageFooter({ items, children, className, ...props }: FooterProps) {
const footerList = useFooterItems();
const pathname = usePathname();
const { previous, next } = useMemo(() => {
@@ -250,17 +250,20 @@ export function PageFooter({ items, ...props }: FooterProps) {
}, [footerList, items, pathname]);
return (
<div
{...props}
className={cn(
'@container grid gap-4',
previous && next ? 'grid-cols-2' : 'grid-cols-1',
props.className,
)}
>
{previous ? <FooterItem item={previous} index={0} /> : null}
{next ? <FooterItem item={next} index={1} /> : null}
</div>
<>
<div
className={cn(
'@container grid gap-4',
previous && next ? 'grid-cols-2' : 'grid-cols-1',
className,
)}
{...props}
>
{previous && <FooterItem item={previous} index={0} />}
{next && <FooterItem item={next} index={1} />}
</div>
{children}
</>
);
}
@@ -45,7 +45,9 @@ export interface DocsPageProps {
breadcrumb?: Partial<BreadcrumbOptions>;
/**
* Footer navigation, you can disable it by passing `false`
* Footer navigation, located under the page body.
*
* You can specify `footer.children` to add extra components under the footer.
*/
footer?: Partial<FooterOptions>;
@@ -81,7 +83,7 @@ type TableOfContentPopoverOptions = Omit<TableOfContentOptions, 'single'>;
export function DocsPage({
breadcrumb: { enabled: breadcrumbEnabled = true, component: breadcrumb, ...breadcrumbProps } = {},
footer = {},
footer: { enabled: footerEnabled, component: footerReplace, ...footerProps } = {},
full = false,
tableOfContentPopover: {
enabled: tocPopoverEnabled,
@@ -142,7 +144,7 @@ export function DocsPage({
>
{breadcrumbEnabled && (breadcrumb ?? <PageBreadcrumb {...breadcrumbProps} />)}
{children}
{footer.enabled !== false && (footer.component ?? <PageFooter items={footer.items} />)}
{footerEnabled !== false && (footerReplace ?? <PageFooter {...footerProps} />)}
</article>
{tocEnabled &&
(tocReplace ?? (