write-siderBar.tsx
3.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import { useMobileScreen } from "@/app/utils";
import dynamic from "next/dynamic";
import {
SideBarContainer,
SideBarBody,
SideBarHeader,
useDragSideBar,
useHotKey,
} from "@/app/components/sidebar";
import { IconButton } from "@/app/components/button";
import ReturnIcon from "@/app/icons/return.svg";
import HistoryIcon from "@/app/icons/history.svg";
import Locale from "@/app/locales";
import { Path } from "@/app/constant";
import { useNavigate } from "react-router-dom";
import SDIcon from "@/app/icons/sd.svg";
export interface WriteSiderBarProps {
className?: string;
htmlCode: string;
setHtmlCode: React.Dispatch<React.SetStateAction<string>>;
loading: boolean;
setLoading: React.Dispatch<React.SetStateAction<boolean>>;
setWidth: React.Dispatch<React.SetStateAction<string>>;
setHtmlheader: React.Dispatch<React.SetStateAction<string>>;
}
const WritingPanel = dynamic(
async () => (await import("@/app/components/writing")).WritingPanel,
{
loading: () => null,
},
);
export function WriteSiderBar(props: WriteSiderBarProps) {
const {
className,
htmlCode,
setHtmlCode,
loading,
setLoading,
setWidth,
setHtmlheader,
} = props;
const isMobileScreen = useMobileScreen();
const { onDragStart, shouldNarrow } = useDragSideBar();
const navigate = useNavigate();
useHotKey();
return (
<>
<SideBarContainer
onDragStart={onDragStart}
shouldNarrow={shouldNarrow}
{...props}
>
{isMobileScreen ? (
<div
className="window-header"
data-tauri-drag-region
style={{
paddingLeft: 0,
paddingRight: 0,
}}
>
<div className="window-actions">
<div className="window-action-button">
<IconButton
icon={<ReturnIcon />}
bordered
title={Locale.Sd.Actions.ReturnHome}
onClick={() => navigate(Path.Home)}
/>
</div>
</div>
<SDIcon width={50} height={50} />
<div className="window-actions">
<div className="window-action-button">
<IconButton
icon={<HistoryIcon />}
bordered
title={Locale.Sd.Actions.History}
onClick={() => navigate(Path.SdNew)}
/>
</div>
</div>
</div>
) : (
<SideBarHeader
title={
<IconButton
icon={<ReturnIcon />}
bordered
title={Locale.Sd.Actions.ReturnHome}
onClick={() => navigate(Path.Home)}
/>
}
logo={<SDIcon width={38} height={"100%"} />}
></SideBarHeader>
)}
<SideBarBody>
<WritingPanel
htmlCode={htmlCode}
setHtmlCode={setHtmlCode}
loading={loading}
setLoading={setLoading}
setWidth={setWidth}
setHtmlheader={setHtmlheader}
/>
</SideBarBody>
</SideBarContainer>
</>
);
}