Refine docs footer utility row

src/components/footer-utility-row.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { SocialLinks } from "./social-links";
+import { ThemeSwitcher } from "./theme-switcher";
+
+export const FooterUtilityRow: React.FC = () => {
+  return (
+    <div className="flex items-center justify-between">
+      <SocialLinks />
+      <ThemeSwitcher />
+    </div>
+  );
+};

src/components/footer.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { Link } from "./link";
-import { ThemeSwitcher } from "./theme-switcher";
 import { Icon } from "./icon";
-import { SocialLinks } from "./social-links";
+import { FooterUtilityRow } from "./footer-utility-row";
 
 interface FooterProps {
   gitHubEditLink?: string;
@@ -15,12 +14,13 @@ 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 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">
+      <FooterUtilityRow />
+      {(gitHubEditLink || lastModified) && (
+        <div className="mt-6 flex flex-wrap items-center gap-x-6 gap-y-3">
           {gitHubEditLink && (
             <Link
               href={gitHubEditLink}
-              className="inline-flex items-center gap-2 text-sm text-muted-base hover:text-muted-high-contrast transition-colors"
+              className="inline-flex items-center gap-2 text-sm text-muted-base transition-colors hover:text-muted-high-contrast"
             >
               <Icon name="Github" className="size-4" />
               <span>Edit this page on GitHub</span>
@@ -33,11 +33,7 @@ export const Footer: React.FC<FooterProps> = ({
             </span>
           )}
         </div>
-        <div className="flex items-center gap-2">
-          <SocialLinks />
-          <ThemeSwitcher />
-        </div>
-      </div>
+      )}
     </footer>
   );
 };

src/components/social-links.tsx

@@ -17,16 +17,16 @@ const socialLinks = [
 
 export const SocialLinks: React.FC = () => {
   return (
-    <nav aria-label="Sume social links" className="flex items-center gap-1">
+    <nav aria-label="Sume social links" className="flex items-center gap-6">
       {socialLinks.map(({ href, label, icon }) => (
         <Link
           key={href}
           href={href}
+          aria-label={label}
           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"
+          className="text-muted-base transition-colors 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,6 +1,6 @@
 import { NextPage } from "next";
 import { Card, CardGrid } from "@/components/card";
-import { SocialLinks } from "@/components/social-links";
+import { FooterUtilityRow } from "@/components/footer-utility-row";
 
 export const Background = () => (
   <div className="pointer-events-none fixed inset-0 -z-10 bg-muted-app" />
@@ -74,8 +74,8 @@ const Home: NextPage = () => {
         </p>
       </div>
 
-      <footer className="mt-24 flex justify-end border-t border-muted/70 pt-8">
-        <SocialLinks />
+      <footer className="mt-32 border-t border-muted/70 pt-8 pb-16">
+        <FooterUtilityRow />
       </footer>
     </div>
   );

src/styles/theme.tsx

@@ -26,7 +26,7 @@ export const useTheme = () => {
 
 export const ThemeProvider: React.FC<PropsWithChildren> = ({ children }) => (
   <NextThemeProvider
-    defaultTheme="light"
+    defaultTheme="system"
     storageKey="sume-docs-theme"
     disableTransitionOnChange
     attribute="data-theme"