Skip to content

Commit 90d9203

Browse files
stevedylandevstevedylandev
committed
chore: lint and format
1 parent e1cb638 commit 90d9203

24 files changed

Lines changed: 2726 additions & 2698 deletions

‎src/app/(docs)/[...slug]/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export default async function Layout({
5858
return (
5959
<DocsLayout
6060
tree={currentTree}
61-
nav={{...baseOptions, mode: 'top', transparentMode: 'none'}}
61+
nav={{ ...baseOptions, mode: "top", transparentMode: "none" }}
6262
{...baseOptions}
6363
sidebar={{
6464
tabs: [

‎src/app/layout.config.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import type { BaseLayoutProps } from "@/components/layout/shared";
21
import { GlobeIcon, HomeIcon, MessageSquareMoreIcon } from "lucide-react";
2+
import type { BaseLayoutProps } from "@/components/layout/shared";
33

44
/**
55
* Shared layout configurations

‎src/components/language-toggle.tsx‎

Lines changed: 53 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,64 @@
1-
'use client';
2-
import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
3-
import { useI18n } from 'fumadocs-ui/contexts/i18n';
4-
import {
5-
Popover,
6-
PopoverContent,
7-
PopoverTrigger,
8-
} from './ui/popover';
9-
import { cn } from '../lib/cn';
10-
import { buttonVariants } from './ui/button';
1+
"use client";
2+
import { useI18n } from "fumadocs-ui/contexts/i18n";
3+
import type { ButtonHTMLAttributes, HTMLAttributes } from "react";
4+
import { cn } from "../lib/cn";
5+
import { buttonVariants } from "./ui/button";
6+
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
117

128
export type LanguageSelectProps = ButtonHTMLAttributes<HTMLButtonElement>;
139

1410
export function LanguageToggle(props: LanguageSelectProps): React.ReactElement {
15-
const context = useI18n();
16-
if (!context.locales) throw new Error('Missing `<I18nProvider />`');
11+
const context = useI18n();
12+
if (!context.locales) throw new Error("Missing `<I18nProvider />`");
1713

18-
return (
19-
<Popover>
20-
<PopoverTrigger
21-
aria-label={context.text.chooseLanguage}
22-
{...props}
23-
className={cn(
24-
buttonVariants({
25-
color: 'ghost',
26-
className: 'gap-1.5 p-1.5',
27-
}),
28-
props.className,
29-
)}
30-
>
31-
{props.children}
32-
</PopoverTrigger>
33-
<PopoverContent className="flex flex-col overflow-hidden p-0">
34-
<p className="mb-1 p-2 text-xs font-medium text-fd-muted-foreground">
35-
{context.text.chooseLanguage}
36-
</p>
37-
{context.locales.map((item) => (
38-
<button
39-
key={item.locale}
40-
type="button"
41-
className={cn(
42-
'p-2 text-start text-sm',
43-
item.locale === context.locale
44-
? 'bg-fd-primary/10 font-medium text-fd-primary'
45-
: 'hover:bg-fd-accent hover:text-fd-accent-foreground',
46-
)}
47-
onClick={() => {
48-
context.onChange?.(item.locale);
49-
}}
50-
>
51-
{item.name}
52-
</button>
53-
))}
54-
</PopoverContent>
55-
</Popover>
56-
);
14+
return (
15+
<Popover>
16+
<PopoverTrigger
17+
aria-label={context.text.chooseLanguage}
18+
{...props}
19+
className={cn(
20+
buttonVariants({
21+
color: "ghost",
22+
className: "gap-1.5 p-1.5",
23+
}),
24+
props.className,
25+
)}
26+
>
27+
{props.children}
28+
</PopoverTrigger>
29+
<PopoverContent className="flex flex-col overflow-hidden p-0">
30+
<p className="mb-1 p-2 text-xs font-medium text-fd-muted-foreground">
31+
{context.text.chooseLanguage}
32+
</p>
33+
{context.locales.map((item) => (
34+
<button
35+
key={item.locale}
36+
type="button"
37+
className={cn(
38+
"p-2 text-start text-sm",
39+
item.locale === context.locale
40+
? "bg-fd-primary/10 font-medium text-fd-primary"
41+
: "hover:bg-fd-accent hover:text-fd-accent-foreground",
42+
)}
43+
onClick={() => {
44+
context.onChange?.(item.locale);
45+
}}
46+
>
47+
{item.name}
48+
</button>
49+
))}
50+
</PopoverContent>
51+
</Popover>
52+
);
5753
}
5854

5955
export function LanguageToggleText(
60-
props: HTMLAttributes<HTMLSpanElement>,
56+
props: HTMLAttributes<HTMLSpanElement>,
6157
): React.ReactElement {
62-
const context = useI18n();
63-
const text = context.locales?.find(
64-
(item) => item.locale === context.locale,
65-
)?.name;
58+
const context = useI18n();
59+
const text = context.locales?.find(
60+
(item) => item.locale === context.locale,
61+
)?.name;
6662

67-
return <span {...props}>{text}</span>;
63+
return <span {...props}>{text}</span>;
6864
}

‎src/components/layout/docs/client.tsx‎

Lines changed: 117 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,138 @@
1-
'use client';
2-
import { cn } from '../../../lib/cn';
3-
import { type ComponentProps, useMemo } from 'react';
4-
import { useSidebar } from 'fumadocs-ui/contexts/sidebar';
5-
import { useNav } from 'fumadocs-ui/contexts/layout';
6-
import { buttonVariants } from '../../ui/button';
7-
import { Sidebar as SidebarIcon } from 'lucide-react';
8-
import Link from 'fumadocs-core/link';
9-
import { usePathname } from 'fumadocs-core/framework';
10-
import { isTabActive } from '../../../lib/is-active';
11-
import type { Option } from '../../root-toggle';
1+
"use client";
2+
import { usePathname } from "fumadocs-core/framework";
3+
import Link from "fumadocs-core/link";
4+
import { useNav } from "fumadocs-ui/contexts/layout";
5+
import { useSidebar } from "fumadocs-ui/contexts/sidebar";
6+
import { Sidebar as SidebarIcon } from "lucide-react";
7+
import { type ComponentProps, useId, useMemo } from "react";
8+
import { cn } from "../../../lib/cn";
9+
import { isTabActive } from "../../../lib/is-active";
10+
import type { Option } from "../../root-toggle";
11+
import { buttonVariants } from "../../ui/button";
1212

1313
export function Navbar({
14-
mode,
15-
...props
16-
}: ComponentProps<'header'> & { mode: 'top' | 'auto' }) {
17-
const { open, collapsed } = useSidebar();
18-
const { isTransparent } = useNav();
14+
mode,
15+
...props
16+
}: ComponentProps<"header"> & { mode: "top" | "auto" }) {
17+
const { open, collapsed } = useSidebar();
18+
const { isTransparent } = useNav();
19+
const subnavId = useId();
1920

20-
return (
21-
<header
22-
id="nd-subnav"
23-
{...props}
24-
className={cn(
25-
'fixed flex flex-col top-(--fd-banner-height) left-0 right-(--removed-body-scroll-bar-size,0) z-10 px-(--fd-layout-offset) h-(--fd-nav-height) backdrop-blur-sm transition-colors',
26-
(!isTransparent || open) && 'bg-fd-background/80',
27-
mode === 'auto' &&
28-
!collapsed &&
29-
'ps-[calc(var(--fd-layout-offset)+var(--fd-sidebar-width))]',
30-
props.className,
31-
)}
32-
>
33-
{props.children}
34-
</header>
35-
);
21+
return (
22+
<header
23+
id={subnavId}
24+
{...props}
25+
className={cn(
26+
"fixed flex flex-col top-(--fd-banner-height) left-0 right-(--removed-body-scroll-bar-size,0) z-10 px-(--fd-layout-offset) h-(--fd-nav-height) backdrop-blur-sm transition-colors",
27+
(!isTransparent || open) && "bg-fd-background/80",
28+
mode === "auto" &&
29+
!collapsed &&
30+
"ps-[calc(var(--fd-layout-offset)+var(--fd-sidebar-width))]",
31+
props.className,
32+
)}
33+
>
34+
{props.children}
35+
</header>
36+
);
3637
}
3738

38-
export function LayoutBody(props: ComponentProps<'main'>) {
39-
const { collapsed } = useSidebar();
39+
export function LayoutBody(props: ComponentProps<"main">) {
40+
const { collapsed } = useSidebar();
41+
const layoutId = useId();
4042

41-
return (
42-
<main
43-
id="nd-docs-layout"
44-
{...props}
45-
className={cn(
46-
'flex flex-1 flex-col transition-[padding] pt-(--fd-nav-height) fd-notebook-layout',
47-
!collapsed && 'mx-(--fd-layout-offset)',
48-
props.className,
49-
)}
50-
style={{
51-
...props.style,
52-
paddingInlineStart: collapsed
53-
? 'min(calc(100vw - var(--fd-page-width)), var(--fd-sidebar-width))'
54-
: 'var(--fd-sidebar-width)',
55-
}}
56-
>
57-
{props.children}
58-
</main>
59-
);
43+
return (
44+
<main
45+
id={layoutId}
46+
{...props}
47+
className={cn(
48+
"flex flex-1 flex-col transition-[padding] pt-(--fd-nav-height) fd-notebook-layout",
49+
!collapsed && "mx-(--fd-layout-offset)",
50+
props.className,
51+
)}
52+
style={{
53+
...props.style,
54+
paddingInlineStart: collapsed
55+
? "min(calc(100vw - var(--fd-page-width)), var(--fd-sidebar-width))"
56+
: "var(--fd-sidebar-width)",
57+
}}
58+
>
59+
{props.children}
60+
</main>
61+
);
6062
}
6163

6264
export function NavbarSidebarTrigger({
63-
className,
64-
...props
65-
}: ComponentProps<'button'>) {
66-
const { setOpen } = useSidebar();
65+
className,
66+
...props
67+
}: ComponentProps<"button">) {
68+
const { setOpen } = useSidebar();
6769

68-
return (
69-
<button
70-
{...props}
71-
className={cn(
72-
buttonVariants({
73-
color: 'ghost',
74-
size: 'icon-sm',
75-
className,
76-
}),
77-
)}
78-
onClick={() => setOpen((prev) => !prev)}
79-
>
80-
<SidebarIcon />
81-
</button>
82-
);
70+
return (
71+
<button
72+
{...props}
73+
className={cn(
74+
buttonVariants({
75+
color: "ghost",
76+
size: "icon-sm",
77+
className,
78+
}),
79+
)}
80+
onClick={() => setOpen((prev) => !prev)}
81+
>
82+
<SidebarIcon />
83+
</button>
84+
);
8385
}
8486

8587
export function LayoutTabs({
86-
options,
87-
...props
88-
}: ComponentProps<'div'> & {
89-
options: Option[];
88+
options,
89+
...props
90+
}: ComponentProps<"div"> & {
91+
options: Option[];
9092
}) {
91-
const pathname = usePathname();
92-
const selected = useMemo(() => {
93-
return options.findLast((option) => isTabActive(option, pathname));
94-
}, [options, pathname]);
93+
const pathname = usePathname();
94+
const selected = useMemo(() => {
95+
return options.findLast((option) => isTabActive(option, pathname));
96+
}, [options, pathname]);
9597

96-
return (
97-
<div
98-
{...props}
99-
className={cn(
100-
'flex flex-row items-end gap-6 overflow-auto',
101-
props.className,
102-
)}
103-
>
104-
{options.map((option) => (
105-
<LayoutTab
106-
key={option.url}
107-
selected={selected === option}
108-
option={option}
109-
/>
110-
))}
111-
</div>
112-
);
98+
return (
99+
<div
100+
{...props}
101+
className={cn(
102+
"flex flex-row items-end gap-6 overflow-auto",
103+
props.className,
104+
)}
105+
>
106+
{options.map((option) => (
107+
<LayoutTab
108+
key={option.url}
109+
selected={selected === option}
110+
option={option}
111+
/>
112+
))}
113+
</div>
114+
);
113115
}
114116

115117
function LayoutTab({
116-
option: { title, url, unlisted, props },
117-
selected = false,
118+
option: { title, url, unlisted, props },
119+
selected = false,
118120
}: {
119-
option: Option;
120-
selected?: boolean;
121+
option: Option;
122+
selected?: boolean;
121123
}) {
122-
return (
123-
<Link
124-
href={url}
125-
{...props}
126-
className={cn(
127-
'inline-flex border-b-2 border-transparent transition-colors items-center pb-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap hover:text-fd-accent-foreground',
128-
unlisted && !selected && 'hidden',
129-
selected && 'border-fd-primary text-fd-primary',
130-
props?.className,
131-
)}
132-
>
133-
{title}
134-
</Link>
135-
);
124+
return (
125+
<Link
126+
href={url}
127+
{...props}
128+
className={cn(
129+
"inline-flex border-b-2 border-transparent transition-colors items-center pb-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap hover:text-fd-accent-foreground",
130+
unlisted && !selected && "hidden",
131+
selected && "border-fd-primary text-fd-primary",
132+
props?.className,
133+
)}
134+
>
135+
{title}
136+
</Link>
137+
);
136138
}

0 commit comments

Comments
 (0)