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

apps/artboard/src/templates/leafish.tsx

@@ -131,16 +131,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"
@@ -149,10 +150,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;
@@ -206,7 +237,7 @@ const Section = <T,>({
                   <p className="text-sm">{keywords.join(", ")}</p>
                 )}
 
-                {url !== undefined && <Link url={url} />}
+                {url !== undefined && section.separateLinks && <Link url={url} />}
               </div>
             );
           })}
@@ -222,7 +253,7 @@ const Experience = () => {
     <Section<Experience> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <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>{item.location}</div>
           <div className="font-bold">{item.date}</div>
@@ -239,7 +270,7 @@ const Education = () => {
     <Section<Education> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <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>{item.studyType}</div>
@@ -258,7 +289,7 @@ const Awards = () => {
       {(item) => (
         <div>
           <div className="font-bold">{item.title}</div>
-          <div>{item.awarder}</div>
+          <LinkedEntity name={item.awarder} url={item.url} separateLinks={section.separateLinks}/>
           <div className="font-bold">{item.date}</div>
         </div>
       )}
@@ -274,7 +305,7 @@ const Certifications = () => {
       {(item) => (
         <div>
           <div className="font-bold">{item.name}</div>
-          <div>{item.issuer}</div>
+          <LinkedEntity name={item.issuer} url={item.url} separateLinks={section.separateLinks}/>
           <div className="font-bold">{item.date}</div>
         </div>
       )}
@@ -314,7 +345,7 @@ const Publications = () => {
     <Section<Publication> 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.publisher}</div>
           <div className="font-bold">{item.date}</div>
         </div>
@@ -330,7 +361,7 @@ const Volunteer = () => {
     <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
       {(item) => (
         <div>
-          <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>{item.location}</div>
           <div className="font-bold">{item.date}</div>
@@ -363,7 +394,7 @@ const Projects = () => {
       {(item) => (
         <div>
           <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 className="font-bold">{item.date}</div>
           </div>
@@ -380,7 +411,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>
       )}
@@ -401,7 +432,7 @@ const Custom = ({ id }: { id: string }) => {
       {(item) => (
         <div>
           <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>{item.location}</div>
             <div className="font-bold">{item.date}</div>