Extract and refactor a few more topbar componetns

BrunoQuaresma · BrunoQuaresma · commit 4ed5550cb373 · 2023-12-14T18:44:39.000Z
diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx
@@ -1,6 +1,7 @@
 import Button, { ButtonProps } from "@mui/material/Button";
 import IconButton, { IconButtonProps } from "@mui/material/IconButton";
 import { useTheme } from "@mui/material/styles";
+import { Avatar, AvatarProps } from "components/Avatar/Avatar";
 import { HTMLAttributes, forwardRef } from "react";
 
 export const Topbar = (props: HTMLAttributes<HTMLDivElement>) => {
@@ -56,7 +57,7 @@ export const TopbarButton = (props: ButtonProps) => {
   );
 };
 
-export const TopbarDataGroup = (props: HTMLAttributes<HTMLDivElement>) => {
+export const TopbarData = (props: HTMLAttributes<HTMLDivElement>) => {
   return (
     <div
       {...props}
@@ -78,3 +79,14 @@ export const TopbarDivider = (props: HTMLAttributes<HTMLSpanElement>) => {
     </span>
   );
 };
+
+export const TopbarAvatar = (props: AvatarProps) => {
+  return (
+    <Avatar
+      {...props}
+      variant="square"
+      fitImage
+      css={{ width: 16, height: 16 }}
+    />
+  );
+};
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -12,7 +12,6 @@ import type {
 } from "api/typesGenerated";
 import { Link as RouterLink } from "react-router-dom";
 import { Alert, AlertDetail } from "components/Alert/Alert";
-import { Avatar } from "components/Avatar/Avatar";
 import { TemplateResourcesTable } from "components/TemplateResourcesTable/TemplateResourcesTable";
 import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs";
 import { PublishVersionData } from "pages/TemplateVersionEditorPage/types";
@@ -47,8 +46,9 @@ import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { Loader } from "components/Loader/Loader";
 import {
   Topbar,
+  TopbarAvatar,
   TopbarButton,
-  TopbarDataGroup,
+  TopbarData,
   TopbarDivider,
   TopbarIconButton,
 } from "components/FullPageLayout/Topbar";
@@ -201,13 +201,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
             </Tooltip>
           </div>
 
-          <TopbarDataGroup>
-            <Avatar
-              src={template.icon}
-              variant="square"
-              fitImage
-              css={{ width: 16, height: 16 }}
-            />
+          <TopbarData>
+            <TopbarAvatar src={template.icon} />
             <RouterLink
               to={`/templates/${template.name}`}
               css={{
@@ -225,7 +220,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
             <span css={{ color: theme.palette.text.secondary }}>
               {templateVersion.name}
             </span>
-          </TopbarDataGroup>
+          </TopbarData>
 
           <div
             css={{
