refactor: eslint/prettier ➡️ biome

components/layout/footer.tsx

@@ -1,26 +1,24 @@
-import { env } from "@/lib/env";
 import Link from "next/link";
 import siteConfig from "@/lib/config/site";
+import { env } from "@/lib/env";
 
-const Footer = () => {
-  return (
-    <footer className="text-muted-foreground mt-8 w-full py-6 text-center text-[13px] leading-loose">
-      All content is licensed under{" "}
-      <Link href="/license" className="underline underline-offset-4">
-        {siteConfig.license}
-      </Link>
-      . View source on{" "}
-      <a
-        href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}`}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="underline underline-offset-4"
-      >
-        GitHub
-      </a>
-      .
-    </footer>
-  );
-};
+const Footer = () => (
+  <footer className="mt-8 w-full py-6 text-center text-[13px] text-muted-foreground leading-loose">
+    All content is licensed under{" "}
+    <Link href="/license" className="underline underline-offset-4">
+      {siteConfig.license}
+    </Link>
+    . View source on{" "}
+    <a
+      href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="underline underline-offset-4"
+    >
+      GitHub
+    </a>
+    .
+  </footer>
+);
 
 export { Footer };

components/layout/header.tsx

@@ -1,19 +1,18 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { useTheme } from "next-themes";
+import { MoonIcon, SunIcon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import avatarImg from "@/app/avatar.jpg";
+import { GitHubIcon } from "@/components/icons";
+import { Menu } from "@/components/layout/menu";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import { Menu } from "@/components/layout/menu";
-import { GitHubIcon } from "@/components/icons";
-import { cn } from "@/lib/utils";
 import authorConfig from "@/lib/config/author";
 import siteConfig from "@/lib/config/site";
-import { MoonIcon, SunIcon } from "lucide-react";
-
-import avatarImg from "@/app/avatar.jpg";
+import { cn } from "@/lib/utils";
 
 const Header = ({ className }: { className?: string }) => {
   const [isScrolled, setIsScrolled] = useState(false);
@@ -40,7 +39,7 @@ const Header = ({ className }: { className?: string }) => {
         "bg-background/0 backdrop-blur-none",
         "data-[scrolled=true]:bg-background/80 data-[scrolled=true]:backdrop-blur-md",
         "data-[scrolled=true]:border-border/50 data-[scrolled=true]:border-b",
-        className
+        className,
       )}
     >
       <header className="mx-auto flex w-full max-w-4xl items-center justify-between px-5 py-4">
@@ -49,18 +48,18 @@ const Header = ({ className }: { className?: string }) => {
             href="/"
             rel="author"
             aria-label={siteConfig.name}
-            className="hover:text-foreground/85 flex shrink-0 items-center gap-2.5 pr-2 hover:no-underline"
+            className="flex shrink-0 items-center gap-2.5 pr-2 hover:text-foreground/85 hover:no-underline"
           >
             <Image
               src={avatarImg}
               alt={`Photo of ${siteConfig.name}`}
-              className="border-ring/30 size-[40px] rounded-full border md:size-[32px]"
+              className="size-[40px] rounded-full border border-ring/30 md:size-[32px]"
               width={40}
               height={40}
               quality={75}
               priority
             />
-            <span className="text-[17.5px] font-medium tracking-tight whitespace-nowrap max-md:sr-only">
+            <span className="whitespace-nowrap font-medium text-[17.5px] tracking-tight max-md:sr-only">
               {siteConfig.name}
             </span>
           </Link>
@@ -69,8 +68,17 @@ const Header = ({ className }: { className?: string }) => {
         </div>
 
         <div className="flex items-center gap-2">
-          <Button variant="ghost" size="sm" aria-label="Open GitHub profile" asChild>
-            <a href={`https://github.com/${authorConfig.social.github}`} target="_blank" rel="noopener noreferrer">
+          <Button
+            variant="ghost"
+            size="sm"
+            aria-label="Open GitHub profile"
+            asChild
+          >
+            <a
+              href={`https://github.com/${authorConfig.social.github}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <GitHubIcon />
             </a>
           </Button>
@@ -81,8 +89,14 @@ const Header = ({ className }: { className?: string }) => {
             aria-label="Toggle theme"
             className="group"
           >
-            <SunIcon className="group-hover:stroke-orange-600 dark:hidden" aria-hidden="true" />
-            <MoonIcon className="not-dark:hidden group-hover:stroke-yellow-400" aria-hidden="true" />
+            <SunIcon
+              className="group-hover:stroke-orange-600 dark:hidden"
+              aria-hidden="true"
+            />
+            <MoonIcon
+              className="not-dark:hidden group-hover:stroke-yellow-400"
+              aria-hidden="true"
+            />
           </Button>
         </div>
       </header>

components/layout/menu.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import { useSelectedLayoutSegment } from "next/navigation";
 import { ChevronDownIcon } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import Link from "next/link";
+import { useSelectedLayoutSegment } from "next/navigation";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
-  DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 
 const menuItems = [
@@ -29,25 +29,27 @@ const menuItems = [
 const Menu = () => {
   const segment = useSelectedLayoutSegment() || "";
 
-  const currentItem = menuItems.find((item) => item.href?.split("/")[1] === segment);
+  const currentItem = menuItems.find(
+    (item) => item.href?.split("/")[1] === segment,
+  );
   const currentLabel = segment === "" ? "Home" : currentItem?.text || "Menu";
 
   return (
     <nav data-slot="navigation-menu">
       {/* Desktop: Show all buttons */}
       <div className="hidden items-center gap-1.5 sm:flex">
-        {menuItems.map((item, index) => {
+        {menuItems.map((item) => {
           const isCurrent = item.href?.split("/")[1] === segment;
 
           return (
             <Button
               asChild
-              key={index}
+              key={item.href}
               variant="ghost"
               size="sm"
               aria-label={item.text}
               data-current={isCurrent || undefined}
-              className="data-current:bg-accent/60 data-current:text-accent-foreground text-[15px] leading-none"
+              className="text-[15px] leading-none data-current:bg-accent/60 data-current:text-accent-foreground"
             >
               <Link href={item.href}>{item.text}</Link>
             </Button>
@@ -68,16 +70,20 @@ const Menu = () => {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start" className="min-w-[140px]">
-          <DropdownMenuItem asChild data-current={segment === ""} aria-current={segment === "" ? "page" : undefined}>
+          <DropdownMenuItem
+            asChild
+            data-current={segment === ""}
+            aria-current={segment === "" ? "page" : undefined}
+          >
             <Link href="/">Home</Link>
           </DropdownMenuItem>
-          {menuItems.map((item, index) => {
+          {menuItems.map((item) => {
             const isCurrent = item.href?.split("/")[1] === segment;
 
             return (
               <DropdownMenuItem
                 asChild
-                key={index}
+                key={item.href}
                 data-current={isCurrent || undefined}
                 aria-current={isCurrent ? "page" : undefined}
               >

components/layout/page-title.tsx

@@ -8,20 +8,21 @@ const PageTitle = ({
   ...rest
 }: React.ComponentProps<"h1"> & {
   canonical: string;
-}) => {
-  return (
-    <h1
-      className={cn("not-prose mt-0 mb-6 text-left text-3xl font-medium tracking-tight lowercase", className)}
-      {...rest}
+}) => (
+  <h1
+    className={cn(
+      "not-prose mt-0 mb-6 text-left font-medium text-3xl lowercase tracking-tight",
+      className,
+    )}
+    {...rest}
+  >
+    <Link
+      href={canonical}
+      className="text-foreground no-underline before:mr-[-3px] before:text-muted-foreground before:tracking-wider before:content-['\002E\002F']"
     >
-      <Link
-        href={canonical}
-        className="before:text-muted-foreground text-foreground no-underline before:mr-[-3px] before:tracking-wider before:content-['\002E\002F']"
-      >
-        {children}
-      </Link>
-    </h1>
-  );
-};
+      {children}
+    </Link>
+  </h1>
+);
 
 export { PageTitle };