add eslint with nextjs rule

components/mdComponents.tsx

@@ -1,31 +1,42 @@
-export default {
-  h1: (props: any) => (
+const H1 = (props: any) => (
     <h1
-      className="leading-tight border-b text-4xl font-semibold mb-4 mt-6 pb-2"
+      className="pb-2 mt-6 mb-4 text-4xl font-semibold leading-tight border-b"
       {...props}
     />
-  ),
-  h2: (props: any) => (
+  )
+const H2 = (props: any) => (
     <h2
-      className="leading-tight border-b text-2xl font-semibold mb-4 mt-6 pb-2"
+      className="pb-2 mt-6 mb-4 text-2xl font-semibold leading-tight border-b"
       {...props}
     />
-  ),
-  h3: (props: any) => (
-    <h3 className="leading-snug text-lg font-semibold mb-4 mt-6" {...props} />
-  ),
-  h4: (props: any) => (
-    <h4 className="leading-none text-base font-semibold mb-4 mt-6" {...props} />
-  ),
-  h5: (props: any) => (
-    <h5 className="leading-tight text-sm font-semibold mb-4 mt-6" {...props} />
-  ),
-  h6: (props: any) => (
+  )
+const H3 = (props: any) => (
+    <h3 className="mt-6 mb-4 text-lg font-semibold leading-snug" {...props} />
+  )
+const H4 = (props: any) => (
+    <h4 className="mt-6 mb-4 text-base font-semibold leading-none" {...props} />
+  )
+const H5 = (props: any) => (
+    <h5 className="mt-6 mb-4 text-sm font-semibold leading-tight" {...props} />
+  )
+const H6 = (props: any) => (
     <h6
-      className="leading-tight text-sm font-semibold text-gray-600 mb-4 mt-6"
+      className="mt-6 mb-4 text-sm font-semibold leading-tight text-gray-600"
       {...props}
     />
-  ),
-  ul: (props: any) => <ul className="text-base pl-8 list-disc" {...props} />,
-  ol: (props: any) => <ol className="text-base pl-8 list-decimal" {...props} />,
+  )
+const UL = (props: any) => <ul className="pl-8 text-base list-disc" {...props} />
+const OL = (props: any) => <ol className="pl-8 text-base list-decimal" {...props} />
+
+const MdComponents = {
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H6,
+  ul: UL,
+  ol: OL,
 }
+
+export default MdComponents;