refactor: use standardized Link component for registry links

f0ssel · claude · f0ssel · commit 3d1c952dc926 · 2025-06-30T16:39:07.000-04:00
Replace custom styled links with the existing Link component that: - Provides consistent styling and behavior - Includes proper external link icon (SquareArrowOutUpRightIcon) - Has built-in accessibility features and focus states - Removes duplicate custom CSS for link styling 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
@@ -5,10 +5,10 @@ import CardContent from "@mui/material/CardContent";
 import Stack from "@mui/material/Stack";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
+import { Link } from "components/Link/Link";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
-import { ExternalLinkIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import type { StarterTemplatesByTag } from "utils/starterTemplates";
@@ -26,15 +26,13 @@ export const CreateTemplateGalleryPageView: FC<
 		<Margins>
 			<PageHeader
 				actions={
-					<a
+					<Link
 						href="https://registry.coder.com"
 						target="_blank"
 						rel="noopener noreferrer"
-						css={styles.registryLink}
 					>
 						Browse the Coder Registry
-						<ExternalLinkIcon className="size-4" />
-					</a>
+					</Link>
 				}
 			>
 				<PageHeaderTitle>Create a Template</PageHeaderTitle>
@@ -132,19 +130,4 @@ const styles = {
 		width: 20,
 		height: 20,
 	}),
-
-	registryLink: (theme) => ({
-		display: "flex",
-		alignItems: "center",
-		gap: 8,
-		color: theme.palette.text.secondary,
-		textDecoration: "none",
-		fontSize: 14,
-		fontWeight: 500,
-
-		"&:hover": {
-			color: theme.palette.text.primary,
-			textDecoration: "underline",
-		},
-	}),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -22,10 +22,11 @@ import {
 	TopbarIconButton,
 } from "components/FullPageLayout/Topbar";
 import { displayError } from "components/GlobalSnackbar/utils";
+import { Link } from "components/Link/Link";
 import { Loader } from "components/Loader/Loader";
 import { TriangleAlertIcon } from "lucide-react";
 import { ChevronLeftIcon } from "lucide-react";
-import { PlayIcon, PlusIcon, XIcon, ExternalLinkIcon } from "lucide-react";
+import { PlayIcon, PlusIcon, XIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
 import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
@@ -274,15 +275,13 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 							/>
 						</div>
 
-						<a
+						<Link
 							href="https://registry.coder.com"
 							target="_blank"
 							rel="noopener noreferrer"
-							css={styles.registryLink}
 						>
 							Browse the Coder Registry
-							<ExternalLinkIcon className="size-4" />
-						</a>
+						</Link>
 
 						<TopbarButton
 							variant="default"
@@ -804,19 +803,4 @@ const styles = {
 			},
 		},
 	},
-
-	registryLink: (theme) => ({
-		display: "flex",
-		alignItems: "center",
-		gap: 8,
-		color: theme.palette.text.secondary,
-		textDecoration: "none",
-		fontSize: 14,
-		fontWeight: 500,
-
-		"&:hover": {
-			color: theme.palette.text.primary,
-			textDecoration: "underline",
-		},
-	}),
 } satisfies Record<string, Interpolation<Theme>>;
