fix: eslint

app/(enter)/curation/hooks/page.tsx

@@ -13,11 +13,7 @@ export default function HooksPage() {
         subtitle="A simple hook to motion element with X or Y."
         title="useOffsetMotion"
       />
-      <ArrowLink
-        href="/curation/hooks/use-interval"
-        subtitle="A countdown button with motion."
-        title="useInterval"
-      />
+      <ArrowLink href="/curation/hooks/use-interval" subtitle="A countdown button with motion." title="useInterval" />
     </div>
   )
 }

app/(enter)/curation/hooks/use-interval/page.tsx

@@ -25,12 +25,7 @@ export default function UseInterval() {
 
   return (
     <div className="flex gap-4">
-      <Input
-        min={0}
-        onValueChange={value => setCounter(Number(value))}
-        type="number"
-        value={String(counter)}
-      />
+      <Input min={0} onValueChange={value => setCounter(Number(value))} type="number" value={String(counter)} />
       <Button
         className="relative min-w-[100px] overflow-hidden"
         onClick={() => {

app/(enter)/curation/hooks/use-offset-motion/page.tsx

@@ -1,8 +1,7 @@
 'use client'
 import { useOffsetMotion } from '~/curation/hooks/use-offset-motion'
 
-const elastic = (t: number) =>
-  t * (33 * t * t * t * t - 106 * t * t * t + 126 * t * t - 67 * t + 15)
+const elastic = (t: number) => t * (33 * t * t * t * t - 106 * t * t * t + 126 * t * t - 67 * t + 15)
 
 const inOutCirc = (t: number) => {
   t /= 0.5
@@ -11,8 +10,7 @@ const inOutCirc = (t: number) => {
   return (Math.sqrt(1 - t * t) + 1) / 2
 }
 
-const inOutCubic = (t: number) =>
-  t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
+const inOutCubic = (t: number) => (t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1)
 
 export default function UseOffsetMotion() {
   const [ref, start] = useOffsetMotion<HTMLDivElement>({ x: 200, y: 300 })

app/(enter)/curation/hooks/use-timer/page.tsx

@@ -13,23 +13,23 @@ export default function UseTimer() {
 
   return (
     <div>
-      <div>Click start button, it&apos;ll be finished after 3 seconds: <Chip>{str}</Chip></div>
-      <div>is running: <Chip>{`${isRunning}`}</Chip></div>
+      <div>
+        Click start button, it&apos;ll be finished after 3 seconds: <Chip>{str}</Chip>
+      </div>
+      <div>
+        is running: <Chip>{`${isRunning}`}</Chip>
+      </div>
       <div className="flex gap-2">
         <Button
-
           onClick={() => {
             setStr('pending.')
             start()
           }}
         >
           start timer
         </Button>
-        <Button onClick={pause}>
-          pause timer
-        </Button>
+        <Button onClick={pause}>pause timer</Button>
         <Button
-
           onClick={() => {
             setStr('pending.')
             restart()

app/(enter)/curation/layout.tsx

@@ -4,7 +4,7 @@ import { Inter } from 'next/font/google'
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
-  title: "Curations",
+  title: 'Curations',
 }
 
 export default function CurationLayout({ children }: { children: React.ReactNode }) {

app/(enter)/posts/page.tsx

@@ -22,9 +22,7 @@ export default async function PostsPage({ searchParams }: { searchParams: { tag?
           return (
             <div className="mb-4" key={post.slug}>
               <Link className="no-underline" href={`/posts${post.slug}`}>
-                <h2 className="inline-block transition-colors hover:text-primary">
-                  {post.title}
-                </h2>
+                <h2 className="inline-block transition-colors hover:text-primary">{post.title}</h2>
               </Link>
 
               <div className="text-sm">{post.date}</div>

app/layout.tsx

@@ -1,16 +1,17 @@
 import type { Metadata } from 'next'
 
-import '~/core/styles/custom.css'
-import '~/core/styles/globals.css'
-import '~/core/styles/heti.css'
 import { DATAPULSE_ID, GOOGLE_ID, SITE_CONFIG, isProd } from '~/core/utils/constants'
 
 import { Providers } from './providers'
 
+import '~/core/styles/custom.css'
+import '~/core/styles/globals.css'
+import '~/core/styles/heti.css'
+
 export const metadata: Metadata = {
   title: {
     default: 'nnecec.studio',
-    template: `%s - nnecec.studio`,
+    template: '%s - nnecec.studio',
   },
 }
 

core/components/about/intro.tsx

@@ -3,13 +3,7 @@ import { useEffect, useState } from 'react'
 
 import { motion, useScroll, useTransform } from 'framer-motion'
 
-import {
-  IconBeach,
-  IconCamera,
-  IconChefHat,
-  IconCode,
-  IconMusic,
-} from '@tabler/icons-react'
+import { IconBeach, IconCamera, IconChefHat, IconCode, IconMusic } from '@tabler/icons-react'
 
 import { Poker } from '~/core/ui/poker'
 

core/components/layout/footer.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image'
 
 import { Tooltip } from '@nextui-org/react'
-import { IconBrandGithub, IconBrandTwitter, IconNews } from '@tabler/icons-react'
+import { IconBrandGithub, IconBrandTwitter } from '@tabler/icons-react'
 
 import { SITE_CONFIG } from '~/core/utils/constants'
 
@@ -24,13 +24,7 @@ export const Footer = () => {
   return (
     <footer className="mt-20 grid grid-flow-row-dense place-items-center gap-4 rounded p-10 text-center">
       <div className="grid grid-flow-col gap-4">
-        <Image
-          alt="avatar"
-          className="inline-block rounded-full"
-          height={40}
-          src="/assets/avatar.webp"
-          width={40}
-        />
+        <Image alt="avatar" className="inline-block rounded-full" height={40} src="/assets/avatar.webp" width={40} />
         <div className="text-left">
           {author.name}
           <br />
@@ -48,9 +42,7 @@ export const Footer = () => {
               rel="noreferrer"
               target="_blank"
             >
-              <Tooltip content={link.name}>
-                {link.icon}
-              </Tooltip>
+              <Tooltip content={link.name}>{link.icon}</Tooltip>
             </a>
           ))}
         </div>

core/components/layout/header.tsx

@@ -24,8 +24,7 @@ const NAV_LINKS = [
 export const Header = () => {
   const pathname = usePathname()
 
-  const isActive = (path: string) =>
-    (path === '/' && pathname === path) || (path !== '/' && pathname.startsWith(path))
+  const isActive = (path: string) => (path === '/' && pathname === path) || (path !== '/' && pathname.startsWith(path))
 
   return (
     <motion.header className="fixed top-0 z-[999] flex h-header w-screen">

core/components/layout/index.tsx

@@ -36,7 +36,7 @@ export const Layout = ({ children, className }: PropsWithChildren<Props>) => {
       <Header />
       <motion.main
         animate="enter"
-        className={`container mx-auto min-h-screen px-4 pt-header md:px-0`}
+        className={'container mx-auto min-h-screen px-4 pt-header md:px-0'}
         exit="exit"
         initial="exit"
         variants={variants}

core/components/layout/logo.tsx

@@ -9,11 +9,7 @@ export const Logo = () => {
   const onHoverEnd = () => setShow(false)
 
   return (
-    <div
-      className="flex cursor-pointer items-center"
-      onMouseEnter={onHoverStart}
-      onMouseLeave={onHoverEnd}
-    >
+    <div className="flex cursor-pointer items-center" onMouseEnter={onHoverStart} onMouseLeave={onHoverEnd}>
       <motion.div
         animate={show ? 'show' : 'hide'}
         className="h-[30px] w-[30px] bg-current"
@@ -22,7 +18,7 @@ export const Logo = () => {
           hide: { borderRadius: 0 },
           show: { borderRadius: '50%' },
         }}
-       />
+      />
     </div>
   )
 }

core/components/posts/tag-picker.tsx

@@ -12,7 +12,7 @@ export const TagPicker = ({ tags }: { tags: string[] }) => {
       className="block w-full max-w-xs border-separate rounded-lg border bg-background p-2.5 text-sm text-foreground"
       onChange={e => {
         const value = e.target.value
-        value === '' ? router.replace(`/posts`) : router.replace(`/posts?tag=${e.target.value}`)
+        value === '' ? router.replace('/posts') : router.replace(`/posts?tag=${e.target.value}`)
       }}
       value={tag}
     >

core/components/theme/index.tsx

@@ -50,7 +50,7 @@ const colorSchemes = new Set(['light', 'dark'])
 const MEDIA = '(prefers-color-scheme: dark)'
 const isServer = typeof window === 'undefined'
 const ThemeContext = createContext<UseThemeProps | undefined>(undefined)
-// eslint-disable-next-line @typescript-eslint/no-empty-function
+
 const defaultContext: UseThemeProps = { setTheme: _ => {}, themes: [] }
 const defaultThemes = ['light', 'dark']
 
@@ -72,7 +72,7 @@ const disableAnimation = () => {
   const css = document.createElement('style')
   css.append(
     document.createTextNode(
-      `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,
+      '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}',
     ),
   )
   document.head.append(css)
@@ -129,12 +129,12 @@ const ThemeScript = memo(
 
       return fallback
         ? `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`
-        : `if(e==='light'||e==='dark')d.style.colorScheme=e`
+        : "if(e==='light'||e==='dark')d.style.colorScheme=e"
     })()
 
     const updateDOM = (name: string, literal = false, setColorScheme = true) => {
       const resolvedName = value ? value[name] : name
-      const val = literal ? name + `|| ''` : `'${resolvedName}'`
+      const val = literal ? name + "|| ''" : `'${resolvedName}'`
       let text = ''
 
       // MUCH faster to set colorScheme alongside HTML attribute/class
@@ -145,7 +145,7 @@ const ThemeScript = memo(
       }
 
       if (attribute === 'class') {
-        text += literal || resolvedName ? `c.add(${val})` : `null`
+        text += literal || resolvedName ? `c.add(${val})` : 'null'
       } else {
         if (resolvedName) {
           text += `d[s](n,${val})`
@@ -164,16 +164,16 @@ const ThemeScript = memo(
         return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM(
           'dark',
         )}}else{${updateDOM('light')}}}else if(e){${value ? `var x=${JSON.stringify(value)};` : ''}${updateDOM(
-          value ? `x[e]` : 'e',
+          value ? 'x[e]' : 'e',
           true,
         )}}${
-          defaultSystem ? '' : `else{` + updateDOM(defaultTheme, false, false) + '}'
+          defaultSystem ? '' : 'else{' + updateDOM(defaultTheme, false, false) + '}'
         }${fallbackColorScheme}}catch(e){}}()`
       }
 
       return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${
         value ? `var x=${JSON.stringify(value)};` : ''
-      }${updateDOM(value ? `x[e]` : 'e', true)}}else{${updateDOM(
+      }${updateDOM(value ? 'x[e]' : 'e', true)}}else{${updateDOM(
         defaultTheme,
         false,
         false,

core/hooks/use-local-storage.ts

@@ -2,7 +2,7 @@ import { useCallback, useLayoutEffect, useRef, useState } from 'react'
 import type { Dispatch, SetStateAction } from 'react'
 
 const isBrowser = typeof document !== 'undefined'
-// eslint-disable-next-line @typescript-eslint/no-empty-function
+
 const noop = () => {}
 
 type parserOptions<T> =
@@ -27,11 +27,7 @@ export const useLocalStorage = <T>(
     throw new Error('useLocalStorage key may not be falsy')
   }
 
-  const deserializer = options
-    ? (options.raw
-      ? (value: any) => value
-      : options.deserializer)
-    : JSON.parse
+  const deserializer = options ? (options.raw ? (value: any) => value : options.deserializer) : JSON.parse
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const initializer = useRef((key: string) => {
@@ -63,17 +59,16 @@ export const useLocalStorage = <T>(
   const set: Dispatch<SetStateAction<T | undefined>> = useCallback(
     valOrFunc => {
       try {
-        const newState =
-          typeof valOrFunc === 'function' ? (valOrFunc as (...args: any[])=> any)(state) : valOrFunc
+        const newState = typeof valOrFunc === 'function' ? (valOrFunc as (...args: any[]) => any)(state) : valOrFunc
         if (newState === undefined) return
         let value: string
 
-        if (options)
-          if (options.raw)
+        if (options) {
+          if (options.raw) {
             value = typeof newState === 'string' ? newState : JSON.stringify(newState)
-          else if (options.serializer) value = options.serializer(newState)
+          } else if (options.serializer) value = options.serializer(newState)
           else value = JSON.stringify(newState)
-        else value = JSON.stringify(newState)
+        } else value = JSON.stringify(newState)
 
         localStorage.setItem(key, value)
         setState(deserializer(value))

core/types/index.d.ts

@@ -1,15 +1,9 @@
-type Falsy = false | 0 | '' | null | undefined
+type Falsy = '' | 0 | false | null | undefined
 
 interface Array<T> {
-  filter<S extends T>(
-    predicate: BooleanConstructor,
-    thisArg?: any
-  ): Exclude<S, Falsy>[]
+  filter<S extends T>(predicate: BooleanConstructor, thisArg?: any): Exclude<S, Falsy>[]
 }
 
 interface ReadonlyArray<T> {
-  filter<S extends T>(
-    predicate: BooleanConstructor,
-    thisArg?: any
-  ): Exclude<S, Falsy>[]
+  filter<S extends T>(predicate: BooleanConstructor, thisArg?: any): Exclude<S, Falsy>[]
 }

core/ui/code-block/index.tsx

@@ -10,7 +10,12 @@ import useTimeoutFn from '~/core/hooks/use-timeout'
 
 import { theme } from './theme'
 
-export const CodeBlock = ({ children, language }) => {
+type CodeBlockProps = {
+  children: string
+  language: string
+}
+
+export const CodeBlock = ({ children, language }: CodeBlockProps) => {
   const [copied, setCopied] = useState(false)
   const reset = useTimeoutFn(() => {
     setCopied(false)

core/ui/code-block/theme.ts

@@ -68,14 +68,7 @@ export const theme = {
       style: {
         color: 'hsl(29, 54%, 61%)',
       },
-      types: [
-        'attr-name',
-        'class-name',
-        'boolean',
-        'constant',
-        'number',
-        'atrules',
-      ],
+      types: ['attr-name', 'class-name', 'boolean', 'constant', 'number', 'atrules'],
     },
     {
       style: {
@@ -93,15 +86,7 @@ export const theme = {
       style: {
         color: 'hsl(95, 38%, 62%)',
       },
-      types: [
-        'selector',
-        'string',
-        'char',
-        'builtin',
-        'inserted',
-        'regex',
-        'attr-value',
-      ],
+      types: ['selector', 'string', 'char', 'builtin', 'inserted', 'regex', 'attr-value'],
     },
     {
       style: {