mirror of
https://github.com/hanzo-docs/docs.git
synced 2026-10-25 04:20:02 +00:00
UI: fix footer.children props
This commit is contained in:
@@ -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 ?? (
|
||||
|
||||
Reference in New Issue
Block a user