search bar

client/src/components/PoleElementsList.astro

@@ -1,8 +1,6 @@
 ---
 // Import necessary components and utilities
-import MarkdownComponent from "./MardownContent.astro";
-import { getStrapiMedia } from "../lib/strapi";
-import { getStrapiBaseUrl } from "../config/strapi";
+import { getStrapiMedia, getStrapiBaseUrl } from "../lib/strapi";
 import { t, getLanguageFromPath, type SupportedLanguage } from "../lib/i18n";
 import type { HTMLAttributes } from "astro/types";
 
@@ -19,32 +17,37 @@ const BASE_URL = getStrapiBaseUrl();
 const currentLang = getLanguageFromPath(Astro.url.pathname);
 ---
 
-<div {...otherProps}>
+<div {...otherProps} data-elements-container>
 	{
 		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>
-			))
+			<>
+				{elements.map((poleElement) => (
+					<a href={`/elements/${poleElement.id}`} class="block mb-4">
+						<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 id="no-results-message" class="text-center py-8 hidden">
+					<p class="text-gray-500 text-lg">{t('elements.noResults', currentLang)}</p>
+				</div>
+			</>
 		)
 	}
 </div>