added nextjs blog

app/(marketing)/blogs/[slug]/page.tsx

@@ -8,7 +8,7 @@ import { Metadata } from "next";
 import { MoveRightIcon, MoveUpRightIcon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
-
+import Footer from "@/components/footer";
 interface IProps {
   params: { slug: string[] };
 }
@@ -55,12 +55,32 @@ export default function page({ params }: IProps) {
   }
 
   return (
-    <div className="max-w-3xl mx-auto">
+    <div className="max-w-3xl mt-8 mx-auto">
       <div className="border-b border-black pb-6 mb-6">
-        <Text className="text-muted-foreground text-sm">
-          {format(new Date(blog.publishedAt), "dd, MMMM yyyy")}
-        </Text>
-        <Text as="h2" className="mb-2">
+        <div className="flex items-center gap-4 mb-6">
+          <Text className="text-muted-foreground text-sm font-medium">
+            {format(new Date(blog.publishedAt), "dd, MMMM yyyy")}
+          </Text>
+          <Text>|</Text>
+          <div className="flex items-center gap-3">
+            {blog.tags.map((tag) => (
+              <Badge
+                key={tag}
+                size="sm"
+                variant="surface"
+                className={`bg-${
+                  ["red", "green", "blue", "yellow", "purple", "pink"][
+                    blog.tags.indexOf(tag) % 6
+                  ]
+                }-300`}
+              >
+                {tag}
+              </Badge>
+            ))}
+          </div>
+        </div>
+
+        <Text as="h1" className="mb-2">
           {blog.title}
         </Text>
         <p className="text-lg text-muted-foreground  mb-8">
@@ -81,13 +101,24 @@ export default function page({ params }: IProps) {
             </Avatar>
             <div>
               <Text as="h5">{blog.author.name}</Text>
-              <Link
-                href={`https://x.com/@${blog.author.x}`}
-                target="_blank"
-                className="text-muted-foreground"
-              >
-                @{blog.author.x}
-              </Link>
+              {blog.author.linkedin && (
+                <Link
+                  href={`https://www.linkedin.com/in/${blog.author.linkedin}`}
+                  target="_blank"
+                  className="text-muted-foreground"
+                >
+                  @{blog.author.linkedin}
+                </Link>
+              )}
+              {blog.author.x && (
+                <Link
+                  href={`https://x.com/@${blog.author.x}`}
+                  target="_blank"
+                  className="text-muted-foreground"
+                >
+                  @{blog.author.x}
+                </Link>
+              )}
             </div>
           </div>
 

app/(marketing)/blogs/layout.tsx

@@ -1,5 +1,5 @@
 import { Metadata } from "next";
-
+import Footer from "@/components/footer";
 export const metadata: Metadata = {
   title: "RetroUI Blogs",
 };
@@ -9,5 +9,10 @@ export default function BlogsLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return <div className="max-w-6xl mx-auto pt-12 px-4 lg:px-0">{children}</div>;
+  return (
+    <>
+      <div className="max-w-6xl mx-auto py-12 px-4 lg:px-0">{children}</div>
+      <Footer />
+    </>
+  );
 }

app/(marketing)/page.tsx

@@ -22,7 +22,7 @@ import {
 } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
-
+import Footer from "@/components/footer";
 async function getContributors(): Promise<
   { avatar: string; username: string; url: string }[]
 > {
@@ -429,32 +429,7 @@ export default async function Home() {
         </div>
       </section>
 
-      <footer className="bg-black py-8">
-        <div className="container max-w-6xl mx-auto flex flex-col lg:flex-row space-y-4 lg:space-y-0 justify-between items-center">
-          <div className="flex justify-center space-x-4">
-            <a href="https://twitter.com/ariflogs" className="text-primary">
-              Twitter
-            </a>
-            <a
-              href="https://github.com/Logging-Stuff/retroui"
-              className="text-primary"
-            >
-              GitHub
-            </a>
-            <a href="/docs" className="text-primary">
-              Documentation
-            </a>
-          </div>
-
-          <p className="text-gray-300 text-sm">
-            Built by{" "}
-            <a href="https://twitter.com/ariflogs" className="text-primary">
-              Arif Hossain
-            </a>
-            .
-          </p>
-        </div>
-      </footer>
+      <Footer />
     </main>
   );
 }

components/MDX.tsx

@@ -18,7 +18,7 @@ const components = (type: "doc" | "blog") => ({
   ),
   h2: (props: HTMLAttributes<HTMLHeadingElement>) =>
     type === "blog" ? (
-      <Text as="h2" className="mb-4" {...props} />
+      <Text as="h2" className="mb-4 mt-8" {...props} />
     ) : (
       <Text as="h2" className="border-b pb-1 mb-6" {...props} />
     ),

components/footer.tsx

@@ -0,0 +1,30 @@
+export default function Footer() {
+  return (
+    <footer className="bg-black py-8">
+      <div className="container max-w-6xl mx-auto flex flex-col lg:flex-row space-y-4 lg:space-y-0 justify-between items-center">
+        <div className="flex justify-center space-x-4">
+          <a href="https://twitter.com/ariflogs" className="text-primary">
+            Twitter
+          </a>
+          <a
+            href="https://github.com/Logging-Stuff/retroui"
+            className="text-primary"
+          >
+            GitHub
+          </a>
+          <a href="/docs" className="text-primary">
+            Documentation
+          </a>
+        </div>
+
+        <p className="text-gray-300 text-sm">
+          Built by{" "}
+          <a href="https://twitter.com/ariflogs" className="text-primary">
+            Arif Hossain
+          </a>
+          .
+        </p>
+      </div>
+    </footer>
+  );
+}