feat: add block tiles

src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { Image, Layer, Stage, Text } from "react-konva";
+import { Layer, Stage } from "react-konva";
 
 import {
 	Menubar,
@@ -14,7 +14,7 @@ import {
 } from "@/components/ui/menubar";
 
 import ThemeChanger from "./components/menubar/theme-changer";
-import useImage from "use-image";
+import Blocks from "./components/blocks";
 
 function App() {
 	const stageContainerRef = useRef<HTMLDivElement>(null);
@@ -26,12 +26,7 @@ function App() {
 	});
 
 	const [stageScale, setStageScale] = useState(1);
-	const [stageCoords, setStageCoords] = useState({
+	const [stageCoords, setStageCoords] = useState<Position>({ x: 0, y: 0 });
-		x: 0,
-		y: 0,
-	});
-
-	const [image] = useImage("/blocks/programmer-art/stone.png");
 
 	const onWheel = (e) => {
 		const stage = e.target.getStage();
@@ -104,8 +99,7 @@ function App() {
 					onWheel={onWheel}
 				>
 					<Layer imageSmoothingEnabled={false}>
-						<Text text="test" fontSize={20} fill="white" />
+						<Blocks />
-						<Image image={image} />
 					</Layer>
 				</Stage>
 			</div>

src/components/blocks.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { Image } from "react-konva";
+import useImage from "use-image";
+
+function Blocks() {
+	const [image] = useImage("/blocks/programmer-art/stone.png");
+
+	const [blocks, setBlocks] = useState<Block[]>([
+		{
+			name: "stone",
+			x: 0,
+			y: 0
+		},
+    {
+			name: "stone",
+			x: 1,
+			y: 1
+		},
+	]);
+
+	return (
+		<>
+			{blocks.map((block, index) => (
+				<Image key={index} image={image} x={block.x * 16} y={block.y * 16} />
+			))}
+		</>
+	);
+}
+
+export default Blocks;

src/types.d.ts

@@ -0,0 +1,8 @@
+interface Position {
+    x: number;
+    y: number
+}
+
+interface Block extends Position {
+    name: string;
+}