entity leader component added

frontend/src/components/CardDetailsPage.tsx

@@ -12,6 +12,7 @@ import RepositoriesCard from 'components/RepositoriesCard'
 import SecondaryCard from 'components/SecondaryCard'
 import ToggleableList from 'components/ToggleableList'
 import TopContributors from 'components/ToggleContributors'
+import LeadersList from './LeadersList'
 
 const DetailsCard = ({
   title,
@@ -47,11 +48,19 @@ const DetailsCard = ({
             className={`${type !== 'chapter' ? 'md:col-span-5' : 'md:col-span-3'} gap-2`}
           >
             {details &&
-              details.map((detail, index) => (
-                <div key={index} className="pb-1">
-                  <strong>{detail.label}:</strong> {detail.value ? detail.value : 'Unknown'}
-                </div>
-              ))}
+              details.map((detail, index) =>
+                detail?.label === 'Leaders' ? (
+                  <div key={index} className="pb-1">
+                    <strong>
+                      {detail.label}: <LeadersList leaders={String(detail?.value)} />
+                    </strong>
+                  </div>
+                ) : (
+                  <div key={index} className="pb-1">
+                    <strong>{detail.label}:</strong> {detail.value ? detail.value : 'Unknown'}
+                  </div>
+                )
+              )}
             {socialLinks && (type === 'chapter' || type === 'committee') && (
               <SocialLinks urls={socialLinks || []} />
             )}

frontend/src/components/LeadersList.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react'
+import { Link } from 'react-router-dom'
+import { LeadersListProps } from 'types/leaders'
+
+const LeadersList = ({ leaders }: LeadersListProps) => {
+  if (!leaders || leaders.trim() === '') return <>Unknown</>
+
+  const leadersArray = leaders.split(',').map((leader) => leader.trim())
+
+  return (
+    <>
+      {leadersArray.map((leader, index) => (
+        <span key={leader}>
+          <Link to={`/community/users?q=${encodeURIComponent(leader)}`}>{leader}</Link>
+          {index < leadersArray.length - 1 && ', '}
+        </span>
+      ))}
+    </>
+  )
+}
+
+export default LeadersList

frontend/src/types/leaders.ts

@@ -0,0 +1,3 @@
+export type LeadersListProps = {
+    leaders: string
+};