-
Notifications
You must be signed in to change notification settings - Fork 160
/
index.tsx
111 lines (108 loc) · 2.82 KB
/
index.tsx
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
import { FC } from "react";
import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { useAntdTheme } from "@lepton-dashboard/hooks/use-antd-theme";
import { Button, Switch } from "antd";
import { CarbonIcon, LeptonFillIcon } from "@lepton-dashboard/components/icons";
import {
GithubOutlined,
ReadOutlined,
TwitterOutlined,
} from "@ant-design/icons";
import { AsleepFilled, LightFilled } from "@carbon/icons-react";
import { useInject } from "@lepton-libs/di";
import { ThemeService } from "@lepton-dashboard/services/theme.service";
const Container = styled.div`
height: 60px;
overflow: hidden;
display: flex;
align-items: center;
padding: 0 24px;
justify-content: space-between;
flex-wrap: wrap;
`;
const Logo = styled.div`
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin-right: 24px;
`;
const Text = styled.div`
margin-left: 8px;
cursor: default;
`;
const MenuContainer = styled.div`
flex: 1 1 auto;
height: 100%;
display: flex;
align-items: center;
justify-content: end;
`;
const ThemeContainer = styled.div`
display: flex;
align-items: center;
margin-left: 24px;
justify-content: center;
`;
export const Footer: FC = () => {
const theme = useAntdTheme();
const themeService = useInject(ThemeService);
return (
<Container
css={css`
border-top: 1px solid ${theme.colorBorder};
font-weight: normal;
background: ${theme.colorBgContainer};
`}
>
<Logo>
<LeptonFillIcon />
<Text>Lepton AI</Text>
</Logo>
<MenuContainer>
<Button
href="https://www.lepton.ai"
target="_blank"
type="text"
icon={<ReadOutlined />}
>
Documents
</Button>
<Button
type="text"
href="https://github.com/leptonai/lepton"
target="_blank"
icon={<GithubOutlined />}
>
Github
</Button>
<Button
type="text"
href="https://twitter.com/leptonai"
target="_blank"
icon={<TwitterOutlined />}
>
Twitter
</Button>
<ThemeContainer>
<Switch
size="small"
css={css`
background: ${theme.colorTextTertiary} !important;
.ant-switch-inner-checked,
.ant-switch-inner-unchecked {
color: ${theme.colorBgContainer} !important;
}
`}
checked={themeService.getValidTheme() === "dark"}
onChange={() => themeService.toggleTheme()}
unCheckedChildren={<CarbonIcon icon={<LightFilled />} />}
checkedChildren={<CarbonIcon icon={<AsleepFilled />} />}
/>
</ThemeContainer>
</MenuContainer>
</Container>
);
};