i18n init

client/src/components/PoleElementsList.astro

@@ -3,6 +3,7 @@
 import MarkdownComponent from "./MardownContent.astro";
 import { getStrapiMedia } from "../lib/strapi";
 import { getStrapiBaseUrl } from "../config/strapi";
+import { t, getLanguageFromPath, type SupportedLanguage } from "../lib/i18n";
 import type { HTMLAttributes } from "astro/types";
 
 // Define the props interface
@@ -13,28 +14,37 @@ export interface Props extends HTMLAttributes<'div'> {
 // Destructure props and get BASE_URL from global config
 const { elements, ...otherProps } = Astro.props;
 const BASE_URL = getStrapiBaseUrl();
+
+// Get current language
+const currentLang = getLanguageFromPath(Astro.url.pathname);
 ---
 
 <div {...otherProps}>
 	{
-		elements.map((poleElement) => (
-			<a href={`/elements/${poleElement.id}`} class="block">
-				<article class="flex items-center bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-200">
-					<img
-						src={getStrapiMedia(
-							poleElement.mainImage.url,
-							BASE_URL,
-						)}
-						alt={poleElement.mainImage.alternativeText}
-						class="w-24 h-24 object-cover flex-shrink-0"
-					/>
-					<div class="p-4">
-						<h2 class="text-xl font-bold">
-							{poleElement.name}
-						</h2>
-					</div>
-				</article>
-			</a>
-		))
+		elements.length === 0 ? (
+			<div class="text-center py-8">
+				<p class="text-gray-500 text-lg">{t('elements.noElements', currentLang)}</p>
+			</div>
+		) : (
+			elements.map((poleElement) => (
+				<a href={`/elements/${poleElement.id}`} class="block">
+					<article class="flex items-center bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-200">
+						<img
+							src={getStrapiMedia(
+								poleElement.mainImage.url,
+								BASE_URL,
+							)}
+							alt={poleElement.mainImage.alternativeText}
+							class="w-24 h-24 object-cover flex-shrink-0"
+						/>
+						<div class="p-4">
+							<h2 class="text-xl font-bold">
+								{poleElement.name}
+							</h2>
+						</div>
+					</article>
+				</a>
+			))
+		)
 	}
 </div>