configure eslint and autofix

.eslintrc.json

@@ -1,3 +1,12 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"]
+  "extends": [
+    "next/core-web-vitals",
+    "airbnb",
+    "airbnb-typescript",
+    "prettier",
+"plugin:react/jsx-runtime"
+  ],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  }
 }

components/Carousel.tsx

@@ -1,4 +1,3 @@
-import styles from "@/styles/Carousel.module.css";
 import React, { useCallback, useEffect, useRef } from "react";
 import Link from "next/link";
 import {
@@ -7,6 +6,7 @@ import {
   EmblaOptionsType,
 } from "embla-carousel";
 import useEmblaCarousel from "embla-carousel-react";
+import styles from "@/styles/Carousel.module.css";
 import { NextButton, PrevButton, usePrevNextButtons } from "./CarouselArrows";
 
 const TWEEN_FACTOR_BASE = 0.84;

components/Navbar.tsx

@@ -17,7 +17,7 @@ import sato_logo_nav from "../public/sato_logo_nav.png";
 
 type Anchor = "right";
 
-const Navbar = () => {
+function Navbar() {
   const [state, setState] = useState({
     right: false,
   });
@@ -70,7 +70,7 @@ const Navbar = () => {
         {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
           <ListItem key={text} disablePadding>
             <ListItemButton>
-              <ListItemIcon></ListItemIcon>
+              <ListItemIcon />
               <ListItemText primary={text} />
             </ListItemButton>
           </ListItem>
@@ -81,7 +81,7 @@ const Navbar = () => {
         {["All mail", "Trash", "Spam"].map((text, index) => (
           <ListItem key={text} disablePadding>
             <ListItemButton>
-              <ListItemIcon></ListItemIcon>
+              <ListItemIcon />
               <ListItemText primary={text} />
             </ListItemButton>
           </ListItem>
@@ -117,6 +117,6 @@ const Navbar = () => {
       </nav>
     </div>
   );
-};
+}
 
 export default Navbar;