Skip to content

Commit 05b9396

Browse files
MrWangJustToDoMrWangJustToDo
committed
site update
1 parent cbdac4c commit 05b9396

File tree

3 files changed

+119
-28
lines changed

3 files changed

+119
-28
lines changed

‎ui/react-example/src/components/MainContentDiffExample.tsx‎

Lines changed: 80 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { generateDiffFile, DiffFile } from "@git-diff-view/file";
2-
import { Button, ButtonGroup, FloatingIndicator, Group, LoadingOverlay, Tooltip } from "@mantine/core";
2+
import { Button, ButtonGroup, Card, FloatingIndicator, Group, LoadingOverlay, Popover, Tooltip } from "@mantine/core";
33
import { useDisclosure } from "@mantine/hooks";
44
import { IconCode, IconPlayerPlay, IconRefresh, IconBrandReact, IconBrandVue } from "@tabler/icons-react";
5-
import { useState, startTransition, useCallback } from "react";
5+
import { useState, startTransition, useCallback, forwardRef } from "react";
66

77
import { useDiffHighlighter } from "../hooks/useDiffHighlighter";
88

@@ -27,6 +27,14 @@ export const MainContentDiffExample = () => {
2727

2828
const [platform, setPlatform] = useState<"react" | "vue">("react");
2929

30+
const [showCode, setShowCode] = useState(true);
31+
32+
const closeShowCode = () => setShowCode(false);
33+
34+
const [showPlatform, setShowPlatform] = useState(true);
35+
36+
const closePlatform = () => setShowPlatform(false);
37+
3038
const [loading, setLoading] = useState(false);
3139

3240
const refreshFile = () => {
@@ -46,22 +54,68 @@ export const MainContentDiffExample = () => {
4654

4755
const [controlsRefs, setControlsRefs] = useState<Record<string, HTMLButtonElement | null>>({});
4856

57+
const Element = forwardRef<HTMLButtonElement, any>(
58+
useCallback(
59+
({ onClick, ...props }, ref) => (
60+
<Tooltip label="show the code">
61+
<Button
62+
variant="light"
63+
size="compact-sm"
64+
onClick={(e) => {
65+
onClick?.(e);
66+
open();
67+
}}
68+
color="gray"
69+
ref={useCallback((node: HTMLButtonElement) => {
70+
if (typeof ref === "function") ref(node);
71+
else if (ref) ref.current = node;
72+
setControlsRefs((l) => ({ ...l, code: node }));
73+
}, [])}
74+
{...props}
75+
>
76+
<IconCode className="w-[1.2em]" />
77+
</Button>
78+
</Tooltip>
79+
),
80+
[]
81+
)
82+
);
83+
84+
const PlatformSwitchElement = forwardRef<HTMLButtonElement, any>(({ onClick, ...props }, ref) => (
85+
<Tooltip label="switch the platform">
86+
<Button
87+
variant="light"
88+
size="compact-sm"
89+
ref={ref}
90+
onClick={(e) => {
91+
onClick?.(e);
92+
setPlatform(platform === "react" ? "vue" : "react");
93+
}}
94+
{...props}
95+
>
96+
{platform === "react" ? <IconBrandReact className="w-[1.2em]" /> : <IconBrandVue className="w-[1.2em]" />}
97+
</Button>
98+
</Tooltip>
99+
));
100+
49101
return (
50102
<>
51103
<Group className="fixed right-6 top-2 z-10">
52104
<div ref={setRootRef}>
53105
<ButtonGroup>
54-
<Tooltip label="show the code">
55-
<Button
56-
variant="light"
57-
size="compact-sm"
58-
onClick={open}
59-
color="gray"
60-
ref={useCallback((node: HTMLButtonElement) => setControlsRefs((l) => ({ ...l, code: node })), [])}
61-
>
62-
<IconCode className="w-[1.2em]" />
63-
</Button>
64-
</Tooltip>
106+
<Popover withArrow opened={showCode} onClose={closeShowCode} closeOnClickOutside={false}>
107+
<Popover.Target>
108+
<Element onClick={closeShowCode} />
109+
</Popover.Target>
110+
<Popover.Dropdown className="animate-float">
111+
<Card>
112+
<Card.Section>Click to show the code ✨✨</Card.Section>
113+
</Card>
114+
<Button size="compact-sm" className="float-right" onClick={closeShowCode}>
115+
Close
116+
</Button>
117+
</Popover.Dropdown>
118+
</Popover>
65119
<Tooltip label="show the preview">
66120
<Button
67121
variant="light"
@@ -89,15 +143,19 @@ export const MainContentDiffExample = () => {
89143
</Button>
90144
</Tooltip>
91145
) : (
92-
<Tooltip label="switch the platform">
93-
<Button
94-
variant="light"
95-
size="compact-sm"
96-
onClick={() => setPlatform(platform === "react" ? "vue" : "react")}
97-
>
98-
{platform === "react" ? <IconBrandReact className="w-[1.2em]" /> : <IconBrandVue className="w-[1.2em]" />}
99-
</Button>
100-
</Tooltip>
146+
<Popover withArrow opened={showPlatform} onClose={closePlatform} closeOnClickOutside={false}>
147+
<Popover.Target>
148+
<PlatformSwitchElement onClick={closePlatform} />
149+
</Popover.Target>
150+
<Popover.Dropdown className="animate-float">
151+
<Card>
152+
<Card.Section>Click to show the other platform code ✨✨</Card.Section>
153+
</Card>
154+
<Button size="compact-sm" className="float-right" onClick={closePlatform}>
155+
Close
156+
</Button>
157+
</Popover.Dropdown>
158+
</Popover>
101159
)}
102160
</Group>
103161

‎ui/react-example/src/hooks/usePreviewType.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { createState } from "reactivity-store";
44
export const usePreviewType = createState(() => ({ type: "main" as "main" | "example" | "try" }), {
55
withActions: (s) => ({ set: (type: "main" | "example" | "try") => (s.type = type) }),
66
withNamespace: "usePreviewType",
7-
withPersist: "usePreviewType",
7+
// withPersist: "usePreviewType",
88
});
99

1010
const { set: setType } = usePreviewType.getActions();

‎ui/react-example/src/index.css‎

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,55 @@
66
color: inherit;
77
}
88

9-
[data-mantine-color-scheme='light'] .border-color {
9+
[data-mantine-color-scheme="light"] .border-color {
1010
border-color: var(--mantine-color-gray-3);
1111
}
1212

13-
[data-mantine-color-scheme='dark'] .border-color {
13+
[data-mantine-color-scheme="dark"] .border-color {
1414
border-color: var(--mantine-color-dark-4);
1515
}
1616

1717
.font-reset {
18-
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
18+
font-family:
19+
system-ui,
20+
-apple-system,
21+
BlinkMacSystemFont,
22+
"Segoe UI",
23+
Roboto,
24+
Oxygen,
25+
Ubuntu,
26+
Cantarell,
27+
"Open Sans",
28+
"Helvetica Neue",
29+
sans-serif;
1930
}
2031

2132
.font-reset * {
2233
font-family: inherit;
2334
}
2435

2536
.cm-gutter.cm-lineNumbers {
26-
font-size: .875em !important;
27-
}
37+
font-size: 0.875em !important;
38+
}
39+
40+
.animate-float {
41+
animation: float 4s linear infinite;
42+
}
43+
44+
@keyframes float {
45+
0% {
46+
transform: translateY(0px);
47+
}
48+
25% {
49+
transform: translateY(-3px);
50+
}
51+
50% {
52+
transform: translateY(0px);
53+
}
54+
75% {
55+
transform: translateY(3px);
56+
}
57+
100% {
58+
transform: translateY(0px);
59+
}
60+
}

0 commit comments

Comments
 (0)