linter fixes

package.json

@@ -13,11 +13,11 @@
   },
   "dependencies": {
     "@algolia/client-search": "^4.17.0",
-    "@docusaurus/core": "2.4.0",
+    "@docusaurus/core": "2.4.1",
-    "@docusaurus/plugin-content-docs": "2.4.0",
+    "@docusaurus/plugin-content-docs": "2.4.1",
-    "@docusaurus/preset-classic": "2.4.0",
+    "@docusaurus/preset-classic": "2.4.1",
-    "@docusaurus/theme-common": "^2.4.0",
+    "@docusaurus/theme-common": "^2.4.1",
-    "@docusaurus/theme-mermaid": "^2.4.0",
+    "@docusaurus/theme-mermaid": "^2.4.1",
     "@headlessui/react": "^1.7.14",
     "@heroicons/react": "^2.0.18",
     "@mdx-js/react": "^1.6.22",
@@ -37,10 +37,10 @@
     "use-breakpoint": "^3.0.7"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.0",
+    "@docusaurus/module-type-aliases": "2.4.1",
     "@tailwindcss/typography": "^0.5.9",
     "@tsconfig/docusaurus": "^1.0.7",
-    "@types/node": "^20.1.4",
+    "@types/node": "^20.1.7",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
     "rome": "^12.1.0",

src/pages/hardware/index.tsx

@@ -28,20 +28,18 @@ const Hardware = (): JSX.Element => {
 					</h3>
 					<div className="mt-4 sm:mt-0 sm:ml-10">
 						<nav className="-mb-px flex space-x-8">
-							<a
+							<button
-								href="#"
 								className="border-indigo-500 text-indigo-600"
 								aria-current={"page"}
 							>
 								Devices
-							</a>
+							</button>
-							<a
+							<button
-								href="#"
 								className="hover:border-gray-300', 'whitespace-nowrap border-b-2 border-transparent
                 px-1 pb-4 text-sm font-medium text-gray-500 hover:text-gray-700"
 							>
 								Antennas
-							</a>
+							</button>
 						</nav>
 					</div>
 				</div>
@@ -51,9 +49,9 @@ const Hardware = (): JSX.Element => {
 					role="list"
 					className="grid grid-cols-2 gap-x-2 gap-y-4 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:grid-cols-5 xl:gap-x-4"
 				>
-					{hardware.map((device, index) => (
+					{hardware.map((device) => (
 						<HardwareCard
-							key={index}
+							key={device.name}
 							device={device}
 							setDevice={(): void => {
 								setModalData(device);

src/pages/showcase/_components/Card.tsx

@@ -12,7 +12,7 @@ export const Card = React.memo(({ network }: CardProps) => (
 	<div className="card">
 		<div className="card__image">
 			<div style={{ height: "140px" }}>
-				<img img={mapUrl(network.nodes ?? [])} alt={network.title} />
+				<img src={mapUrl(network.nodes ?? [])} alt={network.title} />
 			</div>
 		</div>
 		<div className="card__body">
@@ -76,12 +76,12 @@ export const PlaceholderCard = (): JSX.Element => (
 			/>
 		</div>
 		<div className="card__footer">
-			<a
+			<button
 				className="button disabled button--primary button--block"
 				style={{ marginBottom: "0.5rem" }}
 			>
 				&nbsp;
-			</a>
+			</button>
 			<div
 				style={{
 					display: "flex",

src/pages/showcase/_components/CardTags.tsx

@@ -9,11 +9,11 @@ export interface CardTagsProps {
 export const CardTags = ({ tags }: CardTagsProps) => {
 	return (
 		<div>
-			{tags.map(({ color, label }, index) => {
+			{tags.map(({ color, label }) => {
 				return (
 					<span
 						className="badge"
-						key={index}
+						key={label}
 						style={{
 							backgroundColor: color,
 							marginRight: "0.3rem",

src/pages/showcase/_components/Filters.tsx

@@ -29,13 +29,13 @@ export const Filters = (): JSX.Element => {
 						flexWrap: "wrap",
 					}}
 				>
-					{data.map((tag, i) => {
+					{data.map((tag) => {
 						const { label, color } = tag;
 						const id = `showcase_checkbox_id_${tag};`;
 
 						return (
 							<div
-								key={i}
+								key={tag.id}
 								style={{
 									boxSizing: "border-box",
 									position: "relative",

src/pages/showcase/_components/Network.tsx

@@ -61,9 +61,9 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
 							<h2>Bill of Materials</h2>
 						</div>
 						<div className="card__body">
-							{data.materials?.map((material, index) => (
+							{data.materials?.map((material) => (
 								<div
-									key={index}
+									key={material.id}
 									style={{
 										borderTop: "2px solid gray",
 										display: "flex",

src/pages/tools/OEM.tsx

@@ -86,8 +86,8 @@ const OEM = (): JSX.Element => {
 						setOemFont(parseInt(e.target.value));
 					}}
 				>
-					{enumOptions.map(([name, value], index) => (
+					{enumOptions.map(([name, value]) => (
-						<option key={index} value={value}>
+						<option key={name} value={value}>
 							{name}
 						</option>
 					))}

tsconfig.json

@@ -1,3 +1,6 @@
 {
+  "compilerOptions": {
+    "moduleResolution": "node"
+  },
   "extends": "@tsconfig/docusaurus/tsconfig.json"
 }