feat: add information of cursor into corner

src/components/blocks.tsx

@@ -3,8 +3,7 @@ import { Image as KonvaImage } from "react-konva";
 
 import blocksData from "@/lib/blocks/programmer-art/average_colors.json";
 
-function Blocks() {
-	const [blocks, setBlocks] = useState<Block[]>([]);
+function Blocks({ blocks, setBlocks }: { blocks: Block[], setBlocks: React.Dispatch<React.SetStateAction<Block[]>> }) {
 	const [images, setImages] = useState<{ [key: string]: HTMLImageElement }>({});
 
 	const findClosestBlock = (r: number, g: number, b: number) => {

src/components/cursor-information.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+function CursorInformation({ mousePosition, blocks }: { mousePosition: Position, blocks: Block[] }) {
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+	const [block, setBlock] = useState<Block>();
+
+	useEffect(() => {
+		if (mousePosition) {
+			const snappedX = Math.floor(mousePosition.x / 16);
+			const snappedY = Math.floor(mousePosition.y / 16);
+
+			setPosition({
+				x: snappedX,
+				y: snappedY,
+			});
+
+			setBlock(blocks.find(b => b.x === snappedX && b.y === snappedY));
+		}
+	}, [mousePosition]);
+
+  return <div className="absolute left-4 bottom-4 flex flex-col gap-1">
+	<div className="bg-zinc-900 px-2 py-1 rounded shadow-xl w-fit">{block?.name ?? "air"}</div>
+
+	<div className="flex gap-4 bg-zinc-900 px-2 py-1 rounded shadow-xl w-fit">
+        <span>X: {position.x}</span>
+        <span>Y: {position.y}</span>
+    </div>
+  </div>
+}
+
+export default CursorInformation