From 29fc7c419ba8ef9bdf1bb072a3756794c69b09bd Mon Sep 17 00:00:00 2001
From: Stijn Groenen <git@stijngroenen.nl>
Date: Sun, 21 Jul 2024 21:17:18 +0200
Subject: [PATCH] feat(templates): added url support for custom fields

---
 apps/artboard/src/templates/azurill.tsx   |  8 +++++++-
 apps/artboard/src/templates/bronzor.tsx   |  8 +++++++-
 apps/artboard/src/templates/chikorita.tsx |  8 +++++++-
 apps/artboard/src/templates/ditto.tsx     |  8 +++++++-
 apps/artboard/src/templates/gengar.tsx    |  8 +++++++-
 apps/artboard/src/templates/glalie.tsx    |  8 +++++++-
 apps/artboard/src/templates/kakuna.tsx    |  8 +++++++-
 apps/artboard/src/templates/leafish.tsx   |  8 +++++++-
 apps/artboard/src/templates/nosepass.tsx  | 12 ++++++++++--
 apps/artboard/src/templates/onyx.tsx      |  8 +++++++-
 apps/artboard/src/templates/pikachu.tsx   |  8 +++++++-
 apps/artboard/src/templates/rhyhorn.tsx   |  8 +++++++-
 12 files changed, 87 insertions(+), 13 deletions(-)

diff --git a/apps/artboard/src/templates/azurill.tsx b/apps/artboard/src/templates/azurill.tsx
index b4d81c87..0ead0536 100644
--- a/apps/artboard/src/templates/azurill.tsx
+++ b/apps/artboard/src/templates/azurill.tsx
@@ -64,7 +64,13 @@ const Header = () => {
         {basics.customFields.map((item) => (
           <div key={item.id} className="flex items-center gap-x-1.5">
             <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
-            <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            {isUrl(item.value) ? (
+              <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                {item.name || item.value}
+              </a>
+            ) : (
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            )}
           </div>
         ))}
       </div>
diff --git a/apps/artboard/src/templates/bronzor.tsx b/apps/artboard/src/templates/bronzor.tsx
index 1b5671bd..8dff0a2f 100644
--- a/apps/artboard/src/templates/bronzor.tsx
+++ b/apps/artboard/src/templates/bronzor.tsx
@@ -64,7 +64,13 @@ const Header = () => {
         {basics.customFields.map((item) => (
           <div key={item.id} className="flex items-center gap-x-1.5">
             <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
-            <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            {isUrl(item.value) ? (
+              <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                {item.name || item.value}
+              </a>
+            ) : (
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            )}
           </div>
         ))}
       </div>
diff --git a/apps/artboard/src/templates/chikorita.tsx b/apps/artboard/src/templates/chikorita.tsx
index c133161b..cd30b0e4 100644
--- a/apps/artboard/src/templates/chikorita.tsx
+++ b/apps/artboard/src/templates/chikorita.tsx
@@ -65,7 +65,13 @@ const Header = () => {
           {basics.customFields.map((item) => (
             <div key={item.id} className="flex items-center gap-x-1.5">
               <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
-              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              )}
             </div>
           ))}
         </div>
diff --git a/apps/artboard/src/templates/ditto.tsx b/apps/artboard/src/templates/ditto.tsx
index 231f809f..c0b81da4 100644
--- a/apps/artboard/src/templates/ditto.tsx
+++ b/apps/artboard/src/templates/ditto.tsx
@@ -82,7 +82,13 @@ const Header = () => {
               <Fragment key={item.id}>
                 <div className="flex items-center gap-x-1.5">
                   <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
-                  <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+                  {isUrl(item.value) ? (
+                    <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                      {item.name || item.value}
+                    </a>
+                  ) : (
+                    <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+                  )}
                 </div>
                 <div className="bg-text size-1 rounded-full last:hidden" />
               </Fragment>
diff --git a/apps/artboard/src/templates/gengar.tsx b/apps/artboard/src/templates/gengar.tsx
index 22b0f296..44d5eb57 100644
--- a/apps/artboard/src/templates/gengar.tsx
+++ b/apps/artboard/src/templates/gengar.tsx
@@ -65,7 +65,13 @@ const Header = () => {
           <Fragment key={item.id}>
             <div className="flex items-center gap-x-1.5">
               <i className={cn(`ph ph-bold ph-${item.icon}`)} />
-              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              )}
             </div>
           </Fragment>
         ))}
diff --git a/apps/artboard/src/templates/glalie.tsx b/apps/artboard/src/templates/glalie.tsx
index ce3dd61e..ff7e61e3 100644
--- a/apps/artboard/src/templates/glalie.tsx
+++ b/apps/artboard/src/templates/glalie.tsx
@@ -65,7 +65,13 @@ const Header = () => {
           {basics.customFields.map((item) => (
             <div key={item.id} className="flex items-center gap-x-1.5">
               <i className={cn(`ph ph-bold ph-${item.icon} text-primary`)} />
-              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              )}
             </div>
           ))}
         </div>
diff --git a/apps/artboard/src/templates/kakuna.tsx b/apps/artboard/src/templates/kakuna.tsx
index 998c4e21..fdff6e54 100644
--- a/apps/artboard/src/templates/kakuna.tsx
+++ b/apps/artboard/src/templates/kakuna.tsx
@@ -65,7 +65,13 @@ const Header = () => {
         {basics.customFields.map((item) => (
           <div key={item.id} className="flex items-center gap-x-1.5">
             <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
-            <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            {isUrl(item.value) ? (
+              <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                {item.name || item.value}
+              </a>
+            ) : (
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            )}
           </div>
         ))}
       </div>
diff --git a/apps/artboard/src/templates/leafish.tsx b/apps/artboard/src/templates/leafish.tsx
index eaf04afc..c6b12f97 100644
--- a/apps/artboard/src/templates/leafish.tsx
+++ b/apps/artboard/src/templates/leafish.tsx
@@ -81,7 +81,13 @@ const Header = () => {
           {basics.customFields.map((item) => (
             <div key={item.id} className="flex items-center gap-x-1.5">
               <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
-              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              )}
             </div>
           ))}
         </div>
diff --git a/apps/artboard/src/templates/nosepass.tsx b/apps/artboard/src/templates/nosepass.tsx
index f1513ab6..6ac30adf 100644
--- a/apps/artboard/src/templates/nosepass.tsx
+++ b/apps/artboard/src/templates/nosepass.tsx
@@ -70,8 +70,16 @@ const Header = () => {
           {basics.customFields.map((item) => (
             <div key={item.id} className="flex items-center gap-x-1.5">
               <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
-              <span className="text-primary">{item.name}</span>
-              <span>{item.value}</span>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <>
+                  <span className="text-primary">{item.name}</span>
+                  <span>{item.value}</span>
+                </>
+              )}
             </div>
           ))}
         </div>
diff --git a/apps/artboard/src/templates/onyx.tsx b/apps/artboard/src/templates/onyx.tsx
index da68b82b..34bfb614 100644
--- a/apps/artboard/src/templates/onyx.tsx
+++ b/apps/artboard/src/templates/onyx.tsx
@@ -66,7 +66,13 @@ const Header = () => {
           {basics.customFields.map((item) => (
             <div key={item.id} className="flex items-center gap-x-1.5">
               <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
-              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              )}
             </div>
           ))}
         </div>
diff --git a/apps/artboard/src/templates/pikachu.tsx b/apps/artboard/src/templates/pikachu.tsx
index 77b91c30..4cbe61c3 100644
--- a/apps/artboard/src/templates/pikachu.tsx
+++ b/apps/artboard/src/templates/pikachu.tsx
@@ -84,7 +84,13 @@ const Header = () => {
             <Fragment key={item.id}>
               <div className="flex items-center gap-x-1.5">
                 <i className={cn(`ph ph-bold ph-${item.icon}`)} />
-                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+                {isUrl(item.value) ? (
+                  <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                    {item.name || item.value}
+                  </a>
+                ) : (
+                  <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+                )}
               </div>
               <div className="size-1 rounded-full bg-background last:hidden" />
             </Fragment>
diff --git a/apps/artboard/src/templates/rhyhorn.tsx b/apps/artboard/src/templates/rhyhorn.tsx
index a4c2fbfb..5c41a4c7 100644
--- a/apps/artboard/src/templates/rhyhorn.tsx
+++ b/apps/artboard/src/templates/rhyhorn.tsx
@@ -66,7 +66,13 @@ const Header = () => {
               className="flex items-center gap-x-1.5 border-r pr-2 last:border-r-0 last:pr-0"
             >
               <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
-              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              )}
             </div>
           ))}
         </div>