reworked astro collections

client/src/pages/elements/[...id].astro

@@ -1,20 +1,30 @@
 ---
-import { getCollection } from 'astro:content';
 import MardownContent from '../../components/MardownContent.astro';
 import Layout from '../../layouts/Layout.astro';
 
-// 1. Genera una nueva ruta para cada entrada de colección
-export async function getStaticPaths() {
-  const poleElements = await getCollection('poleElements');
-  return poleElements.map(entry => ({
-    params: { id: entry.id }, props: { entry },
-  }));
-}
-// 2. Para tu plantilla, puedes obtener la entrada directamente de la prop
-const { entry } = Astro.props;
----
+import fetchApi from '../../lib/strapi';
+import type PoleElement from '../../interfaces/poleElement';
 
-<Layout title={entry.data.title} description={entry.data.description}>
-  <h1>{entry.data.title}</h1>
-  <MardownContent content={entry.data.description} />
+const { id } = Astro.params;
+
+let poleElement: PoleElement;
+
+try {
+  poleElement = await fetchApi<PoleElement>({
+    endpoint: 'elements',
+    wrappedByKey: 'data',
+    wrappedByList: true,
+    query: {
+      'populate': '*',
+      'filters[id][$eq]': id || '',
+    },
+  });
+} catch (error) {
+  return Astro.redirect('/404');
+}
+
+---
+<Layout title={poleElement.name} description={poleElement.description}>
+  <h1>{poleElement.name}</h1>
+  {poleElement.description && <MardownContent content={poleElement.description} />}
 </Layout>