[WEB-4829] refactor: star us on GitHub link component (#7697)

* [WEB-4829] refactor: star us on github link

* fix: review comment

---------

Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>

apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx

@@ -1,28 +1,22 @@
 "use client";
 
 import { observer } from "mobx-react";
-import Image from "next/image";
-import { useTheme } from "next-themes";
 import { Home, Shapes } from "lucide-react";
-// images
+// plane imports
-import githubBlackImage from "/public/logos/github-black.png";
-import githubWhiteImage from "/public/logos/github-white.png";
-// ui
-import { GITHUB_REDIRECTED_TRACKER_EVENT, HEADER_GITHUB_ICON } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Breadcrumbs, Button, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
-// constants
 // hooks
-import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
 import { useHome } from "@/hooks/store/use-home";
+// local imports
+import { StarUsOnGitHubLink } from "./star-us-link";
 
 export const WorkspaceDashboardHeader = observer(() => {
-  // hooks
+  // plane hooks
-  const { resolvedTheme } = useTheme();
-  const { toggleWidgetSettings } = useHome();
   const { t } = useTranslation();
+  // hooks
+  const { toggleWidgetSettings } = useHome();
 
   return (
     <>
@@ -48,31 +42,7 @@ export const WorkspaceDashboardHeader = observer(() => {
             <Shapes size={16} />
             <div className="hidden text-xs font-medium sm:hidden md:block">{t("home.manage_widgets")}</div>
           </Button>
-          <a
+          <StarUsOnGitHubLink />
-            onClick={() =>
-              captureElementAndEvent({
-                element: {
-                  elementName: HEADER_GITHUB_ICON,
-                },
-                event: {
-                  eventName: GITHUB_REDIRECTED_TRACKER_EVENT,
-                  state: "SUCCESS",
-                },
-              })
-            }
-            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
-            href="https://github.com/makeplane/plane"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              src={resolvedTheme === "dark" ? githubWhiteImage : githubBlackImage}
-              height={16}
-              width={16}
-              alt="GitHub Logo"
-            />
-            <span className="hidden text-xs font-medium sm:hidden md:block">{t("home.star_us_on_github")}</span>
-          </a>
         </Header.RightItem>
       </Header>
     </>

apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// plane imports
+import { HEADER_GITHUB_ICON, GITHUB_REDIRECTED_TRACKER_EVENT } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// helpers
+import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
+// public imports
+import githubBlackImage from "@/public/logos/github-black.png";
+import githubWhiteImage from "@/public/logos/github-white.png";
+
+export const StarUsOnGitHubLink = () => {
+  // plane hooks
+  const { t } = useTranslation();
+  // hooks
+  const { resolvedTheme } = useTheme();
+  const imageSrc = resolvedTheme === "dark" ? githubWhiteImage : githubBlackImage;
+
+  return (
+    <a
+      aria-label={t("home.star_us_on_github")}
+      onClick={() =>
+        captureElementAndEvent({
+          element: {
+            elementName: HEADER_GITHUB_ICON,
+          },
+          event: {
+            eventName: GITHUB_REDIRECTED_TRACKER_EVENT,
+            state: "SUCCESS",
+          },
+        })
+      }
+      className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
+      href="https://github.com/makeplane/plane"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <Image src={imageSrc} height={16} width={16} alt="GitHub Logo" aria-hidden="true" />
+      <span className="hidden text-xs font-medium sm:hidden md:block">{t("home.star_us_on_github")}</span>
+    </a>
+  );
+};