refactor: simplify some markups and styles

components/site-header.tsx

@@ -1,13 +1,18 @@
 import Link from "next/link";
 
 import { siteConfig } from "@/config/site";
+import { cn } from "@/lib/style";
 import { icons } from "@/components/icons";
 import { ThemeToggle } from "@/components/theme-toggle";
 
-export function SiteHeader() {
+type Props = {
+  className?: string;
+};
+
+export function SiteHeader({ className }: Props) {
   return (
-    <header className="flex h-14 items-center justify-between px-4">
-      <div className="flex items-baseline space-x-2.5">
+    <header className={cn("flex items-center justify-between px-4", className)}>
+      <div className="flex items-baseline gap-x-2.5">
         <Link className="text-lg" href="/">
           {siteConfig.name}
         </Link>
@@ -23,17 +28,15 @@ export function SiteHeader() {
           </a>
         </small>
       </div>
-      <div className="flex items-center space-x-1">
+      <div className="flex gap-x-1">
         <a
-          className="group rounded-md p-2"
+          className="group h-10 w-10 rounded-md p-2"
           href={siteConfig.links.github}
           target="_blank"
           rel="noreferrer"
         >
-          <div>
-            <icons.GitHub className="h-6 w-6 group-hover:opacity-70" />
-            <span className="sr-only">GitHub</span>
-          </div>
+          <icons.GitHub className="group-hover:opacity-70" />
+          <span className="sr-only">GitHub</span>
         </a>
         <ThemeToggle />
       </div>