initial to gitea

components/footer.tsx

@@ -0,0 +1,57 @@
+import Link from "next/link";
+import { buttonVariants } from "./ui/button";
+import docuConfig from "@/docu.json"; // Import JSON
+
+export function Footer() {
+  const { footer } = docuConfig; // Extract footer from JSON
+
+  return (
+    <footer className="border-t w-full h-16">
+      <div className="container flex items-center sm:justify-between justify-center sm:gap-0 gap-4 h-full text-muted-foreground text-sm flex-wrap sm:py-0 py-3 max-sm:px-4">
+        {/* Footer Text */}
+        <div className="flex items-center gap-3">
+          <p className="text-center">
+            Copyright © {new Date().getFullYear()} {footer.copyright} - Crafted with love using{" "}
+            <Link
+              href="https://www.docubook.pro"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline underline-offset-2"
+            >
+              DocuBook
+            </Link>
+          </p>
+        </div>
+
+        {/* Footer Buttons */}
+        <div className="gap-4 items-center hidden md:flex">
+          <FooterButtons />
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export function FooterButtons() {
+  const { footer } = docuConfig; // Extract footer from JSON
+
+  return (
+    <>
+      {footer.buttons.map((button, index) => {
+        const Icon = require("lucide-react")[button.iconName]; // Dynamically load icon
+        return (
+          <Link
+            key={index}
+            href={button.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={buttonVariants({ variant: "outline", size: "sm" })}
+          >
+            <Icon className="h-4 w-4 mr-2 dark:text-primary dark:hover:text-accent-foreground" />
+            {button.text}
+          </Link>
+        );
+      })}
+    </>
+  );
+}