Merge pull request #590 from rastislavcore/update/org-fix-01

Handle multiple organizations

src/components/details-card/index.tsx

@@ -66,12 +66,7 @@ const ListItem: React.FC<{
   skeleton?: boolean;
 }> = ({ icon, title, value, link, skeleton = false }) => {
   return (
-    <a
+    <div className="flex justify-start py-2 px-1 items-center">
-      href={link}
-      target="_blank"
-      rel="noreferrer"
-      className="flex justify-start py-2 px-1 items-center"
-    >
       <div className="flex-grow font-medium gap-2 flex items-center my-1">
         {icon} {title}
       </div>
@@ -83,9 +78,67 @@ const ListItem: React.FC<{
           wordBreak: 'break-word',
         }}
       >
-        {value}
+        <a
+          href={link}
+          target="_blank"
+          rel="noreferrer"
+          className="flex justify-start py-2 px-1 items-center"
+        >
+          {value}
+        </a>
       </div>
-    </a>
+    </div>
+  );
+};
+
+const OrganizationItem: React.FC<{
+  icon: React.ReactNode;
+  title: React.ReactNode;
+  value: React.ReactNode | string;
+  link?: string;
+  skeleton?: boolean;
+}> = ({ icon, title, value, link, skeleton = false }) => {
+  const renderValue = () => {
+    if (typeof value === 'string') {
+      return value.split(' ').map((company) => {
+        company = company.trim();
+        if (!company) return null;
+
+        if (isCompanyMention(company)) {
+          return (
+            <a
+              href={companyLink(company)}
+              target="_blank"
+              rel="noreferrer"
+              key={company}
+            >
+              {company}
+            </a>
+          );
+        } else {
+          return <span key={company}>{company}</span>;
+        }
+      });
+    }
+    return value;
+  };
+
+  return (
+    <div className="flex justify-start py-2 px-1 items-center">
+      <div className="flex-grow font-medium gap-2 flex items-center my-1">
+        {icon} {title}
+      </div>
+      <div
+        className={`${
+          skeleton ? 'flex-grow' : ''
+        } text-sm font-normal text-right mr-2 ml-3 space-x-2 ${link ? 'truncate' : ''}`}
+        style={{
+          wordBreak: 'break-word',
+        }}
+      >
+        {renderValue()}
+      </div>
+    </div>
   );
 };
 
@@ -132,9 +185,9 @@ const DetailsCard = ({ profile, loading, social, github }: Props) => {
                 />
               )}
               {profile.company && (
-                <ListItem
+                <OrganizationItem
                   icon={<FaBuilding />}
-                  title="Company:"
+                  title="Organization:"
                   value={profile.company}
                   link={
                     isCompanyMention(profile.company.trim())