2 files changed, 49 insertions, 0 deletions
diff --git a/src/components/grid/Cell.tsx b/src/components/grid/Cell.tsx
new file mode 100644
index 0000000..fe91da8
--- /dev/null
+++ b/src/components/grid/Cell.tsx
@@ -0,0 +1,19 @@
+import type { GridCell } from '@/types/grid';
+import { getStyleForAnsiColor } from '@/utils/ansi';
+
+interface CellProps {
+    cell: GridCell;
+    onClick?: () => void;
+}
+
+export const Cell: React.FC<CellProps> = ({ cell, onClick }) => {
+    return (
+        <span
+            className={`grid-cell ${onClick ? 'highlightable' : ''}`}
+            onMouseDown={onClick}
+            style={getStyleForAnsiColor(cell.color)}
+        >
+            {cell.char === ' ' ? '\u00A0' : cell.char}
+        </span>
+    );
+};
diff --git a/src/components/grid/GridComponent.tsx b/src/components/grid/GridComponent.tsx
new file mode 100644
index 0000000..75d65aa
--- /dev/null
+++ b/src/components/grid/GridComponent.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import type { Grid, GridCell } from '@/types/grid';
+import { Cell } from '@/components/grid/Cell';
+
+interface GridProps {
+    grid: Grid;
+    onCellInteract?: (cell: GridCell) => void;
+}
+
+export const GridComponent: React.FC<GridProps> = ({
+    grid,
+    onCellInteract,
+}) => {
+    return (
+        <div className='grid'>
+            {grid.map((row, i) => (
+                <div className='grid-row' key={i}>
+                    {row.map((cell, j) => (
+                        <Cell
+                            key={j}
+                            cell={cell}
+                            onClick={() => onCellInteract?.(cell)}
+                        />
+                    ))}
+                </div>
+            ))}
+        </div>
+    );
+};