Fix build issues

.eslintrc.json

@@ -3,7 +3,7 @@
     "browser": true,
     "es2021": true
   },
-  "extends": ["plugin:react/recommended", "airbnb", "prettier"],
+  "extends": ["plugin:react/recommended", "prettier"],
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true

.prettierrc.json

@@ -1,9 +1,9 @@
 {
-    "tabWidth": 2,
-    "useTabs": true,
-    "printWidth": 80,
-    "semi": true,
-    "trailingComma": "es5",
-    "singleQuote": true,
-    "endOfLine": "lf"
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 80,
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "endOfLine": "lf"
 }

src/App.tsx

@@ -1,16 +1,17 @@
 import Grid from './Grid';
 import MapCol from './MapCol';
 import SearchCol from './SearchCol';
+import React from 'react';
 
 function App() {
-	return (
-		<div className="md:flex flex-col min-h-screen">
-			<header className="grow-0 items-center text-center">
-				<h1>Find your next epidemiology tools</h1>
-			</header>
-			<Grid first={<SearchCol />} second={<MapCol />} />
-		</div>
-	);
+  return (
+    <div className="md:flex flex-col min-h-screen">
+      <header className="grow-0 items-center text-center">
+        <h1>Find your next epidemiology tools</h1>
+      </header>
+      <Grid first={<SearchCol />} second={<MapCol />} />
+    </div>
+  );
 }
 
 export default App;

src/Grid.tsx

@@ -1,10 +1,12 @@
+import React from 'react';
+
 const ResponsiveGrid = ({ first, second }: any) => {
-	return (
-		<div className="grid grid-cols-1 md:grid-cols-2 gap-4 grow">
-			<div className="bg-blue-500 p-4">{first}</div>
-			<div className="bg-green-500 p-4">{second}</div>
-		</div>
-	);
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 grow">
+      <div className="bg-blue-500 p-4">{first}</div>
+      <div className="bg-green-500 p-4">{second}</div>
+    </div>
+  );
 };
 
 export default ResponsiveGrid;

src/MapCol.tsx

@@ -1,5 +1,7 @@
+import React from 'react';
+
 const MapCol = () => {
-	return <div>Column/Row 2</div>;
+  return <div>Column/Row 2</div>;
 };
 
 export default MapCol;

src/SearchCol.tsx

@@ -1,48 +1,50 @@
+import React from 'react';
+
 const SearchCol = () => {
-	return (
-		<div>
-			<form className="max-w-md mx-auto">
-				<label
-					htmlFor="default-search"
-					className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
-				>
-					Search
-				</label>
-				<div className="relative">
-					<div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-						<svg
-							className="w-4 h-4 text-gray-500 dark:text-gray-400"
-							aria-hidden="true"
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 20 20"
-						>
-							<path
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
-							/>
-						</svg>
-					</div>
-					<input
-						type="search"
-						id="default-search"
-						className="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-						placeholder="Search Mockups, Logos..."
-						required
-					/>
-					<button
-						type="submit"
-						className="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-					>
-						Search
-					</button>
-				</div>
-			</form>
-		</div>
-	);
+  return (
+    <div>
+      <form className="max-w-md mx-auto">
+        <label
+          htmlFor="default-search"
+          className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
+        >
+          Search
+        </label>
+        <div className="relative">
+          <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+            <svg
+              className="w-4 h-4 text-gray-500 dark:text-gray-400"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 20 20"
+            >
+              <path
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+              />
+            </svg>
+          </div>
+          <input
+            type="search"
+            id="default-search"
+            className="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            placeholder="Search Mockups, Logos..."
+            required
+          />
+          <button
+            type="submit"
+            className="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          >
+            Search
+          </button>
+        </div>
+      </form>
+    </div>
+  );
 };
 
 export default SearchCol;