diff options
Diffstat (limited to 'src/components/NewsIndex')
| -rw-r--r-- | src/components/NewsIndex/NewsIndex.astro | 25 | ||||
| -rw-r--r-- | src/components/NewsIndex/NewsPreviewLink.astro | 25 |
2 files changed, 50 insertions, 0 deletions
diff --git a/src/components/NewsIndex/NewsIndex.astro b/src/components/NewsIndex/NewsIndex.astro new file mode 100644 index 0000000..6738071 --- /dev/null +++ b/src/components/NewsIndex/NewsIndex.astro @@ -0,0 +1,25 @@ +--- +import type { CollectionEntry } from 'astro:content'; +import NewsPreviewLink from './NewsPreviewLink.astro'; +import getLocaleFromPath from '$lib/getLocaleFromPath'; +import translate from '$i18n/translate'; +import tComponent from '$i18n/translations/components/newsIndex'; +interface Props { + headingLevel: 'h2' | 'h3' | 'h4'; + newsItems: CollectionEntry<'news'>[]; +} + +const { headingLevel, newsItems } = Astro.props; +const locale = getLocaleFromPath(Astro.url.pathname); +const t = translate(locale); +--- + +<div class="news-index"> + { + newsItems.length > 0 ? ( + newsItems.map((item) => <NewsPreviewLink headingLevel={headingLevel} newsItem={item} />) + ) : ( + <p>{t(tComponent, { key: 'no-news' })}</p> + ) + } +</div> diff --git a/src/components/NewsIndex/NewsPreviewLink.astro b/src/components/NewsIndex/NewsPreviewLink.astro new file mode 100644 index 0000000..aa8a371 --- /dev/null +++ b/src/components/NewsIndex/NewsPreviewLink.astro @@ -0,0 +1,25 @@ +--- +import translate from '$i18n/translate'; +import tComponent from '$i18n/translations/components/newsIndex'; +import getLocaleFromPath from '$lib/getLocaleFromPath'; +import type { CollectionEntry } from 'astro:content'; + +interface Props { + headingLevel: 'h1' | 'h2' | 'h3' | 'h4'; + newsItem: CollectionEntry<'news'>; +} + +const { headingLevel, newsItem } = Astro.props; +const locale = getLocaleFromPath(Astro.url.pathname); +const t = translate(locale); +--- + +<a class="news-index__item group-hover" href={`/${locale}/news/${newsItem.slug.replace('/', '-')}`}> + <Fragment + set:html={` + <${headingLevel}>${newsItem.data.title}</${headingLevel}> + `} + /> + <p>{newsItem.data.summary}</p> + <p class="link">{t(tComponent, { key: 'read-article' })}</p> +</a> |
