Skip to content

Commit 84f1bc4

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Extract a few components to topbar module
1 parent 43411d2 commit 84f1bc4

File tree

3 files changed

+99
-45
lines changed

3 files changed

+99
-45
lines changed

‎.vscode/settings.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
"contravariance",
2222
"cronstrue",
2323
"databasefake",
24-
"dbmem",
2524
"dbgen",
25+
"dbmem",
2626
"dbtype",
2727
"DERP",
2828
"derphttp",
@@ -118,13 +118,13 @@
118118
"stretchr",
119119
"STTY",
120120
"stuntest",
121-
"tanstack",
122121
"tailbroker",
123122
"tailcfg",
124123
"tailexchange",
125124
"tailnet",
126125
"tailnettest",
127126
"Tailscale",
127+
"tanstack",
128128
"tbody",
129129
"TCGETS",
130130
"tcpip",
@@ -141,6 +141,7 @@
141141
"tios",
142142
"tmpdir",
143143
"tokenconfig",
144+
"Topbar",
144145
"tparallel",
145146
"trialer",
146147
"trimprefix",

‎site/src/components/FullPageLayout/Topbar.tsx

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import Button, { ButtonProps } from "@mui/material/Button";
2+
import IconButton, { IconButtonProps } from "@mui/material/IconButton";
3+
import { useTheme } from "@mui/material/styles";
4+
import { HTMLAttributes, forwardRef } from "react";
5+
6+
export const Topbar = (props: HTMLAttributes<HTMLDivElement>) => {
7+
const theme = useTheme();
8+
9+
return (
10+
<header
11+
{...props}
12+
css={{
13+
height: 48,
14+
borderBottom: `1px solid ${theme.palette.divider}`,
15+
display: "flex",
16+
alignItems: "center",
17+
fontSize: 13,
18+
lineHeight: "1.2",
19+
}}
20+
/>
21+
);
22+
};
23+
24+
export const TopbarIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
25+
(props, ref) => {
26+
return (
27+
<IconButton
28+
ref={ref}
29+
{...props}
30+
size="small"
31+
css={{
32+
padding: "0 16px",
33+
borderRadius: 0,
34+
height: 48,
35+
36+
"& svg": {
37+
fontSize: 20,
38+
},
39+
}}
40+
/>
41+
);
42+
},
43+
) as typeof IconButton;
44+
45+
export const TopbarButton = (props: ButtonProps) => {
46+
return (
47+
<Button
48+
{...props}
49+
css={{
50+
height: 28,
51+
fontSize: 13,
52+
borderRadius: 4,
53+
padding: "0 12px",
54+
}}
55+
/>
56+
);
57+
};
58+
59+
export const TopbarDataGroup = (props: HTMLAttributes<HTMLDivElement>) => {
60+
return (
61+
<div
62+
{...props}
63+
css={{
64+
display: "flex",
65+
gap: 8,
66+
alignItems: "center",
67+
justifyContent: "center",
68+
}}
69+
/>
70+
);
71+
};
72+
73+
export const TopbarDivider = (props: HTMLAttributes<HTMLSpanElement>) => {
74+
const theme = useTheme();
75+
return (
76+
<span {...props} css={{ color: theme.palette.divider }}>
77+
/
78+
</span>
79+
);
80+
};

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

Lines changed: 16 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Button, { type ButtonProps } from "@mui/material/Button";
1+
import Button from "@mui/material/Button";
22
import IconButton from "@mui/material/IconButton";
33
import Tooltip from "@mui/material/Tooltip";
44
import CreateIcon from "@mui/icons-material/AddOutlined";
@@ -45,6 +45,13 @@ import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
4545
import CloseOutlined from "@mui/icons-material/CloseOutlined";
4646
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
4747
import { Loader } from "components/Loader/Loader";
48+
import {
49+
Topbar,
50+
TopbarButton,
51+
TopbarDataGroup,
52+
TopbarDivider,
53+
TopbarIconButton,
54+
} from "components/FullPageLayout/Topbar";
4855

4956
type Tab = "logs" | "resources" | undefined; // Undefined is to hide the tab
5057

@@ -176,42 +183,25 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
176183
return (
177184
<>
178185
<div css={{ height: "100%", display: "flex", flexDirection: "column" }}>
179-
<div
186+
<Topbar
180187
css={{
181-
height: 48,
182-
borderBottom: `1px solid ${theme.palette.divider}`,
183188
display: "grid",
184189
gridTemplateColumns: "1fr 2fr 1fr",
185-
alignItems: "center",
186190
}}
187191
data-testid="topbar"
188192
>
189193
<div>
190194
<Tooltip title="Back to the template">
191-
<IconButton
195+
<TopbarIconButton
192196
component={RouterLink}
193197
to={`/templates/${template.name}`}
194-
size="small"
195-
css={{
196-
padding: "0 16px",
197-
borderRadius: 0,
198-
height: 48,
199-
}}
200198
>
201-
<ArrowBackOutlined css={{ width: 20, height: 20 }} />
202-
</IconButton>
199+
<ArrowBackOutlined />
200+
</TopbarIconButton>
203201
</Tooltip>
204202
</div>
205203

206-
<div
207-
css={{
208-
fontSize: 13,
209-
display: "flex",
210-
gap: 8,
211-
alignItems: "center",
212-
justifyContent: "center",
213-
}}
214-
>
204+
<TopbarDataGroup>
215205
<Avatar
216206
src={template.icon}
217207
variant="square"
@@ -231,11 +221,11 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
231221
>
232222
{template.display_name || template.name}
233223
</RouterLink>
234-
<span css={{ color: theme.palette.divider }}>/</span>
224+
<TopbarDivider />
235225
<span css={{ color: theme.palette.text.secondary }}>
236226
{templateVersion.name}
237227
</span>
238-
</div>
228+
</TopbarDataGroup>
239229

240230
<div
241231
css={{
@@ -273,7 +263,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
273263
Publish
274264
</TopbarButton>
275265
</div>
276-
</div>
266+
</Topbar>
277267

278268
<div
279269
css={{
@@ -458,7 +448,6 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
458448
<div
459449
css={{
460450
borderTop: `1px solid ${theme.palette.divider}`,
461-
462451
overflow: "hidden",
463452
display: "flex",
464453
flexDirection: "column",
@@ -644,22 +633,6 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
644633
);
645634
};
646635

647-
const TopbarButton: FC<ButtonProps> = ({ children, ...buttonProps }) => {
648-
return (
649-
<Button
650-
{...buttonProps}
651-
css={{
652-
height: 28,
653-
fontSize: 13,
654-
borderRadius: 4,
655-
padding: "0 12px",
656-
}}
657-
>
658-
{children}
659-
</Button>
660-
);
661-
};
662-
663636
const styles = {
664637
tab: (theme) => ({
665638
"&:not(:disabled)": {

0 commit comments

Comments
 (0)