ci: fix prettier errors

.github/workflows/static-analysis.yaml

@@ -12,4 +12,4 @@ jobs:
       - name: Run eslint
         run: npm run lint
       - name: Run prettier
-        run: npm run format
+        run: npm run format

src/components/common/SwapButton.tsx

@@ -8,7 +8,7 @@ const SwapButton = ({ handleSwapColors }: SwapButtonProps) => (
   <div className='flex flex-col items-center justify-center'>
     <button
       type='button'
-      className='flex p-2 my-2 md:my-4 space-x-2 lg:size-10 items-center justify-center rounded-md border-[1px] border-solid border-gray-400 hover:border-2 hover:border-blue-600 dark:border-0 dark:bg-gray-50 dark:bg-opacity-15 dark:hover:border-2 dark:hover:border-blue-300 lg:mt-7'
+      className='my-2 flex items-center justify-center space-x-2 rounded-md border-[1px] border-solid border-gray-400 p-2 hover:border-2 hover:border-blue-600 dark:border-0 dark:bg-gray-50 dark:bg-opacity-15 dark:hover:border-2 dark:hover:border-blue-300 md:my-4 lg:mt-7 lg:size-10'
       onClick={handleSwapColors}
     >
       <IoSwapHorizontal aria-hidden='true' focusable='false' size={24} />

src/components/contrast/ColorPicker.tsx

@@ -30,7 +30,9 @@ const ColorPicker = ({ id, label, color, onChange }: ColorPickerProps) => {
         color={color}
         onChange={onChange}
       />
-      <span className='hidden peer-has-[input:invalid]:block absolute bottom-[-4] text-red-500 dark:text-red-200 text-sm lg:mt-2'>Please input correct HEX value</span>
+      <span className='absolute bottom-[-4] hidden text-sm text-red-500 peer-has-[input:invalid]:block dark:text-red-200 lg:mt-2'>
+        Please input correct HEX value
+      </span>
     </div>
   )
 }

src/components/contrast/ColorPickerInput.tsx

@@ -1,23 +1,23 @@
-import { ColorPickerProps } from "@/types/ColorPicker"
+import { ColorPickerProps } from '@/types/ColorPicker'
 
 const ColorPickerInput = ({ id, label, color, onChange }: ColorPickerProps) => {
   const textInputId = `${id}-hex-input`
   const colorInputId = `${id}-picker-input`
 
   return (
     <div className='peer flex flex-col'>
-      <div className='flex w-full rounded-md border-[1px] border-gray-400 p-1 dark:border-0 dark:bg-gray-50 dark:bg-opacity-15 md:w-full has-[input:invalid]:border-red-500 dark:has-[input:invalid]:border-[1px] dark:has-[input:invalid]:border-red-200'>
+      <div className='flex w-full rounded-md border-[1px] border-gray-400 p-1 has-[input:invalid]:border-red-500 dark:border-0 dark:bg-gray-50 dark:bg-opacity-15 dark:has-[input:invalid]:border-[1px] dark:has-[input:invalid]:border-red-200 md:w-full'>
         <label className='sr-only' htmlFor={textInputId}>
           {label} HEX
         </label>
         <input
-          className='mr-2 h-10 w-[100%] appearance-none rounded-md border-gray-300 p-2 hover:border-2 hover:border-blue-600 dark:hover:border-blue-300 invalid:text-red-500 dark:invalid:text-red-200'
+          className='mr-2 h-10 w-[100%] appearance-none rounded-md border-gray-300 p-2 invalid:text-red-500 hover:border-2 hover:border-blue-600 dark:invalid:text-red-200 dark:hover:border-blue-300'
           style={{ backgroundColor: 'transparent' }}
           id={textInputId}
           type='text'
           value={color}
           placeholder='#000000'
-          pattern="#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?"
+          pattern='#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?'
           required
           onChange={(e) => onChange(e.target.value)}
         />

src/components/theme/DarkModeProvider.tsx

@@ -8,7 +8,7 @@ type ProviderProps = {
 }
 
 const DarkModeProvider = ({ children }: ProviderProps) => (
-  <ThemeProvider attribute='class' defaultTheme="system" enableSystem>
+  <ThemeProvider attribute='class' defaultTheme='system' enableSystem>
     {children}
   </ThemeProvider>
 )

src/components/theme/DarkModeToggle.tsx

@@ -13,14 +13,10 @@ const DarkModeToggle = () => {
     <button
       type='button'
       aria-label={theme === 'light' ? 'Toggle dark mode' : 'Toggle light mode'}
-      className='flex flex-col justify-center ml-3'
+      className='ml-3 flex flex-col justify-center'
       onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
     >
-      {theme === 'light' ? (
-        <SunIcon />
-      ) : (
-        <MoonIcon />
-      )}
+      {theme === 'light' ? <SunIcon /> : <MoonIcon />}
     </button>
   )
 }

src/components/theme/MoonIcon.tsx

@@ -1,16 +1,22 @@
-import React from "react"
+import React from 'react'
 
 const MoonIcon = () => (
   <svg
-    aria-hidden="true"
+    aria-hidden='true'
     tabIndex={-1}
-    className="group w-10 h-10 fill-current transition duration-500 ease-in-out hover:rotate-12"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
+    className='group h-10 w-10 fill-current transition duration-500 ease-in-out hover:rotate-12'
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 16 16'
   >
-    <path className="text-stone-200 group-hover:text-stone-400" d="M6.2 1C3.2 1.8 1 4.6 1 7.9 1 11.8 4.2 15 8.1 15c3.3 0 6-2.2 6.9-5.2C9.7 11.2 4.8 6.3 6.2 1Z" />
-    <path className='text-yellow-500 group-hover:animate-pulse' d="M12.5 5a.625.625 0 0 1-.625-.625 1.252 1.252 0 0 0-1.25-1.25.625.625 0 1 1 0-1.25 1.252 1.252 0 0 0 1.25-1.25.625.625 0 1 1 1.25 0c.001.69.56 1.249 1.25 1.25a.625.625 0 1 1 0 1.25c-.69.001-1.249.56-1.25 1.25A.625.625 0 0 1 12.5 5Z" />
+    <path
+      className='text-stone-200 group-hover:text-stone-400'
+      d='M6.2 1C3.2 1.8 1 4.6 1 7.9 1 11.8 4.2 15 8.1 15c3.3 0 6-2.2 6.9-5.2C9.7 11.2 4.8 6.3 6.2 1Z'
+    />
+    <path
+      className='text-yellow-500 group-hover:animate-pulse'
+      d='M12.5 5a.625.625 0 0 1-.625-.625 1.252 1.252 0 0 0-1.25-1.25.625.625 0 1 1 0-1.25 1.252 1.252 0 0 0 1.25-1.25.625.625 0 1 1 1.25 0c.001.69.56 1.249 1.25 1.25a.625.625 0 1 1 0 1.25c-.69.001-1.249.56-1.25 1.25A.625.625 0 0 1 12.5 5Z'
+    />
   </svg>
 )
 
-export default MoonIcon
+export default MoonIcon

src/components/theme/SunIcon.tsx

@@ -1,16 +1,22 @@
-import React from "react";
+import React from 'react'
 
 const SunIcon = () => (
   <svg
-    aria-hidden="true"
+    aria-hidden='true'
     tabIndex={-1}
-    className="group w-10 h-10 fill-current transition-colors duration-300 ease-in-out hover:animate-spin-xslow"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
+    className='group h-10 w-10 fill-current transition-colors duration-300 ease-in-out hover:animate-spin-xslow'
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 16 16'
   >
-    <path className="text-yellow-300" d="M7 0h2v2H7zM12.88 1.637l1.414 1.415-1.415 1.413-1.413-1.414zM14 7h2v2h-2zM12.95 14.433l-1.414-1.413 1.413-1.415 1.415 1.414zM7 14h2v2H7zM2.98 14.364l-1.413-1.415 1.414-1.414 1.414 1.415zM0 7h2v2H0zM3.05 1.706 4.463 3.12 3.05 4.535 1.636 3.12z" />
-    <path className="text-yellow-300 group-hover:text-yellow-400" d="M8 4C5.8 4 4 5.8 4 8s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4Z" />
+    <path
+      className='text-yellow-300'
+      d='M7 0h2v2H7zM12.88 1.637l1.414 1.415-1.415 1.413-1.413-1.414zM14 7h2v2h-2zM12.95 14.433l-1.414-1.413 1.413-1.415 1.415 1.414zM7 14h2v2H7zM2.98 14.364l-1.413-1.415 1.414-1.414 1.414 1.415zM0 7h2v2H0zM3.05 1.706 4.463 3.12 3.05 4.535 1.636 3.12z'
+    />
+    <path
+      className='text-yellow-300 group-hover:text-yellow-400'
+      d='M8 4C5.8 4 4 5.8 4 8s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4Z'
+    />
   </svg>
 )
 
-export default SunIcon
+export default SunIcon

tailwind.config.ts

@@ -16,7 +16,7 @@ const config: Config = {
       animation: {
         'spin-slow': 'spin 5s linear infinite',
         'spin-xslow': 'spin 30s linear infinite',
-      }
+      },
     },
   },
   plugins: [require('@tailwindcss/typography')],

tsconfig.json

@@ -18,13 +18,13 @@
     "incremental": true,
     "plugins": [
       {
-        "name": "next",
-      },
+        "name": "next"
+      }
     ],
     "paths": {
-      "@/*": ["./src/*"],
-    },
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules"]
 }