Pulls out NewsIndex Astro component

2 files changed, 13 insertions, 17 deletions

diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index 11188a0..e5e6040 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -5,8 +5,8 @@ import translate from '$i18n/translate';
 import tPage from '$i18n/translations/pages/home';
 import type Locale from '$types/Locale';
 import { getMostRecentNewsItem } from '$lib/newsUtils';
-import NewsPreviewLink from '$components/NewsPreviewLink.astro';
 import contactDetails from '$data/contactDetails';
+import NewsIndex from '$components/NewsIndex/NewsIndex.astro';
 
 export async function getStaticPaths() {
   return localeStaticPaths;
@@ -20,12 +20,16 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale);
 <Page title={t(tPage, { key: 'title' })}>
   <section>
     <h2 class="grid-span-6" set:html={t(tPage, { key: 'news' })} />
-    {mostRecentNewsItem && <NewsPreviewLink headingLevel="h3" newsItem={mostRecentNewsItem} />}
-    <div class="grid-end margin-block-start-sm">
-      <a href={`/${locale}/news`} class="btn">
-        {t(tPage, { key: 'aw-news' })} ▷
-      </a>
-    </div>
+    <NewsIndex newsItems={mostRecentNewsItem ? [mostRecentNewsItem] : []} headingLevel="h3" />
+    {
+      mostRecentNewsItem && (
+        <div class="grid-span-2 grid-end margin-block-start-sm">
+          <a href={`/${locale}/news`} class="btn">
+            {t(tPage, { key: 'aw-news' })} ▷
+          </a>
+        </div>
+      )
+    }
   </section>
 
   <section>
diff --git a/src/pages/[locale]/news/index.astro b/src/pages/[locale]/news/index.astro
index 8a6e322..6e95884 100644
--- a/src/pages/[locale]/news/index.astro
+++ b/src/pages/[locale]/news/index.astro
@@ -5,8 +5,8 @@ import Page from '$layouts/Page.astro';
 import getLocaleFromPath from '$lib/getLocaleFromPath';
 import localeStaticPaths from '$lib/localeStaticPaths';
 import { getCollection } from 'astro:content';
-import NewsPreviewLink from '$components/NewsPreviewLink.astro';
 import { isNewsItemInLocale } from '$lib/newsUtils';
+import NewsIndex from '$components/NewsIndex/NewsIndex.astro';
 
 const allNews = await getCollection('news');
 const locale = getLocaleFromPath(Astro.url.pathname);
@@ -21,14 +21,6 @@ export async function getStaticPaths() {
 <Page title={t(tPage, { key: 'title' })}>
   <section>
     <h1>{t(tPage, { key: 'title' })}</h1>
-    <div class="news-index">
-      {
-        allNewsInLocale.length > 0 ? (
-          allNewsInLocale.map((item) => <NewsPreviewLink headingLevel="h2" newsItem={item} />)
-        ) : (
-          <p>{t(tPage, { key: 'no-news' })}</p>
-        )
-      }
-    </div>
+    <NewsIndex newsItems={allNewsInLocale} headingLevel="h2" />
   </section>
 </Page>