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) =>
+                detail?.label === 'Leaders' ? (
+                  <div key={detail.label} className="pb-1">
+                    <strong>
+                      {detail.label}: <LeadersList leaders={detail?.value != null ? String(detail.value) : ''} />
+                    </strong>
+                  </div>
+                ) : (
+                  <div key={detail.label} 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,36 @@
+import { Link } from 'react-router-dom'
+import { LeadersListProps } from 'types/leaders'
+
+/**
+ * Component that renders a list of project leaders as clickable links.
+ * Takes a comma-separated string of leader names and renders each as a link
+ * to their user profile page.
+ *
+ * @param {LeadersListProps} props - Component props
+ * @param {string} props.leaders - Comma-separated string of leader names
+ * @returns {JSX.Element} A list of leader links
+ */
+
+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}-${index}`}>
+          <Link
+            to={`/community/users?q=${encodeURIComponent(leader)}`}
+            aria-label={`View profile of ${leader}`}
+          >
+            {leader}
+          </Link>
+          {index < leadersArray.length - 1 && ', '}
+        </span>
+      ))}
+    </>
+  )
+}
+
+export default LeadersList

frontend/src/types/leaders.ts

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