opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: support links with custom icons (#11629)

Browse Source
This commit is contained in:
Marcin Tojek
2024-01-15 16:56:01 +01:00
committed by GitHub
parent 5c310ec334
commit f915bdf26c
8 changed files with 46 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.stories.tsx
+1
View File
@@ -13,6 +13,7 @@ const meta: Meta<typeof UserDropdown> = {
{ icon: "docs", name: "Documentation", target: "" },
{ icon: "bug", name: "Report a bug", target: "" },
{ icon: "chat", name: "Join the Coder Discord", target: "" },
{ icon: "/icon/aws.svg", name: "Amazon Web Services", target: "" },
],
},
};
site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
+20 -3
View File
@@ -17,6 +17,7 @@ import {
type Theme,
} from "@emotion/react";
import { usePopover } from "components/Popover/Popover";
import { ExternalImage } from "components/ExternalImage/ExternalImage";
export const Language = {
accountLabel: "Account",
@@ -98,6 +99,24 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
popover.setIsOpen(false);
};
const renderMenuIcon = (icon: string): JSX.Element => {
switch (icon) {
case "bug":
return <BugIcon css={styles.menuItemIcon} />;
case "chat":
return <ChatIcon css={styles.menuItemIcon} />;
case "docs":
return <DocsIcon css={styles.menuItemIcon} />;
default:
return (
<ExternalImage
src={icon}
css={{ maxWidth: "20px", maxHeight: "20px" }}
/>
);
}
};
return (
<div>
<Stack css={styles.info} spacing={0}>
@@ -131,9 +150,7 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
css={styles.link}
>
<MenuItem css={styles.menuItem} onClick={onPopoverClose}>
{link.icon === "bug" && <BugIcon css={styles.menuItemIcon} />}
{link.icon === "chat" && <ChatIcon css={styles.menuItemIcon} />}
{link.icon === "docs" && <DocsIcon css={styles.menuItemIcon} />}
{renderMenuIcon(link.icon)}
<span css={styles.menuItemText}>{link.name}</span>
</MenuItem>
</a>