PoleElementsList component

client/src/components/PoleElementsList.astro

@@ -0,0 +1,38 @@
+---
+// Import necessary components and utilities
+import MarkdownComponent from "./MardownContent.astro";
+import { getStrapiMedia } from "../utils/strapi";
+import { getStrapiBaseUrl } from "../config/strapi";
+import type { HTMLAttributes } from "astro/types";
+
+// Define the props interface
+export interface Props extends HTMLAttributes<'div'> {
+	elements: any[];
+}
+
+// Destructure props and get BASE_URL from global config
+const { elements, ...otherProps } = Astro.props;
+const BASE_URL = getStrapiBaseUrl();
+---
+
+<div {...otherProps}>
+	{
+		elements.map((poleElement) => (
+			<article class="flex items-center bg-white rounded-lg shadow-lg overflow-hidden">
+				<img
+					src={getStrapiMedia(
+						poleElement.data.mainImage.url,
+						BASE_URL,
+					)}
+					alt={poleElement.data.mainImage.alternativeText}
+					class="w-24 h-24 object-cover flex-shrink-0"
+				/>
+				<div class="p-4">
+					<h2 class="text-xl font-bold">
+						{poleElement.data.name}
+					</h2>
+				</div>
+			</article>
+		))
+	}
+</div>