feat: Add links to external icon providers

- GCP has become Google Cloud
miyanokomiya · Oct 16, 2024 · b284765 · b284765
1 parent 0a70634
commit b284765
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/src/components/ShapeLibraryPanel.tsx b/src/components/ShapeLibraryPanel.tsx
@@ -7,7 +7,15 @@ import { newShapeComposite } from "../composables/shapeComposite";
 import { AffineMatrix, getRectCenter } from "okageo";
 import { Size } from "../models";
 
-const ICON_GROUPS = ["AWS", "Cisco", "GCP"];
+const ICON_GROUPS = [
+  { name: "AWS", label: "AWS", url: "https://aws.amazon.com/architecture/icons/" },
+  {
+    name: "Cisco",
+    label: "Cisco",
+    url: "https://www.cisco.com/c/en/us/about/brand-center/network-topology-icons.html",
+  },
+  { name: "GCP", label: "Google Cloud", url: "https://cloud.google.com/icons" },
+];
 
 export const ShapeLibraryPanel: React.FC = () => {
   const getCtx = useContext(GetAppStateContext);
@@ -123,11 +131,13 @@ export const ShapeLibraryPanel: React.FC = () => {
 
   return (
     <div className={"transition-opacity" + (stateLabel === "DroppingNewShape" ? " opacity-30" : "")}>
-      {ICON_GROUPS.map((name) => (
+      {ICON_GROUPS.map(({ name, label, url }) => (
         <GroupAccordion
           key={name}
           selectedName={selected}
           name={name}
+          label={label}
+          url={url}
           type="shapes"
           onClick={handleClickAccordion}
           onIconDragStart={handleIconDragStart}

diff --git a/src/components/ShapeTemplatePanel.tsx b/src/components/ShapeTemplatePanel.tsx
@@ -134,6 +134,7 @@ export const ShapeTemplatePanel: React.FC = () => {
           key={name}
           selectedName={selected}
           name={name}
+          label={name}
           type="templates"
           size="lg"
           onClick={handleClickAccordion}

diff --git a/src/components/molecules/ShapeLibraryGroup.tsx b/src/components/molecules/ShapeLibraryGroup.tsx
@@ -13,6 +13,8 @@ const baseURL = process.env.ASSETS_PATH!;
 interface GroupAccordionProps {
   selectedName: string;
   name: string;
+  label: string;
+  url?: string;
   type: "shapes" | "templates";
   size?: "md" | "lg";
   onClick?: (name: string) => void;
@@ -23,6 +25,8 @@ interface GroupAccordionProps {
 export const GroupAccordion: React.FC<GroupAccordionProps> = ({
   selectedName,
   name,
+  label,
+  url,
   type,
   size,
   onClick,
@@ -36,10 +40,18 @@ export const GroupAccordion: React.FC<GroupAccordionProps> = ({
   return (
     <div>
       <button type="button" onClick={handleClick} className="border rounded p-2 w-full text-left">
-        {name}
+        {label}
       </button>
       {selectedName === name ? (
         <div className="pl-2">
+          {url ? (
+            <div className="text-right">
+              <span>From </span>
+              <a href={url} target="_blank" rel="noopener" className="mb-2 text-blue-500 underline font-semibold">
+                {label}
+              </a>
+            </div>
+          ) : undefined}
           <ShapeLibraryGroup
             name={name.toLowerCase()}
             type={type}