Add docs footer social links

src/components/footer.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Link } from "./link";
 import { ThemeSwitcher } from "./theme-switcher";
 import { Icon } from "./icon";
+import { SocialLinks } from "./social-links";
 
 interface FooterProps {
   gitHubEditLink?: string;
@@ -14,8 +15,8 @@ export const Footer: React.FC<FooterProps> = ({
 }) => {
   return (
     <footer className="not-prose mt-32 border-t border-muted/70 pt-8 pb-16">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-6">
+      <div className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex flex-wrap items-center gap-x-6 gap-y-3">
           {gitHubEditLink && (
             <Link
               href={gitHubEditLink}
@@ -33,6 +34,7 @@ export const Footer: React.FC<FooterProps> = ({
           )}
         </div>
         <div className="flex items-center gap-2">
+          <SocialLinks />
           <ThemeSwitcher />
         </div>
       </div>

src/components/social-links.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Icon } from "./icon";
+import { Link } from "./link";
+
+const socialLinks = [
+  {
+    href: "https://x.com/sumelabs",
+    label: "X",
+    icon: "XIcon" as const,
+  },
+  {
+    href: "https://github.com/sumelabs",
+    label: "GitHub",
+    icon: "Github" as const,
+  },
+];
+
+export const SocialLinks: React.FC = () => {
+  return (
+    <nav aria-label="Sume social links" className="flex items-center gap-1">
+      {socialLinks.map(({ href, label, icon }) => (
+        <Link
+          key={href}
+          href={href}
+          title={label}
+          className="inline-flex h-8 items-center gap-1.5 rounded-md px-2 text-sm text-muted-base transition-colors hover:bg-muted-element hover:text-muted-high-contrast focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-solid focus-visible:ring-offset-2 focus-visible:ring-offset-muted-app"
+        >
+          <Icon name={icon} className="size-4" />
+          <span>{label}</span>
+        </Link>
+      ))}
+    </nav>
+  );
+};

src/pages/index.tsx

@@ -1,5 +1,6 @@
 import { NextPage } from "next";
 import { Card, CardGrid } from "@/components/card";
+import { SocialLinks } from "@/components/social-links";
 
 export const Background = () => (
   <div className="pointer-events-none fixed inset-0 -z-10 bg-muted-app" />
@@ -72,6 +73,10 @@ const Home: NextPage = () => {
           generation explicit.
         </p>
       </div>
+
+      <footer className="mt-24 flex justify-end border-t border-muted/70 pt-8">
+        <SocialLinks />
+      </footer>
     </div>
   );
 };