3 files changed, 49 insertions, 24 deletions
diff --git a/src/components/CommitteeList/CommitteeList.astro b/src/components/CommitteeList/CommitteeList.astro
new file mode 100644
index 0000000..f576c9a
--- /dev/null
+++ b/src/components/CommitteeList/CommitteeList.astro
@@ -0,0 +1,8 @@
+---
+import committee from '$data/committee';
+import CommitteeListItem from './CommitteeListItem.astro';
+---
+
+<ul>
+  {committee.map((committeeMember) => <CommitteeListItem committeeMember={committeeMember} />)}
+</ul>
diff --git a/src/components/CommitteeList/CommitteeListItem.astro b/src/components/CommitteeList/CommitteeListItem.astro
new file mode 100644
index 0000000..d026047
--- /dev/null
+++ b/src/components/CommitteeList/CommitteeListItem.astro
@@ -0,0 +1,39 @@
+---
+import CommitteeRole from '$enums/CommitteeRole';
+import tRole from '$i18n/translations/enums/committeeRole';
+import translate from '$i18n/translate';
+import type { CommitteeMember } from '$types/CommitteeMember';
+import type Locale from '$types/Locale';
+
+interface Props {
+  committeeMember: CommitteeMember;
+}
+
+const { committeeMember } = Astro.props;
+
+const locale = Astro.params.locale as Locale;
+
+const t = translate(locale);
+---
+
+<li class="committee__member">
+  {
+    committeeMember.img && (
+      <img class="committee__member__img" src={committeeMember.img.src} alt="" />
+    )
+  }
+  <div class="committee__member__text">
+    <h4>
+      {committeeMember.name}
+      {
+        committeeMember.roles.length > 0 && (
+          <span class="font-weight-lighter">
+            |{' '}
+            {committeeMember.roles.map((role) => t(tRole, { key: CommitteeRole[role] })).join(', ')}
+          </span>
+        )
+      }
+    </h4>
+    {committeeMember.bio && <p set:html={committeeMember.bio[locale]} />}
+  </div>
+</li>
diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index 653c637..c67ded0 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -3,14 +3,12 @@ import Page from '$layouts/Page.astro';
 import localeStaticPaths from '$lib/localeStaticPaths';
 import translate from '$i18n/translate';
 import tPage from '$i18n/translations/pages/home';
-import tRole from '$i18n/translations/enums/committeeRole';
 import type Locale from '$types/Locale';
 import { getMostRecentNewsItem } from '$lib/newsUtils';
 import contactDetails from '$data/contactDetails';
 import NewsIndex from '$components/NewsIndex/NewsIndex.astro';
-import committee from '$data/committee';
 import Button from '$components/Button.astro';
-import CommitteeRole from '$enums/CommitteeRole';
+import CommitteeList from '$components/CommitteeList/CommitteeList.astro';
 
 export async function getStaticPaths() {
   return localeStaticPaths;
@@ -46,27 +44,7 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale);
     <p set:html={t(tPage, { key: 'about-us-para-3' })} />
     <h3 set:html={t(tPage, { key: 'meet-the-commattee' })} />
     <p class="italic">{t(tPage, { key: 'mair-commattee-details-soon' })}</p>
-    <ul>
-      {
-        committee.map((member) => (
-          <li class="committee__member">
-            {member.img && <img class="committee__member__img" src={member.img.src} alt="" />}
-            <div class="committee__member__text">
-              <h4>
-                {member.name}
-                {member.roles.length > 0 && (
-                  <span class="font-weight-lighter">
-                    |{' '}
-                    {member.roles.map((role) => t(tRole, { key: CommitteeRole[role] })).join(', ')}
-                  </span>
-                )}
-              </h4>
-              {member.bio && <p set:html={member.bio[locale]} />}
-            </div>
-          </li>
-        ))
-      }
-    </ul>
+    <CommitteeList />
   </section>
 
   <section>