Swap badge and text in property

centrapay · Oct 17, 2023 · 7cf941d · 7cf941d
1 parent 51060eb
commit 7cf941d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/src/components/Badge.astro b/src/components/Badge.astro
@@ -1,6 +1,7 @@
 ---
 
-const { type = "default", text } = Astro.props;
+const { type = "default", text, link } = Astro.props;
+const badgeText = text ? text : type;
 
 const coloursMap = {
   experimental: 'bg-surface-accent-light text-content-accent border-outline-opaque',
@@ -11,8 +12,10 @@ const coloursMap = {
   default: 'text-content-primary border-outline-opaque bg-surface-tertiary'
 }
 
----
+const badgeClass =`${coloursMap[type]} type-caption-2 inline-flex text-xs px-2 py-0.5 rounded-full border`
 
-<span class=`${ coloursMap[type] } type-caption-2 inline-flex text-xs px-2 py-0.5 rounded-full border`>
-  { text ? text : type }
-</span>
+---
+{link ?
+  <a class={badgeClass} href={link}>{badgeText}</a> :
+  <span class={badgeClass}>{badgeText}</span>
+}
diff --git a/src/components/Property.astro b/src/components/Property.astro
@@ -5,7 +5,7 @@ import Badge from '../components/Badge.astro';
 const { name, type } = Astro.props;
 const customDataTypes = ['timestamp', 'bignumber', 'monetary', 'crn', 'location', 'phonenumber'];
 const formattedType = type.toLowerCase();
-const isLink = customDataTypes.includes(formattedType);
+const link = customDataTypes.includes(formattedType) ? '/api/data-types#' + formattedType :undefined;
 ---
 
 <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
@@ -14,14 +14,11 @@ const isLink = customDataTypes.includes(formattedType);
       Name
     </dt>
     <dd>
-      <Badge text={name}/>
+      {name}
     </dd>
     <dt class="sr-only">Type</dt>
     <dd class="font-mono text-xs text-zinc-400 dark:text-zinc-500">
-      {isLink ?
-        <a href={'/api/data-types#' + formattedType}>{formattedType}</a> :
-        <span>{formattedType}</span>
-      }
+      <Badge text={formattedType} link={link}>
     </dd>
     <dt class="sr-only">
       Description