bg-siderBar.tsx
3.8 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
114
115
116
import { useMobileScreen } from "@/app/utils";
import dynamic from "next/dynamic";
import {
SideBarContainer,
SideBarBody,
SideBarHeader,
SideBarTail,
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";
import type { LocalData } from '@/app/types/zuotang';
import { ApiPath } from '@/app/constant';
import { message } from 'antd';
const BgPanel = dynamic(
async () => (await import("@/app/components/bgRemoval")).BgPanel,
{
loading: () => null,
},
);
export interface BgSiderBarProps {
className?: string;
fileData: Blob | null;
setFileData: React.Dispatch<React.SetStateAction<Blob | null>>;
previewUrl: string | null;
setPreviewUrl: React.Dispatch<React.SetStateAction<string | null>>;
isLoading: boolean;
setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
}
export function BgSiderBar(props: BgSiderBarProps) {
const isMobileScreen = useMobileScreen();
const { onDragStart, shouldNarrow } = useDragSideBar();
const navigate = useNavigate();
useHotKey();
const {
className,
fileData,
setFileData,
previewUrl,
setPreviewUrl,
isLoading,
setIsLoading,
} = props;
return (
<SideBarContainer
onDragStart={onDragStart}
shouldNarrow={shouldNarrow}
className={className}
>
{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>
<BgPanel
fileData={fileData}
setFileData={setFileData}
previewUrl={previewUrl}
setPreviewUrl={setPreviewUrl}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
</SideBarBody>
</SideBarContainer>
)
}