Create ExternalLink component

Author: ueokande

src/components/layout.tsx

@@ -4,7 +4,6 @@ import { Grommet } from "grommet";
 import type * as React from "react";
 import "./layout.css";
 import {
-  Anchor,
   Box,
   Button,
   Footer,
@@ -15,6 +14,7 @@ import {
   grommet,
 } from "grommet";
 import { Github as GithubIcon } from "grommet-icons";
+import { ExternalLink } from "./link";
 
 interface Props {
   children: React.ReactNode;
@@ -68,10 +68,8 @@ const AppHeader = () => {
         />
       </Box>
       <Box align="end">
-        <Anchor
+        <ExternalLink
           href="https://github.com/browser-actions"
-          target="_blank"
-          rel="noopener noreferrer"
           label="GitHub"
           icon={<GithubIcon />}
         />
@@ -85,22 +83,14 @@ const AppFooter = () => {
     <Footer background="dark-1" pad="medium" justify="between">
       <Text>
         Copyright by{" "}
-        <Anchor
-          href="https://github.com/ueokande"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
+        <ExternalLink href="https://github.com/ueokande">
           @ueokande
-        </Anchor>{" "}
+        </ExternalLink>{" "}
         and all contributors
       </Text>
-      <Anchor
-        href="https://github.com/browser-actions"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <ExternalLink href="https://github.com/browser-actions">
         GitHub
-      </Anchor>
+      </ExternalLink>
     </Footer>
   );
 };

src/components/link.tsx

@@ -0,0 +1,16 @@
+import { Anchor, type AnchorProps } from "grommet";
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+export const ExternalLink: React.FC<Props & AnchorProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <Anchor {...props} target="_blank" rel="noopener noreferrer">
+      {children}
+    </Anchor>
+  );
+};

src/templates/action.tsx

@@ -11,6 +11,7 @@ import {
 } from "grommet";
 import { Actions as ActionsIcon, Github as GithubIcon } from "grommet-icons";
 import { Layout } from "../components/layout";
+import { ExternalLink } from "../components/link";
 import { Seo } from "../components/seo";
 import type { ActionType } from "../types";
 
@@ -30,20 +31,14 @@ const ActionPage: React.FC<PageProps & Props> = ({ pageContext }) => {
       <Page kind="narrow" margin={{ vertical: "xlarge" }}>
         <PageContent>
           <Box direction="row" gap="medium" pad={{ bottom: "medium" }}>
-            <Anchor
+            <ExternalLink
               href={`https://github.com/marketplace/actions/${name}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              as="a"
               label="View action on Marketplace"
               icon={<ActionsIcon />}
               size="small"
             />
-            <Anchor
+            <ExternalLink
               href={`https://github.com/browser-actions/${name}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              as="a"
               label="View action on GitHub"
               icon={<GithubIcon />}
               size="small"