66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import { ThemedLayoutV2, ThemedSiderV2, ThemedTitleV2 } from "@refinedev/antd";
|
|
import { Header } from "./header";
|
|
import { Footer } from "antd/es/layout/layout";
|
|
import { Version } from "./version";
|
|
import { Button } from "antd";
|
|
import Logo from "../icon.svg?react";
|
|
import { useTranslate } from "@refinedev/core";
|
|
|
|
const SpoolmanFooter: React.FC = () => {
|
|
const t = useTranslate();
|
|
|
|
return (
|
|
<Footer style={{ textAlign: "center" }}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
gap: "2em",
|
|
}}
|
|
>
|
|
<div>
|
|
{t("version")} <Version />
|
|
</div>
|
|
<div>
|
|
<Button
|
|
icon={
|
|
<img
|
|
src="/kofi_s_logo_nolabel.png"
|
|
style={{
|
|
height: "1.6em",
|
|
}}
|
|
/>
|
|
}
|
|
type="text"
|
|
href="https://ko-fi.com/donkie"
|
|
target="_blank"
|
|
>
|
|
{t("kofi")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Footer>
|
|
);
|
|
};
|
|
|
|
interface SpoolmanLayoutProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const SpoolmanLayout: React.FC<SpoolmanLayoutProps> = ({ children }) => (
|
|
<ThemedLayoutV2
|
|
Header={() => <Header sticky />}
|
|
Sider={() => (
|
|
<ThemedSiderV2
|
|
fixed
|
|
Title={({ collapsed }) => <ThemedTitleV2 collapsed={collapsed} text="Spoolman" icon={<Logo />} />}
|
|
/>
|
|
)}
|
|
Footer={() => <SpoolmanFooter />}
|
|
>
|
|
{children}
|
|
</ThemedLayoutV2>
|
|
);
|