Organize and DRY React link component

powerhome · Oct 25, 2024 · da3e417 · da3e417
1 parent b10322e
commit da3e417
Showing 1 changed file with 16 additions and 18 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_link/_link.tsx b/playbook/app/pb_kits/playbook/pb_link/_link.tsx
@@ -52,9 +52,9 @@ const Link = (props: LinkProps): React.ReactElement => {
     globalProps(props),
     className
   )
-  const Tag: keyof JSX.IntrinsicElements = `${tag}`
+  const Tag = tag as keyof JSX.IntrinsicElements
 
-  const content = (
+  const renderContent = () => (
     <>
       {icon && (
         <Icon
@@ -76,32 +76,30 @@ const Link = (props: LinkProps): React.ReactElement => {
     </>
   )
 
+  const commonProps = {
+    ...ariaProps,
+    ...dataProps,
+    ...htmlProps,
+    className: classes,
+    id,
+  }
+
   if (tag === 'a') {
     return (
-      <Tag
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={classes}
+      <a
+          {...commonProps}
           href={href}
-          id={id}
       >
-        {content}
-      </Tag>
+        {renderContent()}
+      </a>
     )
   } else {
     return (
       <a
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={classes}
+          {...commonProps}
           href={href}
-          id={id}
       >
-        <Tag>
-          {content}
-        </Tag>
+        <Tag>{renderContent()}</Tag>
       </a>
     )
   }