Skip to content

Commit 1be11b2

Browse files
macci001macci001
committed
chore: putting back the callout to toc
1 parent 1eef6a3 commit 1be11b2

File tree

3 files changed

+60
-60
lines changed

3 files changed

+60
-60
lines changed

‎apps/docs/app/docs/[[...slug]]/page.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {Route} from "@/libs/docs/page";
1111
import {GITHUB_URL, REPO_NAME} from "@/libs/github/constants";
1212
import {CONTENT_PATH, TAG} from "@/libs/docs/config";
1313
import {getHeadings} from "@/libs/docs/utils";
14-
import {NextUIProCallout} from "@/components/docs/nextui-pro-callout";
1514

1615
interface DocPageProps {
1716
params: {
@@ -103,7 +102,6 @@ export default async function DocPage({params}: DocPageProps) {
103102
{headings && headings.length > 0 && (
104103
<div className="hidden z-10 xl:flex xl:col-span-2 mt-8 pl-0">
105104
<DocsToc headings={headings} />
106-
<NextUIProCallout />
107105
</div>
108106
)}
109107
</>

‎apps/docs/components/docs/nextui-pro-callout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const NextUIProCallout = () => {
1414
};
1515

1616
return (
17-
<div className="fixed flex flex-col items-center top-[calc(100vh-340px)] border border-default/60 hover:border-default/90 rounded-md py-6 px-2 m-2 cursor-pointer">
17+
<div className="relative w-full max-w-[12rem] flex flex-col items-center border border-default/60 hover:border-default/90 rounded-xl py-6 px-2 cursor-pointer">
1818
<div>
1919
<p className="leading-tight tracking-tight text-center text-xl font-semibold">
2020
Ship&nbsp;

‎apps/docs/components/docs/toc.tsx

+59-57
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import {Divider, Spacer} from "@nextui-org/react";
66
import {ChevronCircleTopLinearIcon} from "@nextui-org/shared-icons";
77
import scrollIntoView from "scroll-into-view-if-needed";
88

9+
import {NextUIProCallout} from "./nextui-pro-callout";
10+
911
import {Heading} from "@/libs/docs/utils";
1012
import {useScrollSpy} from "@/hooks/use-scroll-spy";
1113
import {useScrollPosition} from "@/hooks/use-scroll-position";
@@ -65,64 +67,64 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
6567
}, []);
6668

6769
return (
68-
<div
69-
ref={tocRef}
70-
className={clsx(
71-
"fixed w-full max-w-[12rem] flex flex-col gap-4 text-left pb-28 h-[calc(100vh-460px)] scrollbar-hide overflow-y-scroll",
72-
isProBannerVisible ? "top-32" : "top-20",
73-
)}
74-
style={{
75-
WebkitMaskImage: `linear-gradient(to top, transparent 0%, #000 100px, #000 ${
76-
scrollPosition > 30 ? "90%" : "100%"
77-
}, transparent 100%)`,
78-
}}
79-
>
80-
<p className="text-sm font-medium">On this page</p>
81-
<ul className="scrollbar-hide flex flex-col gap-2">
82-
{headings.map(
83-
(heading, i) =>
84-
heading.level > 1 && (
85-
<li
86-
key={i}
87-
className={clsx(
88-
"transition-colors",
89-
"font-normal",
90-
"flex items-center text-tiny font-normal text-default-500 dark:text-default-300",
91-
"data-[active=true]:text-foreground",
92-
"dark:data-[active=true]:text-foreground",
93-
"before:content-['']",
94-
"before:opacity-0",
95-
"data-[active=true]:before:opacity-100",
96-
"before:transition-opacity",
97-
"before:-ml-3",
98-
"before:absolute",
99-
"before:bg-default-400",
100-
"before:w-1",
101-
"before:h-1",
102-
"before:rounded-full",
103-
paddingLeftByLevel[heading.level],
104-
)}
105-
data-active={activeId == heading.id}
106-
>
107-
<a href={`#${heading.id}`}>{heading.text}</a>
108-
</li>
109-
),
110-
)}
111-
<li
112-
className="mt-2 opacity-0 data-[visible=true]:opacity-100 transition-opacity"
113-
data-visible={activeIndex >= 2}
114-
>
115-
<Divider />
116-
<Spacer y={2} />
117-
<a
118-
className="flex gap-2 items-center text-tiny text-default-500 dark:text-foreground/30 hover:text-foreground/80 pl-4 transition-opacity"
119-
href={`#${firstId}`}
70+
<div className={clsx("fixed", isProBannerVisible ? "top-32" : "top-20")}>
71+
<div
72+
ref={tocRef}
73+
className="w-full max-w-[12rem] max-h-[calc(100vh-500px)] flex flex-col gap-4 text-left pb-16 scrollbar-hide overflow-y-scroll"
74+
style={{
75+
WebkitMaskImage: `linear-gradient(to top, transparent 0%, #000 100px, #000 ${
76+
scrollPosition > 30 ? "90%" : "100%"
77+
}, transparent 100%)`,
78+
}}
79+
>
80+
<p className="text-sm font-medium">On this page</p>
81+
<ul className="scrollbar-hide flex flex-col gap-2">
82+
{headings.map(
83+
(heading, i) =>
84+
heading.level > 1 && (
85+
<li
86+
key={i}
87+
className={clsx(
88+
"transition-colors",
89+
"font-normal",
90+
"flex items-center text-tiny font-normal text-default-500 dark:text-default-300",
91+
"data-[active=true]:text-foreground",
92+
"dark:data-[active=true]:text-foreground",
93+
"before:content-['']",
94+
"before:opacity-0",
95+
"data-[active=true]:before:opacity-100",
96+
"before:transition-opacity",
97+
"before:-ml-3",
98+
"before:absolute",
99+
"before:bg-default-400",
100+
"before:w-1",
101+
"before:h-1",
102+
"before:rounded-full",
103+
paddingLeftByLevel[heading.level],
104+
)}
105+
data-active={activeId == heading.id}
106+
>
107+
<a href={`#${heading.id}`}>{heading.text}</a>
108+
</li>
109+
),
110+
)}
111+
<li
112+
className="mt-2 opacity-0 data-[visible=true]:opacity-100 transition-opacity"
113+
data-visible={activeIndex >= 2}
120114
>
121-
Back to top
122-
<ChevronCircleTopLinearIcon />
123-
</a>
124-
</li>
125-
</ul>
115+
<Divider />
116+
<Spacer y={2} />
117+
<a
118+
className="flex gap-2 items-center text-tiny text-default-500 dark:text-foreground/30 hover:text-foreground/80 pl-4 transition-opacity"
119+
href={`#${firstId}`}
120+
>
121+
Back to top
122+
<ChevronCircleTopLinearIcon />
123+
</a>
124+
</li>
125+
</ul>
126+
</div>
127+
<NextUIProCallout />
126128
</div>
127129
);
128130
};

0 commit comments

Comments
 (0)