From b2847654f71ae4e084290ff5df2a823bd08c6500 Mon Sep 17 00:00:00 2001
From: miyanokomiya <tomoya.hstexze24632@gmail.com>
Date: Wed, 16 Oct 2024 17:55:59 +0900
Subject: [PATCH] feat: Add links to external icon providers

- GCP has become Google Cloud
---
 src/components/ShapeLibraryPanel.tsx           | 14 ++++++++++++--
 src/components/ShapeTemplatePanel.tsx          |  1 +
 src/components/molecules/ShapeLibraryGroup.tsx | 14 +++++++++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/ShapeLibraryPanel.tsx b/src/components/ShapeLibraryPanel.tsx
index 4d91190e..17a18c3b 100644
--- 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
index a94376ab..1e6d288e 100644
--- 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
index 53d82a89..f86f9a2c 100644
--- 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}