Jumbo commit

src/components/footer/content.jsx

@@ -2,13 +2,15 @@
 
 import Link from "next/link";
 import { motion } from "framer-motion";
+import ThemeToggle from "@/components/ui/theme-toggle";
 
 const Items = [
-  { id: 0, href: "https://add-later", label: "Contact", color: "green" },
-  { id: 1, href: "https://github.com/timmypidashev", label: "Github", color: "yellow" },
-  { id: 3, href: "https://linkedin.com/in/timothy-pidashev-9055922a7", label: "Linkedin", color: "blue" },
-  { id: 4, href: "https://instagram.com/timmypidashev", label: "Instagram", color: "purple" },
-  { id: 5, href: "https://github.com/timmypidashev/web", label: "Source", color: "aqua" },
+  { id: 0, href: "https://add-later", label: "Contact", color: "green", component: false },
+  { id: 1, href: "https://github.com/timmypidashev", label: "Github", color: "yellow", component: false },
+  { id: 3, href: "https://linkedin.com/in/timothy-pidashev-9055922a7", label: "Linkedin", color: "blue", component: false },
+  { id: 4, href: "https://instagram.com/timmypidashev", label: "Instagram", color: "purple", component: false },
+  { id: 5, href: "https://github.com/timmypidashev/web", label: "Source", color: "aqua", component: false },
+  { id: 6, color: "foreground", component: true },
 ];
 
 const ItemColors = {
@@ -49,7 +51,11 @@ function Content() {
               inline-block
               ${ItemColors[item.color]} dark:${ItemColors[item.color]}
           `}>
-            <Link href={item.href} target="_blank" rel="noopener noreferrer">{item.label}</Link>
+            {item.component ? (
+              <ThemeToggle />
+            ) : (
+              <Link href={item.href} target="_blank" rel="noopener noreferrer">{item.label}</Link>
+            )}
           </motion.div>
         ))}
       </div>

src/components/footer/index.jsx

@@ -1,4 +1,3 @@
-import Container from "@/components/ui/container";
 import Content from "@/components/footer/content";
 
 function Footer() {

src/components/ui/container.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 const Container = ({ children }) => {
   return ( 
-    <div className="mx-auto w-full max-w-3xl">
+    <div className="mx-auto w-full max-w-5xl">
       {children}
     </div>
    );