♻️ Refactor import statements and fix formatting issues

.eslintrc.json

@@ -49,6 +49,7 @@
     "quotes": ["error", "double"],
     "no-console": 0,
     "no-control-regex": 0,
+    "react/prop-types": "off",
     "prettier/prettier": ["error", { "endOfLine": "auto" }]
   },
   "overrides": [

app/ClientLayout.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useMobileMenu } from "@/contexts/menu-mobile.context";
+
 import { Sidebar } from "../components/sidebar/Sidebar";
 
 interface ClientLayoutProps {

app/layout.tsx

@@ -3,11 +3,13 @@ import "@/styles/globals.css";
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 
-import { Analytics } from "@vercel/analytics/react";
-
 import { MobileMenuProvider } from "@/contexts/menu-mobile.context";
+
 import ClientLayout from "./ClientLayout";
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Analytics } from "@vercel/analytics/react";
+
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
   variable: "--font-geist-sans",

components/presence/Presence.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { useLanyard } from "react-use-lanyard";
+
 import { PresenceActivity } from "./PresenceActivity";
 import { PresenceListening } from "./PresenceListening";
 

components/presence/PresenceActivity.tsx

@@ -1,7 +1,9 @@
 import React from "react";
+import { Activity } from "react-use-lanyard";
 import Image from "next/image";
+
 import { Card, CardContent } from "@/components/ui/card";
-import { Activity } from "react-use-lanyard";
+
 import { TypographyMuted } from "../typography";
 
 type PresenceActivityProps = {

components/presence/PresenceListening.tsx

@@ -1,7 +1,9 @@
 import React from "react";
+import { Spotify } from "react-use-lanyard";
 import Image from "next/image";
+
 import { Card, CardContent } from "@/components/ui/card";
-import { Spotify } from "react-use-lanyard";
+
 import { TypographyMuted } from "../typography";
 
 type PresenceListeningProps = {

components/presence/test.tsx

@@ -1,6 +1,8 @@
 import React from "react";
+
+import { CodeIcon, RatIcon } from "lucide-react";
+
 import { Card, CardContent } from "@/components/ui/card";
-import { RatIcon, CodeIcon } from "lucide-react";
 
 export default function VSCodeInfoCard() {
   return (

components/sidebar/Sidebar.tsx

@@ -1,13 +1,15 @@
 "use client";
 
 import { Menu, X } from "lucide-react";
-import { Button } from "@/components/ui/button";
+
 import { TypographyH3 } from "@/components/typography";
-import MenuContainer from "./menu/MenuContainer";
+import { Button } from "@/components/ui/button";
 import { useMobileMenu } from "@/contexts/menu-mobile.context";
+
+import MenuContainer from "./menu/MenuContainer";
 import { SidebarFooter } from "./SidebarFooter";
 
-export const Sidebar: React.FC = ({}) => {
+export const Sidebar: React.FC = () => {
   const { isOpen, toggleMenu } = useMobileMenu();
 
   return (

components/sidebar/SidebarFooter.tsx

@@ -1,9 +1,11 @@
 import React from "react";
 import Link from "next/link";
+
 import { Github, Linkedin, Twitter } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { TypographyMuted, TypographySmall } from "@/components/typography";
+
 import { PresenceBlock } from "@/components/presence/Presence";
+import { TypographyMuted } from "@/components/typography";
+import { Button } from "@/components/ui/button";
 
 const socialLinks = [
   {

components/sidebar/menu/MenuContainer.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { usePathname, useRouter } from "next/navigation";
-import MenuItem from "./MenuItem";
+
 import { ROUTES } from "@/config/ROUTES";
 
-interface IMenuContainer {}
+import MenuItem from "./MenuItem";
 
-export default function MenuContainer({}: IMenuContainer) {
+export default function MenuContainer() {
   const router = useRouter();
   const pathName = usePathname();
 

components/sidebar/menu/MenuItem.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
+
 import useSound from "use-sound";
 
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
 interface MenuItemProps {
   label: string;
   isActive?: boolean;

components/typography/index.tsx

@@ -3,15 +3,13 @@ type TypographyType = {
   bold?: boolean;
 };
 
-const BASE_CLASS = "font-geist-sans text-neutral-50";
-
 export const TypographyH3: React.FC<TypographyType> = ({
   children,
   bold = true,
 }) => {
   return (
     <h3
-      className={`${BASE_CLASS} scroll-m-20 text-2xl  tracking-tight  ${
+      className={`scroll-m-20 text-2xl  tracking-tight  ${
         bold ? "font-semibold" : ""
       }`.trim()}
     >
@@ -21,17 +19,11 @@ export const TypographyH3: React.FC<TypographyType> = ({
 };
 
 export const TypographyP: React.FC<TypographyType> = ({ children }) => {
-  return (
-    <p className={`${BASE_CLASS} leading-7 [&:not(:first-child)]:mt-6`}>
-      {children}
-    </p>
-  );
+  return <p className="leading-7 [&:not(:first-child)]:mt-6">{children}</p>;
 };
 
 export const TypographySmall: React.FC<TypographyType> = ({ children }) => {
-  return (
-    <small className={`text-sm font-medium leading-none`}>{children}</small>
-  );
+  return <small className="text-sm font-medium leading-none">{children}</small>;
 };
 
 export const TypographyMuted: React.FC<TypographyType> = ({ children }) => {

components/ui/badge.tsx

@@ -1,7 +1,8 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -20,8 +21,8 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -30,7 +31,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

components/ui/button.tsx

@@ -1,8 +1,10 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+import { Slot } from "@radix-ui/react-slot";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -31,27 +33,27 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

components/ui/card.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -10,12 +10,12 @@ const Card = React.forwardRef<
     ref={ref}
     className={cn(
       "rounded-xl border bg-card text-card-foreground shadow",
-      className
+      className,
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -38,8 +38,8 @@ const CardTitle = React.forwardRef<
     className={cn("font-semibold leading-none tracking-tight", className)}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -50,16 +50,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -70,7 +70,14 @@ const CardFooter = React.forwardRef<
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

lib/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }