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> 

client/src/config/strapi.ts

@@ -0,0 +1,9 @@
+// Global Strapi configuration
+export const STRAPI_CONFIG = {
+  BASE_URL: (import.meta.env.STRAPI_URL as string) || "http://localhost:1337",
+} as const;
+
+// Helper function to get the base URL
+export function getStrapiBaseUrl(): string {
+  return STRAPI_CONFIG.BASE_URL;
+} 

client/src/pages/index.astro

@@ -2,13 +2,13 @@
 // Import necessary components and utilities
 import Layout from "../layouts/Layout.astro";
 import { getCollection } from "astro:content";
-import MarkdownComponent from "../components/MardownContent.astro";
-import { getStrapiMedia } from "../utils/strapi";
+import PoleElementsList from "../components/PoleElementsList.astro";
+import { getStrapiBaseUrl } from "../config/strapi";
 
 // Fetch all posts from Strapi using Astro's content collection
 const strapiPoleElements = await getCollection("strapiPoleElementsLoader");
-// Get Strapi URL from environment variables with fallback to localhost
-const BASE_URL = (await import.meta.env.STRAPI_URL) || "http://localhost:1337";
+// Get Strapi URL from global config
+const BASE_URL = getStrapiBaseUrl();
 ---
 
 <Layout>
@@ -17,40 +17,12 @@ const BASE_URL = (await import.meta.env.STRAPI_URL) || "http://localhost:1337";
 		<h1 class="text-3xl font-bold mb-8">
 			Hello Strapi 5 and Astro 5 World
 		</h1>
-		<!-- Responsive grid layout using Tailwind CSS -->
-		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-			{/* Map through posts and create article cards */}
-			{
-				strapiPoleElements.map((poleElement) => (
-					<article class="bg-white rounded-lg shadow-lg overflow-hidden">
-						{/* Post cover image */}
-						<img
-							src={getStrapiMedia(
-								poleElement.data.mainImage.url,
-								BASE_URL,
-							)}
-							alt={poleElement.data.mainImage.alternativeText}
-							class="w-full h-48 object-cover"
-						/>
-						{/* Post content container */}
-						<div class="p-4">
-							<h2 class="text-xl font-bold mb-2">
-								{poleElement.data.name}
-							</h2>
-							<MarkdownComponent
-								content={poleElement.data.description}
-								class="text-gray-600 mb-4"
-							/>
-							<div class="text-sm text-gray-500">
-								Published:{" "}
-								{new Date(
-									poleElement.data.publishedAt,
-								).toLocaleDateString()}
-							</div>
-						</div>
-					</article>
-				))
-			}
-		</div>
+		<!-- Pole Elements List -->
+		<PoleElementsList 
+			elements={strapiPoleElements}
+			class="max-w-4xl mx-auto space-y-4"
+			id="pole-elements-list"
+			data-testid="pole-elements"
+		/>
 	</div>
 </Layout>