feat: add GitHub link button to floating actions

Author: psd-coder

packages/core/src/components/GitHubLink/GitHubLink.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+
+import { MGithub } from "@core/components/Icon/MGithub";
+
+import buttonStyles from "../Button/Button.module.css";
+
+const GITHUB_URL = "https://github.com/evilmartians/harmonizer";
+
+export function GitHubLink() {
+  return (
+    <a
+      href={GITHUB_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="GitHub"
+      className={clsx(buttonStyles.button, buttonStyles.kind_floating, buttonStyles.size_m)}
+    >
+      <MGithub className={buttonStyles.icon} />
+    </a>
+  );
+}

packages/core/src/components/Icon/MGithub.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export type MGithubProps = SVGProps<SVGSVGElement>;
+
+export function MGithub(props: MGithubProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 2C4.685 2 2 4.753 2 8.1518c0 2.7221 1.7175 5.0213 4.1025 5.8364.3.0539.4125-.1307.4125-.2922 0-.1461-.0075-.6305-.0075-1.1457C5 12.8348 4.61 12.1735 4.49 11.8274c-.0675-.1768-.36-.7228-.615-.8689-.21-.1153-.51-.3999-.0075-.4075.4725-.0077.81.446.9225.6305.54.9305 1.4025.669 1.7475.5075.0525-.3998.21-.669.3825-.8228-1.335-.1538-2.73-.6844-2.73-3.0374 0-.669.2325-1.2227.615-1.6533-.06-.1538-.27-.7843.06-1.6302 0 0 .5025-.1615 1.65.6305.48-.1384.99-.2076 1.5-.2076s1.02.0692 1.5.2076c1.1475-.7997 1.65-.6305 1.65-.6305.33.8459.12 1.4764.06 1.6302.3825.4306.615.9766.615 1.6533 0 2.3607-1.4025 2.8836-2.7375 3.0374.2175.1923.405.5614.405 1.1381 0 .8228-.0075 1.4841-.0075 1.6917 0 .1615.1125.3538.4125.2922C12.2825 13.1731 14 10.8662 14 8.1518 14 4.7529 11.315 2 8 2"
+      />
+    </svg>
+  );
+}

packages/figma-plugin/src/ui/components/FigmaPluginActions/FigmaPluginActions.tsx

@@ -2,6 +2,7 @@ import { useSubscribe } from "@spred/react";
 import { pluginChannel } from "@ui/pluginChannel";
 
 import { Button } from "@core/components/Button/Button";
+import { GitHubLink } from "@core/components/GitHubLink/GitHubLink";
 import { ExportImportMenu } from "@core/components/ExportImportMenu/ExportImportMenu";
 import { ExportConfigsList } from "@core/components/ExportImportMenu/items/ExportConfigsList";
 import { OpenInWebApp } from "@core/components/ExportImportMenu/items/OpenInWebApp";
@@ -43,6 +44,7 @@ export function FigmaPluginActions({ hasPalette }: FigmaPluginActionsProps) {
           <ExportConfigsList />
         </MenuItemGroup>
       </ExportImportMenu>
+      <GitHubLink />
     </>
   );
 }

packages/web-app/src/components/WebAppActions/WebAppActions.tsx

@@ -3,6 +3,7 @@ import { useCallback, useState } from "react";
 import { trackEvent } from "@web-app/plausible";
 
 import { Button } from "@core/components/Button/Button";
+import { GitHubLink } from "@core/components/GitHubLink/GitHubLink";
 import { ExportImportMenu } from "@core/components/ExportImportMenu/ExportImportMenu";
 import { ExportConfigsList } from "@core/components/ExportImportMenu/items/ExportConfigsList";
 import { PasteWebAppUrl } from "@core/components/ExportImportMenu/items/PasteWebAppUrl";
@@ -50,6 +51,7 @@ export function WebAppActions() {
           />
         </MenuItemGroup>
       </ExportImportMenu>
+      <GitHubLink />
     </>
   );
 }