update with eslint-plugin-perfectionist

postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {},
+    tailwindcss: {},
   },
 }

src/app/fonts.ts

@@ -1,8 +1,8 @@
 import { Raleway } from 'next/font/google'
 
 export const raleway = Raleway({
-  subsets: ['latin'],
   display: 'swap',
-  weight: ['400', '500', '600', '700'],
+  subsets: ['latin'],
   variable: '--font-text',
+  weight: ['400', '500', '600', '700'],
 })

src/components/header/header.tsx

@@ -1,8 +1,9 @@
-import { FC } from 'react'
-import { classnames } from '@/utils'
 import Menu from '@/components/header/menu/menu'
-import MenuItem from './menu/menu-item'
+import { classnames } from '@/utils'
+import { FC } from 'react'
+
 import MenuIcon from './menu/menu-icon/menu-icon'
+import MenuItem from './menu/menu-item'
 
 type HeaderProps = {
   className?: string

src/components/header/menu/menu-icon/menu-icon.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { FC, useContext } from 'react'
 import HeaderContext from '@/store/header-context'
 import { classnames } from '@/utils'
+import { FC, useContext } from 'react'
+
 import MenuIconBar from './menu-icon-bar'
 
 type MenuIconProps = {

src/components/header/menu/menu-item.tsx

@@ -1,5 +1,5 @@
-import { FC, ReactNode } from 'react'
 import Link from 'next/link'
+import { FC, ReactNode } from 'react'
 
 type MenuItemProps = {
   children: ReactNode

src/components/header/menu/menu.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { FC, ReactNode, useContext } from 'react'
 import HeaderContext from '@/store/header-context'
 import { classnames } from '@/utils'
+import { FC, ReactNode, useContext } from 'react'
 
 type MenuProps = {
   children: ReactNode

src/components/pages/hero.tsx

@@ -1,9 +1,10 @@
-import { FC } from 'react'
-import { classnames } from '@/utils'
-import Content from '@/components/ui/content'
-import styles from './hero.module.css'
 import Button from '@/components/ui/button'
+import Content from '@/components/ui/content'
 import Socials from '@/components/ui/socials/socials'
+import { classnames } from '@/utils'
+import { FC } from 'react'
+
+import styles from './hero.module.css'
 
 const Hero: FC = () => {
   return (

src/components/ui/button.tsx

@@ -1,32 +1,32 @@
-import { FC, ReactNode } from 'react'
 import { classnames } from '@/utils'
 import Link from 'next/link'
+import { FC, ReactNode } from 'react'
 
-type ButtonVariant = 'solid' | 'outline'
+type ButtonVariant = 'outline' | 'solid'
 
 type ButtonProps = {
   children: ReactNode
   className?: string
-  type?: 'button' | 'submit' | 'reset'
   disabled?: boolean
-  variant?: ButtonVariant
   href?: string
   onClick?: () => void
+  type?: 'button' | 'reset' | 'submit'
+  variant?: ButtonVariant
 }
 
 const buttonStyles: Record<ButtonVariant, string> = {
-  solid: 'text-light bg-accent md:hover:bg-opacity-80',
   outline: 'text-accent bg-transparent md:hover:text-light md:hover:bg-accent',
+  solid: 'text-light bg-accent md:hover:bg-opacity-80',
 }
 
 const Button: FC<ButtonProps> = ({
   children,
   className,
-  type = 'button',
   disabled,
-  variant = 'solid',
   href,
   onClick,
+  type = 'button',
+  variant = 'solid',
 }) => {
   return (
     <>
@@ -48,9 +48,9 @@ const Button: FC<ButtonProps> = ({
             buttonStyles[variant],
             className
           )}
-          type={type}
           disabled={disabled}
           onClick={onClick}
+          type={type}
         >
           {children}
         </button>

src/components/ui/socials/socials-item.tsx

@@ -1,5 +1,5 @@
-import { FC, ReactNode } from 'react'
 import Link from 'next/link'
+import { FC, ReactNode } from 'react'
 
 type SocialsItemProps = {
   children: ReactNode

src/components/ui/socials/socials.tsx

@@ -1,7 +1,7 @@
-import { FC } from 'react'
+import SocialsItem from '@/components/ui/socials/socials-item'
 import { classnames } from '@/utils'
+import { FC } from 'react'
 import { FaGithub, FaLinkedin } from 'react-icons/fa'
-import SocialsItem from '@/components/ui/socials/socials-item'
 
 type SocialsProps = {
   className?: string

src/hooks/use-media-query.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 interface MatchMediaChangeEvent extends Event {
   matches: boolean

src/store/providers/header-provider.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import { FC, ReactNode, useCallback, useEffect, useState } from 'react'
 import useMediaQuery from '@/hooks/use-media-query'
 import HeaderContext from '@/store/header-context'
 import { MOBILE_BREAKPOINT } from '@/utils'
+import { FC, ReactNode, useCallback, useEffect, useState } from 'react'
 
 type HeaderProviderProps = {
   children: ReactNode

src/store/providers/index.tsx

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react'
+
 import HeaderProvider from './header-provider'
 
 type ProvidersProps = { children: ReactNode }

src/utils/misc.ts

@@ -1,5 +1,5 @@
 export const classnames = (
-  ...names: (string | boolean | null | number | undefined)[]
+  ...names: (boolean | null | number | string | undefined)[]
 ): string => {
   const validNames = names.filter((n): n is string => typeof n === 'string')
   return validNames.join(' ')

tailwind.config.ts

@@ -6,37 +6,28 @@ const config: Config = {
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
+  plugins: [],
   theme: {
     extend: {
-      fontFamily: {
-        text: 'var(--font-text)',
-      },
-      colors: {
-        light: '#fff',
-        dark: '#1a1a1a',
-        ghost: '#f7f7ff',
-        accent: '#ff5100',
-      },
-      boxShadow: { blur: '0 4px 30px rgba(0, 0, 0, 0.1);' },
       animation: {
-        'top-down': 'top-down 0.5s ease forwards',
-        'top-up': 'top-up 0.5s ease forwards',
         'bottom-down': 'bottom-down 0.5s ease forwards',
         'bottom-up': 'bottom-up 0.5s ease forwards',
         scaled: 'scaled 0.5s ease forwards',
         'scaled-none': 'scaled-none 0.5s ease forwards',
+        'top-down': 'top-down 0.5s ease forwards',
+        'top-up': 'top-up 0.5s ease forwards',
+      },
+      boxShadow: { blur: '0 4px 30px rgba(0, 0, 0, 0.1);' },
+      colors: {
+        accent: '#ff5100',
+        dark: '#1a1a1a',
+        ghost: '#f7f7ff',
+        light: '#fff',
+      },
+      fontFamily: {
+        text: 'var(--font-text)',
       },
       keyframes: {
-        'top-down': {
-          '0%': { top: '0', transform: 'rotate(0)' },
-          '50%': { top: '10px', transform: 'rotate(0)' },
-          '100%': { top: '10px', transform: 'rotate(45deg)' },
-        },
-        'top-up': {
-          '0%': { top: '10px', transform: 'rotate(45deg)' },
-          '50%': { top: '10px', transform: 'rotate(0)' },
-          '100%': { top: '0', transform: 'rotate(0)' },
-        },
         'bottom-down': {
           '0%': { bottom: '10px', transform: 'rotate(135deg)' },
           '50%': { bottom: '10px', transform: 'rotate(0)' },
@@ -56,10 +47,19 @@ const config: Config = {
           '50%': { transform: 'scale(0)' },
           '100%': { transform: 'scale(0)' },
         },
+        'top-down': {
+          '0%': { top: '0', transform: 'rotate(0)' },
+          '50%': { top: '10px', transform: 'rotate(0)' },
+          '100%': { top: '10px', transform: 'rotate(45deg)' },
+        },
+        'top-up': {
+          '0%': { top: '10px', transform: 'rotate(45deg)' },
+          '50%': { top: '10px', transform: 'rotate(0)' },
+          '100%': { top: '0', transform: 'rotate(0)' },
+        },
       },
     },
   },
-  plugins: [],
 }
 
 export default config