Organization fix

Fix for multiple organizations

src/components/details-card/index.tsx

@@ -66,10 +66,7 @@ const ListItem: React.FC<{
   skeleton?: boolean;
 }> = ({ icon, title, value, link, skeleton = false }) => {
   return (
-    <a
-      href={link}
-      target="_blank"
-      rel="noreferrer"
+    <div
       className="flex justify-start py-2 px-1 items-center"
     >
       <div className="flex-grow font-medium gap-2 flex items-center my-1">
@@ -83,9 +80,68 @@ 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 +188,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())