[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>
This commit is contained in:
Prateek Shourya 2025-09-02 13:54:13 +05:30 committed by GitHub
parent d960d7ce88
commit 50b4aca726
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 51 additions and 37 deletions

View file

@ -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
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";
// plane imports
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
const { resolvedTheme } = useTheme();
const { toggleWidgetSettings } = useHome();
// plane hooks
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
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>
<StarUsOnGitHubLink />
</Header.RightItem>
</Header>
</>

View file

@ -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>
);
};