Ejemplo posts relacionados y cambio a mayúscula del nombre

src/components/PostsRelacionados.astro

@@ -1,28 +1,69 @@
 ---
 const { currentPost } = Astro.props;
 
-// Aquí deberías implementar la lógica para obtener posts relacionados
-// Por ejemplo, basándote en categorías, tags, o algún otro criterio
-const relatedPosts = [{ title: "Prueba", excerpt: "Prueba", url: "Prueba" }];
+const posts = await Astro.glob('../pages/posts/*.mdx');
+
+const relatedPosts = posts.filter(post => 
+    currentPost.relacionados?.includes(post.file.split('/').pop().replace('.mdx', ''))
+).map(post => ({
+    title: post.frontmatter.titulo,
+    excerpt: post.frontmatter.descripcion,
+    url: post.url,
+    imagen: post.frontmatter.imagen
+}));
 ---
 
-<section class="related-posts mt-5">
-    <h2>Posts Relacionados</h2>
-    <div class="row">
+<section class="related-posts mt-5 col-lg-8">
+    <h4 class="mb-3">Posts Relacionados</h4>
+    <ul class="list-group">
         {
             relatedPosts.map((post) => (
-                <div class="col-md-4 mb-4">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title">{post.title}</h5>
-                            <p class="card-text">{post.excerpt}</p>
-                            <a href={post.url} class="btn btn-primary">
-                                Leer más
-                            </a>
+                <li class="list-group-item list-group-item-action">
+                    <a href={post.url} class="text-decoration-none">
+                        <div class="d-flex align-items-center">
+                            <div class="flex-shrink-0">
+                                <img 
+                                    src={post.imagen} 
+                                    alt={post.title}
+                                    class="related-post-img"
+                                />
+                            </div>
+                            <div class="flex-grow-1 ms-3">
+                                <h6 class="mb-1">{post.title}</h6>
+                                <small class="text-muted excerpt-text">{post.excerpt}</small>
+                            </div>
+                            <div class="ms-auto">
+                                <i class="fas fa-chevron-right text-muted"></i>
+                            </div>
                         </div>
-                    </div>
-                </div>
+                    </a>
+                </li>
             ))
         }
-    </div>
+    </ul>
 </section>
+
+<style>
+    .related-post-img {
+        width: 50px;
+        height: 50px;
+        object-fit: cover;
+        border-radius: 4px;
+    }
+
+    .list-group-item {
+        transition: background-color 0.2s;
+    }
+
+    .list-group-item:hover {
+        background-color: #f8f9fa;
+    }
+
+    .excerpt-text {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        line-height: 1.3;
+    }
+</style>