feat: separate links option at section level to reduce section item height

apps/artboard/src/templates/bronzor.tsx

@@ -7,6 +7,7 @@ import {
   Experience,
   Interest,
   Language,
+  Metadata,
   Profile,
   Project,
   Publication,
@@ -108,16 +109,17 @@ const Rating = ({ level }: RatingProps) => (
 type LinkProps = {
   url: URL;
   icon?: React.ReactNode;
+  iconOnRight?: boolean;
   label?: string;
   className?: string;
 };
 
-const Link = ({ url, icon, label, className }: LinkProps) => {
+const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
   if (!isUrl(url.href)) return null;
 
   return (
     <div className="flex items-center gap-x-1.5">
-      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      {!iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
       <a
         href={url.href}
         target="_blank"
@@ -126,10 +128,40 @@ const Link = ({ url, icon, label, className }: LinkProps) => {
       >
         {label || url.label || url.href}
       </a>
+      {iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
     </div>
   );
 };
 
+type LinkedEntityProps = {
+  name: string;
+  url: URL;
+  separateLinks: boolean;
+  className?: string;
+};
+
+const LinkedEntity = ({ name, url, separateLinks, className}: LinkedEntityProps) => {
+  if (!separateLinks && isUrl(url.href)) {
+    return (
+      <Link
+        url={url}
+        label={name}
+        icon={
+          <i className="ph ph-bold ph-globe text-primary" />
+        }
+        iconOnRight={true}
+        className={className}
+      />
+    );
+  } else {
+    return (
+      <div className={className}>
+        {name}
+      </div>
+    );
+  }
+};
+
 type SectionProps<T> = {
   section: SectionWithItem<T> | CustomSectionGroup;
   children?: (item: T) => React.ReactNode;
@@ -173,7 +205,7 @@ const Section = <T,>({
               <div key={item.id} className={cn("space-y-2", className)}>
                 <div>
                   {children?.(item as T)}
-                  {url !== undefined && <Link url={url} />}
+                  {url !== undefined && section.separateLinks && <Link url={url} />}
                 </div>
 
                 {summary !== undefined && !isEmptyString(summary) && (
@@ -233,7 +265,7 @@ const Experience = () => {
       {(item) => (
         <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.company}</div>
+            <LinkedEntity name={item.company} url={item.url} separateLinks={section.separateLinks} className="font-bold"/>
             <div>{item.position}</div>
           </div>
 
@@ -255,10 +287,10 @@ const Education = () => {
       {(item) => (
         <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.institution}</div>
+            <LinkedEntity name={item.institution} url={item.url} separateLinks={section.separateLinks} className="font-bold"/>
             <div>{item.area}</div>
             <div>{item.score}</div>
-          </div>
+          </div> 
 
           <div className="shrink-0 text-right">
             <div className="font-bold">{item.date}</div>
@@ -279,7 +311,7 @@ const Awards = () => {
         <div className="flex items-start justify-between">
           <div className="text-left">
             <div className="font-bold">{item.title}</div>
-            <div>{item.awarder}</div>
+            <LinkedEntity name={item.awarder} url={item.url} separateLinks={section.separateLinks}/>
           </div>
 
           <div className="shrink-0 text-right">
@@ -300,7 +332,7 @@ const Certifications = () => {
         <div className="flex items-start justify-between">
           <div className="text-left">
             <div className="font-bold">{item.name}</div>
-            <div>{item.issuer}</div>
+            <LinkedEntity name={item.issuer} url={item.url} separateLinks={section.separateLinks}/>
           </div>
 
           <div className="shrink-0 text-right">
@@ -345,7 +377,7 @@ const Publications = () => {
       {(item) => (
         <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity name={item.name} url={item.url} separateLinks={section.separateLinks} className="font-bold"/>
             <div>{item.publisher}</div>
           </div>
 
@@ -366,7 +398,7 @@ const Volunteer = () => {
       {(item) => (
         <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.organization}</div>
+            <LinkedEntity name={item.organization} url={item.url} separateLinks={section.separateLinks} className="font-bold"/>
             <div>{item.position}</div>
           </div>
 
@@ -403,7 +435,7 @@ const Projects = () => {
       {(item) => (
         <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity name={item.name} url={item.url} separateLinks={section.separateLinks} className="font-bold"/>
             <div>{item.description}</div>
           </div>
 
@@ -423,7 +455,7 @@ const References = () => {
     <Section<Reference> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <div className="font-bold">{item.name}</div>
+          <LinkedEntity name={item.name} url={item.url} separateLinks={section.separateLinks} className="font-bold"/>
           <div>{item.description}</div>
         </div>
       )}
@@ -444,7 +476,7 @@ const Custom = ({ id }: { id: string }) => {
       {(item) => (
         <div className="flex items-start justify-between">
           <div className="text-left">
-            <div className="font-bold">{item.name}</div>
+            <LinkedEntity name={item.name} url={item.url} separateLinks={section.separateLinks} className="font-bold"/>
             <div>{item.description}</div>
           </div>