eslint issues fixed

Author: nirnejak

src/components/atoms/Popover.tsx

@@ -20,7 +20,7 @@ const Popover: React.FC<Props> = ({ icon, children }) => (
   <Root>
     <Trigger asChild>
       <button
-        className="inline-flex h-9 w-9 cursor-default items-center justify-center rounded-full bg-neutral-800 p-3 text-neutral-300 outline-none hover:bg-neutral-600"
+        className="inline-flex size-9 cursor-default items-center justify-center rounded-full bg-neutral-800 p-3 text-neutral-300 outline-none hover:bg-neutral-600"
         aria-label="Update dimensions"
       >
         {icon}

src/components/atoms/Select.tsx

@@ -88,7 +88,7 @@ const Select: React.FC<Props> = ({
                       ))}
                     </Group>
                     {i !== options.length - 1 && (
-                      <Separator className="mx-1 my-2 h-[1px] bg-neutral-600" />
+                      <Separator className="mx-1 my-2 h-px bg-neutral-600" />
                     )}
                   </>
                 ))

src/components/atoms/Slider.tsx

@@ -28,7 +28,7 @@ const Slider: React.FC<Props> = ({
       <Track className="relative h-[3px] grow rounded-full bg-neutral-600">
         <Range className="absolute h-full rounded-full bg-neutral-300" />
       </Track>
-      <Thumb className="block h-5 w-5 rounded-[10px] bg-neutral-300 shadow-md hover:bg-neutral-400 focus:shadow-[0_0_0_5px] focus:shadow-neutral-100/40 focus:outline-none" />
+      <Thumb className="block size-5 rounded-[10px] bg-neutral-300 shadow-md hover:bg-neutral-400 focus:shadow-[0_0_0_5px] focus:shadow-neutral-100/40 focus:outline-none" />
     </Root>
   </form>
 )

src/main.tsx

@@ -39,8 +39,12 @@ const router = createBrowserRouter([
   },
 ])
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <RouterProvider router={router} />
-  </React.StrictMode>
-)
+const rootElement = document.getElementById("root")
+
+if (rootElement) {
+  ReactDOM.createRoot(rootElement).render(
+    <React.StrictMode>
+      <RouterProvider router={router} />
+    </React.StrictMode>
+  )
+}

src/pages/404.tsx

@@ -1,13 +1,11 @@
 import * as React from "react"
 
-interface Props {}
-
-const NotFound: React.FC<Props> = () => {
+const NotFound: React.FC = () => {
   return (
-    <div className="h-screen grid place-content-center text-center">
+    <div className="grid h-screen place-content-center text-center">
       <div className="bg-neutral-950 p-5">
-        <h1 className="font-semibold text-xl mb-1">Not Found</h1>
-        <p>the page you're looking for doesn't exists.</p>
+        <h1 className="mb-1 text-xl font-semibold">Not Found</h1>
+        <p>the page you&apos;re looking for doesn&apos;t exists.</p>
       </div>
     </div>
   )

src/pages/index.tsx

@@ -11,10 +11,12 @@ import Select from "src/components/atoms/Select"
 import Popover from "src/components/atoms/Popover"
 import GithubLink from "src/components/GithubLink"
 import Slider from "src/components/atoms/Slider"
+import { type JSX } from "react/jsx-runtime"
 
 type DISPLAY_TYPES = "table" | "bar" | "pie" | "line" | "area" | "map"
 
 const HomePage: React.FC = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [size, setSize] = React.useState(10)
   const [fileData, setFileData] = React.useState<Array<Record<string, any>>>([])
   const [fields, setFields] = React.useState<string[]>([])

src/pages/pie.tsx

@@ -1,6 +1,5 @@
 import React from "react"
 
-import classNames from "src/utils/classNames"
 import PieChart from "src/components/PieChart"
 
 const nivoData = [

src/vite-env.d.ts

@@ -1 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference types="vite/client" />