vite please play nice with eslint

src/Display.tsx

@@ -1,15 +1,19 @@
 import { useEffect } from "react";
 import { Stack, Container } from "react-bootstrap";
+import { isEmpty } from "lodash";
 
 import { socket } from "./socket";
 import { useAppSelector } from "./hooks";
 import { selectRoomCode } from "./store/socketSlice";
 import { selectContestants } from "./store/displaySlice";
+import { selectCategories } from "./store/cluesSlice";
 import ContestantWidget from "./ContestantWidget";
+import Gameboard from "./display/Gameboard";
 
 const Display = () => {
   const roomCode = useAppSelector(selectRoomCode);
   const contestants = useAppSelector(selectContestants);
+  const categories = useAppSelector(selectCategories);
 
   useEffect(() => {
     socket.emit("new-game");
@@ -20,6 +24,9 @@ const Display = () => {
       <Container>
         <h1 className="text-center">Room code is: {roomCode}</h1>
       </Container>
+
+      {!isEmpty(categories) && <Gameboard categories={categories} />}
+
       <Stack
         direction="horizontal"
         gap={10}

src/display/Gameboard.tsx

@@ -0,0 +1,21 @@
+import { Container, Row, Col } from "react-bootstrap";
+
+import type { Category } from "../store/cluesSlice";
+
+interface Props {
+  categories: Category[];
+}
+
+const Gameboard = ({ categories }: Props) => {
+  return (
+    <Container fluid>
+      <Row>
+        {categories.map(({ name }) => (
+          <Col key={name}>{name}</Col>
+        ))}
+      </Row>
+    </Container>
+  );
+};
+
+export default Gameboard;

src/store/cluesSlice.ts

@@ -6,7 +6,7 @@ interface CluesState {
   categories: Category[];
 }
 
-interface Category {
+export interface Category {
   name: string;
   clues: Clue[];
 }