chore: Refactor site header and site header tabs components

apps/web/components/core/site-header-tabs.tsx

@@ -1,58 +1,58 @@
-"use client";
+'use client'
 
-import { cn } from "@ui/lib/utils";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { motion } from "framer-motion";
+import { cn } from '@ui/lib/utils'
+import { motion } from 'framer-motion'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
 
 function SiteHeaderTabs() {
-  const pathname = usePathname();
-  const acitvePath = pathname.split("/")[1];
+  const pathname = usePathname()
+  const acitvePath = pathname.split('/')[1]
   const tabs = [
     {
-      name: "Palette",
-      href: "/",
-      isActive: acitvePath === "",
+      href: '/',
+      isActive: acitvePath === '',
+      name: 'Palette',
     },
     {
-      name: "Visualizer",
-      href: "/visualizer",
-      isActive: acitvePath === "visualizer",
+      href: '/visualizer',
+      isActive: acitvePath === 'visualizer',
+      name: 'Visualizer',
     },
     {
-      name: "Code",
-      href: "/code",
-      isActive: acitvePath === "code",
+      href: '/code',
+      isActive: acitvePath === 'code',
+      name: 'Code',
     },
-  ];
+  ]
   return (
     <div className="max-w-xs">
-      <div className="grid w-full grid-cols-3 items-center justify-center rounded-md border border-border bg-muted p-1 text-muted-foreground">
+      <div className="transition-bg grid w-full grid-cols-3 items-center justify-center rounded-md border border-border bg-muted p-1 text-muted-foreground">
         {tabs.map((tab, index) => (
           <Link
-            key={index}
             className={cn(
-              "relative inline-flex items-center justify-center whitespace-nowrap rounded-sm px-2.5 py-[0.1875rem] text-sm ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-              "hover:text-foreground focus:text-foreground",
-              tab.isActive ? "text-foreground" : "text-muted-foreground",
+              'relative inline-flex items-center justify-center whitespace-nowrap rounded-sm px-2.5 py-[0.1875rem] text-sm ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+              'hover:text-foreground focus:text-foreground',
+              tab.isActive ? 'text-foreground' : 'text-muted-foreground'
             )}
             href={tab.href}
+            key={index}
           >
             <span className="relative isolate z-10">{tab.name}</span>
             {tab.isActive && (
               <motion.span
-                layoutId="site-header-tab-indicator"
                 className={cn(
-                  "absolute inset-0 z-0 h-full w-full rounded-sm",
-                  tab.isActive && "bg-background shadow",
+                  'transition-bg absolute inset-0 z-0 h-full w-full rounded-sm',
+                  tab.isActive && 'bg-background shadow'
                 )}
+                layoutId="site-header-tab-indicator"
               />
             )}
           </Link>
         ))}
       </div>
     </div>
-  );
+  )
 }
 
-export default SiteHeaderTabs;
+export default SiteHeaderTabs

apps/web/components/core/site-header.tsx

@@ -1,20 +1,21 @@
-import { Button } from "@ui/components/ui/button";
-import { GithubIcon } from "lucide-react";
-import Link from "next/link";
-import React, { Fragment } from "react";
-import SiteHeaderTabs from "./site-header-tabs";
-import FluidColorLogo from "../svg/fluid-color";
-import { cn } from "@ui/lib/utils";
+import { Button } from '@ui/components/ui/button'
+import { cn } from '@ui/lib/utils'
+import { GithubIcon } from 'lucide-react'
+import Link from 'next/link'
+import { Fragment } from 'react'
+
+import FluidColorLogo from '../svg/fluid-color'
+import SiteHeaderTabs from './site-header-tabs'
 
 function SiteHeader() {
   return (
     <div className="site-padding relative z-20 mx-auto grid w-full max-w-[120rem] grid-cols-6 items-center justify-between py-2">
-      <Link className="flex items-center" href="/" aria-label="Fluid Colors">
+      <Link aria-label="Fluid Colors" className="flex items-center" href="/">
         <FluidColorLogo className="h-6 w-6" />
         <span
           className={cn(
-            "ml-2 hidden font-light tracking-wide md:block",
-            "bg-gradient-to-r from-[hsl(var(--primary-500))] to-[hsl(var(--primary-700))] bg-clip-text text-transparent transition-colors dark:from-[hsl(var(--primary-600))] dark:to-[hsl(var(--primary-400))]",
+            'transition-bg ml-2 hidden font-light tracking-wide md:block',
+            'bg-gradient-to-r from-[hsl(var(--primary-500))] to-[hsl(var(--primary-700))] bg-clip-text text-transparent transition-colors dark:from-[hsl(var(--primary-600))] dark:to-[hsl(var(--primary-400))]'
           )}
         >
           Fluid Colors
@@ -24,22 +25,22 @@ function SiteHeader() {
         <SiteHeaderTabs />
       </div>
       <div className="flex items-center justify-end">
-        <Button variant="ghost" size="icon" asChild>
+        <Button asChild size="icon" variant="ghost">
           <Link
+            aria-label="Github"
             href="https://github.com/fluid-design-io/fluid-design"
-            target="_blank"
             rel="noopener noreferrer"
-            aria-label="Github"
+            target="_blank"
           >
             <Fragment>
               <div className="sr-only">Github</div>
-              <GithubIcon className="h-5 w-5" />
+              <GithubIcon className="h-5 w-5 text-muted-foreground" />
             </Fragment>
           </Link>
         </Button>
       </div>
     </div>
-  );
+  )
 }
 
-export default SiteHeader;
+export default SiteHeader