Skip to content

Commit bbc983e

Browse files
KianNHKianNH
committed
formatting
1 parent c43a0cb commit bbc983e

File tree

2 files changed

+94
-90
lines changed

2 files changed

+94
-90
lines changed

‎src/components/CopyPageButton.tsx‎

Lines changed: 93 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,106 @@
11
import {
2-
useFloating,
3-
useInteractions,
4-
useClick,
5-
useDismiss,
6-
shift,
7-
offset,
8-
autoUpdate,
9-
FloatingPortal,
2+
useFloating,
3+
useInteractions,
4+
useClick,
5+
useDismiss,
6+
shift,
7+
offset,
8+
autoUpdate,
9+
FloatingPortal,
1010
} from "@floating-ui/react";
1111
import { useState } from "react";
12-
import { PiMarkdownLogo, PiClipboardTextLight, PiArrowSquareOutLight } from "react-icons/pi";
12+
import {
13+
PiMarkdownLogo,
14+
PiClipboardTextLight,
15+
PiArrowSquareOutLight,
16+
} from "react-icons/pi";
1317

1418
export default function CopyPageButton() {
15-
const [isOpen, setIsOpen] = useState(false);
19+
const [isOpen, setIsOpen] = useState(false);
1620

17-
const { refs, floatingStyles, context } = useFloating({
18-
open: isOpen,
19-
onOpenChange: setIsOpen,
20-
middleware: [shift(), offset(5)],
21-
whileElementsMounted: autoUpdate,
22-
});
21+
const { refs, floatingStyles, context } = useFloating({
22+
open: isOpen,
23+
onOpenChange: setIsOpen,
24+
middleware: [shift(), offset(5)],
25+
whileElementsMounted: autoUpdate,
26+
});
2327

24-
const click = useClick(context);
25-
const dismiss = useDismiss(context);
28+
const click = useClick(context);
29+
const dismiss = useDismiss(context);
2630

27-
const { getReferenceProps, getFloatingProps } = useInteractions([
28-
click,
29-
dismiss,
30-
]);
31+
const { getReferenceProps, getFloatingProps } = useInteractions([
32+
click,
33+
dismiss,
34+
]);
3135

32-
const handleViewMarkdown = () => {
33-
const markdownUrl = new URL("index.md", window.location.href).toString();
34-
window.open(markdownUrl, "_blank");
35-
};
36+
const handleViewMarkdown = () => {
37+
const markdownUrl = new URL("index.md", window.location.href).toString();
38+
window.open(markdownUrl, "_blank");
39+
};
3640

37-
const handleCopyMarkdown = async () => {
38-
const markdownUrl = new URL("index.md", window.location.href).toString();
39-
try {
40-
const response = await fetch(markdownUrl);
41-
const markdown = await response.text();
42-
await navigator.clipboard.writeText(markdown);
43-
} catch (error) {
44-
console.error("Failed to copy Markdown:", error);
45-
}
46-
};
41+
const handleCopyMarkdown = async () => {
42+
const markdownUrl = new URL("index.md", window.location.href).toString();
43+
try {
44+
const response = await fetch(markdownUrl);
45+
const markdown = await response.text();
46+
await navigator.clipboard.writeText(markdown);
47+
} catch (error) {
48+
console.error("Failed to copy Markdown:", error);
49+
}
50+
};
4751

48-
const options = [
49-
{
50-
label: "Copy Page as Markdown",
51-
description: "Copy the raw Markdown content to clipboard",
52-
icon: PiClipboardTextLight,
53-
onClick: handleCopyMarkdown,
54-
},
55-
{
56-
label: "View Page as Markdown",
57-
description: "Open the Markdown file in a new tab",
58-
icon: PiArrowSquareOutLight,
59-
onClick: handleViewMarkdown,
60-
},
61-
];
52+
const options = [
53+
{
54+
label: "Copy Page as Markdown",
55+
description: "Copy the raw Markdown content to clipboard",
56+
icon: PiClipboardTextLight,
57+
onClick: handleCopyMarkdown,
58+
},
59+
{
60+
label: "View Page as Markdown",
61+
description: "Open the Markdown file in a new tab",
62+
icon: PiArrowSquareOutLight,
63+
onClick: handleViewMarkdown,
64+
},
65+
];
6266

63-
return (
64-
<>
65-
<button
66-
ref={refs.setReference}
67-
{...getReferenceProps()}
68-
className="inline-flex bg-transparent items-center justify-center text-sm h-8 gap-2 rounded border border-[--sl-color-hairline] px-3 text-black"
69-
>
70-
Copy Page
71-
<PiMarkdownLogo />
72-
</button>
73-
{isOpen && (
74-
<FloatingPortal>
75-
<ul
76-
ref={refs.setFloating}
77-
style={floatingStyles}
78-
{...getFloatingProps()}
79-
className="list-none rounded border border-[--sl-color-hairline] bg-[--sl-color-bg] pl-0 shadow-md min-w-[240px]"
80-
>
81-
{options.map(({ label, description, icon: Icon, onClick }) => (
82-
<li key={label}>
83-
<button
84-
onClick={onClick}
85-
className="block w-full px-3 bg-transparent py-2 text-left text-black no-underline hover:bg-[--sl-color-bg-nav]"
86-
>
87-
<div className="flex items-center gap-2 text-sm">
88-
<Icon className="h-4 w-4" />
89-
{label}
90-
</div>
91-
<div className="text-xs text-[--sl-color-gray-3] mt-0.5 ml-6">
92-
{description}
93-
</div>
94-
</button>
95-
</li>
96-
))}
97-
</ul>
98-
</FloatingPortal>
99-
)}
100-
</>
101-
);
67+
return (
68+
<>
69+
<button
70+
ref={refs.setReference}
71+
{...getReferenceProps()}
72+
className="inline-flex h-8 items-center justify-center gap-2 rounded border border-[--sl-color-hairline] bg-transparent px-3 text-sm text-black"
73+
>
74+
Copy Page
75+
<PiMarkdownLogo />
76+
</button>
77+
{isOpen && (
78+
<FloatingPortal>
79+
<ul
80+
ref={refs.setFloating}
81+
style={floatingStyles}
82+
{...getFloatingProps()}
83+
className="min-w-[240px] list-none rounded border border-[--sl-color-hairline] bg-[--sl-color-bg] pl-0 shadow-md"
84+
>
85+
{options.map(({ label, description, icon: Icon, onClick }) => (
86+
<li key={label}>
87+
<button
88+
onClick={onClick}
89+
className="block w-full bg-transparent px-3 py-2 text-left text-black no-underline hover:bg-[--sl-color-bg-nav]"
90+
>
91+
<div className="flex items-center gap-2 text-sm">
92+
<Icon className="h-4 w-4" />
93+
{label}
94+
</div>
95+
<div className="ml-6 mt-0.5 text-xs text-[--sl-color-gray-3]">
96+
{description}
97+
</div>
98+
</button>
99+
</li>
100+
))}
101+
</ul>
102+
</FloatingPortal>
103+
)}
104+
</>
105+
);
102106
}

‎src/components/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export { default as AvailableNotifications } from "./AvailableNotifications.astr
1111
export { default as CompatibilityFlag } from "./CompatibilityFlag.astro";
1212
export { default as CompatibilityFlags } from "./CompatibilityFlags.astro";
1313
export { default as ComponentsUsage } from "./ComponentsUsage.astro";
14-
export { default as CopyPageButton } from "./CopyPageButton";
14+
export { default as CopyPageButton } from "./CopyPageButton.tsx";
1515
export { default as CURL } from "./CURL.astro";
1616
export { default as Description } from "./Description.astro";
1717
export { default as Details } from "./Details.astro";

0 commit comments

Comments
 (0)