reuse Tags and BlogPostCard comopnents

Author: piducancore

app/posts/[slug]/page.tsx

@@ -6,6 +6,8 @@ import { formatDate } from "@/lib/utils";
 // import { siteConfig } from "@/lib/site-config";
 import { ProseContainer } from "@/components/prose-container";
 import { FrontMatter, getPosts } from "../page";
+import { Tag } from "@/components/blog-post-tag";
+import { BlogPostCard } from "@/components/blog-post-card";
 
 export async function generateStaticParams() {
   const blogPosts = await getPosts();
@@ -91,12 +93,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
             <p className="text-xl text-zinc-700 dark:text-zinc-300 mb-6">{frontmatter.description}</p>
             <div className="flex flex-wrap gap-2">
               {frontmatter.tags.map((tag) => (
-                <span
-                  key={tag}
-                  className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200"
-                >
-                  {tag}
-                </span>
+                <Tag key={tag} tag={tag} />
               ))}
             </div>
           </header>
@@ -105,46 +102,8 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
           </ProseContainer>
           <div className="mt-16 pt-8 border-t border-zinc-200 dark:border-zinc-800">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-              {prevPost && (
-                <div className="border border-zinc-200 dark:border-zinc-800 rounded-lg p-6">
-                  <span className="text-sm text-zinc-500 dark:text-zinc-400 block mb-2">Artículo anterior</span>
-                  <h3 className="text-lg font-mono font-semibold mb-2 text-zinc-900 dark:text-zinc-50">
-                    <Link href={`/posts/${prevPost.slug}`} className="hover:underline">
-                      {prevPost.frontmatter.title}
-                    </Link>
-                  </h3>
-                  <div className="flex flex-wrap gap-2">
-                    {prevPost.frontmatter.tags.slice(0, 2).map((tag) => (
-                      <span
-                        key={tag}
-                        className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200"
-                      >
-                        {tag}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              )}
-              {nextPost && (
-                <div className="border border-zinc-200 dark:border-zinc-800 rounded-lg p-6">
-                  <span className="text-sm text-zinc-500 dark:text-zinc-400 block mb-2">Artículo siguiente</span>
-                  <h3 className="text-lg font-mono font-semibold mb-2 text-zinc-900 dark:text-zinc-50">
-                    <Link href={`/posts/${nextPost.slug}`} className="hover:underline">
-                      {nextPost.frontmatter.title}
-                    </Link>
-                  </h3>
-                  <div className="flex flex-wrap gap-2">
-                    {nextPost.frontmatter.tags.slice(0, 2).map((tag) => (
-                      <span
-                        key={tag}
-                        className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200"
-                      >
-                        {tag}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              )}
+              {prevPost && <BlogPostCard key={prevPost.slug} slug={prevPost.slug} frontmatter={prevPost.frontmatter} />}
+              {nextPost && <BlogPostCard key={nextPost.slug} slug={nextPost.slug} frontmatter={nextPost.frontmatter} />}
             </div>
           </div>
         </article>

components/blog-post-card.tsx

@@ -1,6 +1,7 @@
 import SimpleMarquee from "@/fancy/components/blocks/simple-marquee";
 import { slugify } from "@/lib/utils";
 import Link from "next/link";
+import { Tag } from "./blog-post-tag";
 
 function formatDate(dateString: string): string {
   const date = new Date(dateString);
@@ -48,13 +49,7 @@ export function BlogPostCard({ slug, frontmatter }: PostCardProps) {
           {frontmatter.tags
             .map((tag) => slugify(tag.toLowerCase()))
             .map((tag, index) => (
-              <Link
-                key={`${tag}-${index}`}
-                href={`/posts?tag=${slugify(tag.toLowerCase())}`}
-                className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200 whitespace-nowrap"
-              >
-                {tag}
-              </Link>
+              <Tag key={`${tag}-${index}`} tag={tag} />
             ))}
         </SimpleMarquee>
       </div>

components/blog-post-tag.tsx

@@ -0,0 +1,14 @@
+import { slugify } from "@/lib/utils";
+import Link from "next/link";
+
+export function Tag({ tag }: { tag: string }) {
+  tag = slugify(tag.toLowerCase());
+  return (
+    <Link
+      href={`/posts?tag=${tag}`}
+      className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-zinc-100 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200 whitespace-nowrap hover:bg-zinc-200 dark:hover:bg-zinc-700"
+    >
+      {tag}
+    </Link>
+  );
+}

components/site-footer.tsx

@@ -1,7 +1,11 @@
 import Link from "next/link";
 import { siteConfig } from "@/lib/site-config";
+import { getPosts } from "@/app/posts/page";
+import { Tag } from "./blog-post-tag";
 
-export function SiteFooter() {
+export async function SiteFooter() {
+  const blogPosts = await getPosts();
+  const uniqueTags = [...new Set(blogPosts.flatMap((post) => post.frontmatter.tags))];
   return (
     <footer className="border-t border-zinc-200 bg-background/50 backdrop-blur-[2px] dark:border-zinc-800 z-10">
       <div className="container mx-auto px-4 py-8">
@@ -28,16 +32,10 @@ export function SiteFooter() {
             </ul>
           </div>
           <div>
-            <h3 className="text-sm font-mono font-semibold text-zinc-900 dark:text-zinc-50">Temas</h3>
+            <h3 className="text-sm font-mono font-semibold text-zinc-900 dark:text-zinc-50">Tags</h3>
             <div className="mt-4 flex flex-wrap gap-2">
-              {siteConfig.footerNav.popularTags.map((tag) => (
-                <Link
-                  key={tag.href}
-                  href={tag.href}
-                  className="inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs font-medium text-zinc-800 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700"
-                >
-                  {tag.title}
-                </Link>
+              {uniqueTags.map((tag) => (
+                <Tag key={tag} tag={tag} />
               ))}
             </div>
           </div>

lib/blog-data.ts

@@ -2,7 +2,7 @@
 title: "IA y Autopoiesis Neocibernética: Disrupción Tecnogenómica y Neofeudalismo Informático en la Periferia Latinoamericana"
 date: 2021-10-01
 description: "Un análisis crítico de la intersección entre la inteligencia artificial, la teoría de sistemas y la geopolítica en el contexto de la periferia latinoamericana."
-tags: [IA, autopoiesis, neofeudalismo, Latinoamérica, ciberpunk]
+tags: [IA, autopoiesis, neofeudalismo, Latinoamérica, cyberpunk]
 ---
 
 ## Resumen