initial docs

components/docs/footer.tsx

@@ -0,0 +1,56 @@
+import Link from "next/link";
+import { ModeToggle } from "@/components/docs/theme-toggle";
+import docuConfig from "@/docu.json";
+import * as LucideIcons from "lucide-react"; // Import all icons
+
+export function Footer() {
+  const { footer } = docuConfig;
+  const { meta } = docuConfig;
+  return (
+    <footer className="w-full py-4 px-2 border-t lg:py-8 bg-background">
+      <div className="container flex flex-wrap items-center justify-between text-sm">
+        <div className="items-start justify-center hidden gap-4 lg:flex-col lg:flex lg:w-3/5">
+            <h3 className="text-lg font-bold font-code">{meta.title}</h3>
+            <span className="w-3/4 text-base text-wrap text-muted-foreground">{meta.description}</span>
+            <div className="flex items-center gap-6 mt-2">
+                <FooterButtons />
+            </div>
+        </div>
+        <div className="flex flex-col items-start justify-center w-full gap-4 mt-4 xl:items-end lg:w-2/5">
+            <p className="text-center text-muted-foreground">
+                Copyright © {new Date().getFullYear()} {footer.copyright} - Made with{" "}
+                <Link href="https://www.docubook.pro" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2">
+                DocuBook
+                </Link>
+            </p>
+            <div className="hidden lg:flex">
+                <ModeToggle />
+            </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export function FooterButtons() {
+  const { footer } = docuConfig;
+
+  return (
+    <>
+      {footer.social?.map((item) => {
+        const IconComponent = (LucideIcons[item.iconName as keyof typeof LucideIcons] ?? LucideIcons["Globe"]) as unknown as React.FC<{ className?: string }>;
+        return (
+          <Link
+            key={item.name}
+            href={item.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={item.name}
+          >
+            <IconComponent className="w-4 h-4 text-gray-800 transition-colors dark:text-gray-400 hover:text-primary" />
+          </Link>
+        );
+      })}
+    </>
+  );
+}