linting ree

Author: SnaveSutit

.eslintrc

@@ -1,6 +1,6 @@
 {
-  "extends": ["next", "next/core-web-vitals"],
-  "rules": {
-    "react/display-name": "off"
-  }
+	"extends": ["next", "next/core-web-vitals"],
+	"rules": {
+		"react/display-name": "off"
+	}
 }

.prettierignore

@@ -0,0 +1,3 @@
+env
+dist
+node_modules

.prettierrc.json

@@ -0,0 +1,10 @@
+{
+	"$schema": "http://json.schemastore.org/prettierrc",
+	"tabWidth": 4,
+	"useTabs": true,
+	"semi": false,
+	"singleQuote": true,
+	"arrowParens": "avoid",
+	"trailingComma": "es5",
+	"printWidth": 100
+}

README.md

@@ -22,8 +22,8 @@ The `pages/api` directory is mapped to `/api/*`. Files in this directory are tre
 
 To learn more about Next.js, take a look at the following resources:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+-   [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+-   [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 

components/banner.js

@@ -1,19 +1,26 @@
-import styles from "./banner.module.scss";
+import styles from './banner.module.scss'
 // import SplashImage from "../assets/splash.png";
 // import Image from "next/image"
-import { useMedia } from "react-use";
-import classNames from "classnames";
+import { useMedia } from 'react-use'
+import classNames from 'classnames'
 export function Banner() {
-  const small = useMedia("(max-width:500px)",false);
-  const med = useMedia("(max-width:1000px)",false) && !small;
-  const large = useMedia("(min-width:1000px)",true) && !med;
-  return (
-      <div className={styles.root}>
-        <div className={classNames(styles.content,large && styles.large,med&&styles.medium,small&&styles.small)}>
-            {/* <Image src={SplashImage} alt={"splash"} width={globalThis && globalThis.window && globalThis.window?.innerWidth||100}></Image> */}
-            <div className={styles.image}></div>
-            <div className={styles.gradient}></div>
-        </div>
-      </div>
-    );
-}
+	const small = useMedia('(max-width:500px)', false)
+	const med = useMedia('(max-width:1000px)', false) && !small
+	const large = useMedia('(min-width:1000px)', true) && !med
+	return (
+		<div className={styles.root}>
+			<div
+				className={classNames(
+					styles.content,
+					large && styles.large,
+					med && styles.medium,
+					small && styles.small
+				)}
+			>
+				{/* <Image src={SplashImage} alt={"splash"} width={globalThis && globalThis.window && globalThis.window?.innerWidth||100}></Image> */}
+				<div className={styles.image}></div>
+				<div className={styles.gradient}></div>
+			</div>
+		</div>
+	)
+}

components/banner.module.scss

@@ -1,31 +1,27 @@
 .root {
-  display: flex;
-  justify-content: center;
-  z-index: -1;
-  position: absolute;
-  width: 100%;
-  overflow-x: hidden;
-  > .content {
-    position: relative;
-    width:100vw;
-    overflow-x: hidden;
-    > .gradient {
-      background: linear-gradient(
-        180deg,
-        #333333 0%,
-        rgba(255, 255, 255, 0) 100%
-      );
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-    >.image{
-      background-image: url("/splash.png");
-      background-size: cover;
-      width: 100vw;
-      height: 100vh;
-    }
-  }
+	display: flex;
+	justify-content: center;
+	z-index: -1;
+	position: absolute;
+	width: 100%;
+	overflow-x: hidden;
+	> .content {
+		position: relative;
+		width: 100vw;
+		overflow-x: hidden;
+		> .gradient {
+			background: linear-gradient(180deg, #333333 0%, rgba(255, 255, 255, 0) 100%);
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+		> .image {
+			background-image: url('/splash.png');
+			background-size: cover;
+			width: 100vw;
+			height: 100vh;
+		}
+	}
 }